AJAX with Vanilla Javascript. (XMLHttpRequest)

_notes.md

Short XHR Examples

Examples shown are bare minimum needed to achieve a simple goal.

Resources

• Google Chrome's Dev Tools' Network Panel c-c-c-c-c-ULTIMATE c-c-c-COMBO!!!
• requestb.in enpoints for your HTTP Requests as a free service.

get-request.js

$(function () {
  // event handler
  function reqListener () {
    console.log( this.response );
  }
  
  // get new XHR object
  var newXHR = new XMLHttpRequest();
  
  // bind our event listener to the "load" event.
  // "load" is fired when the response to our request is completed and without error.
  newXHR.addEventListener( 'load', reqListener );
  
  // go to http://requestb.in/1k6rql51?inspect to view your request!
  newXHR.open( 'GET', 'http://requestb.in/1k6rql51' );

  // send it off!
  newXHR.send();
});

post-custom-data.js

$(function () {
  // event handler
  function reqListener () {
    console.log( this.response );
  }
  
  // get new XHR object
  var newXHR = new XMLHttpRequest();
  
  // bind our event listener to the "load" event.
  // "load" is fired when the response to our request is completed and without error.
  newXHR.addEventListener( 'load', reqListener );
  
  // go to http://requestb.in/1k6rql51?inspect to view your request!
  newXHR.open( 'POST', 'http://requestb.in/1k6rql51' );
  //             ^-- IMPORTANT: to send data to the server with it appearing in the url use 'POST'
  

  // the object below can be crafted in any fashion. In the end you want an Object Literal with your data stored on it.
  var jsonData = { name: 'Ray', password: 'NIGERA RULES?!' };
  
  // HTTP Protocol can only work with strings when transmitting data over the internet.
  // JSON is a class and .stringify is a class-method. We use it to format
  // the Javascript Data, which lives in memory, to JSON string.
  var formattedJsonData = JSON.stringify( jsonData  );
  
  // INSPECT WHAT YOU EXPECT, compare the two.
  console.log( jsonData );
  console.log( JSON.parse( formattedJsonData ) );

  // send it off
  newXHR.send( formattedJsonData );
});

post-data-form-form.js

$(function () {
  // event handler
  function reqListener () {
    console.log( this.response );
  }
  
  // get new XHR object
  var newXHR = new XMLHttpRequest();
  
  // bind our event listener to the "load" event.
  // "load" is fired when the response to our request is completed and without error.
  newXHR.addEventListener( 'load', reqListener );
  
  // go to http://requestb.in/1k6rql51?inspect to view your request!
  newXHR.open( 'POST', 'http://requestb.in/1k6rql51' );
  //             ^-- IMPORTANT: to send data to the server with it appearing in the url use 'POST'
  
  // set the header
  // this lets the server know where/how to expect your data
  // visit: http://requestb.in/1k6rql51?inspect
  // you will notice that the data sent over will appear under "FORM/POST PARAMETERS"
  newXHR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );

  // this is how form data looks like when you send it with the attributes `action="POST"` on your form
  var formData = 'name=Ray&password=NIGERIA%20RULES?!';

  newXHR.send( formData );
});