Browser - XMLHttpRequest (XHR) API

The XMLHttpRequest is a web api function that performs an resource fetch with an Aysnchronous HTTP request

The status of an XHR request.

With a get request

• A function to parse the response when the status of the request has change to DONE (ie load event is received)

function onLoaded() {
  var data = JSON.parse(this.responseText);
  data.items.map(item => (
      console.log(item.name+" "+item.price)
  ));
}

• A function to handle any error

function error(err) {
  console.log('Fetch Error', err);
}

• The several steps needed to send a XMLHttpRequest.

var xhRequest= new XMLHttpRequest();
xhRequest.onload = onLoaded;
xhRequest.onerror = error;
xhRequest.open('get', '/doc/json/items.json', true);
xhRequest.send();

• An utility function to shows the description of the state and not the constant number

function toStateDescription(state) {
	switch(state) {
	  case XMLHttpRequest.DONE:
		return 'DONE'
		break;
	  case XMLHttpRequest.UNSENT:
		return 'UNSET';
		break;
	  case XMLHttpRequest.OPENED:
		return 'OPENED';
		break;
	  case XMLHttpRequest.HEADERS_RECEIVED:
		return 'HEADERS_RECEIVED';
		break;
	  case XMLHttpRequest.LOADING:
		return 'LOADING';
		break;
	  default:
		throw new Error("Unknown status "+state);
	}
}

• The callback function when the state changes. It will show the request status when the state is done.

function stateListener () { 
    console.log("The state has changed to "+toStateDescription(this.readyState));
    if (this.readyState === XMLHttpRequest.DONE ) {
        if (this.status === 200) {
            console.log("The request has finished with the following status ("+this.status+" - "+this.statusText+")");
        } else {
            console.log("The request has not finished successfully. Status = ("+this.status+" - "+this.statusText+")");
        }
    }
}

• Send a post

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = stateListener;
xhr.open("POST", 'https://api.bytle.net/analytics', true);
xhr.setRequestHeader("Content-Type", "application/json"); // How to set a header (must be called after open)
// The send argument is the body
xhr.send('{ "event_name": "script called", "properties": { "url": "'+parent.document.URL+'", "type": "example"} }');

In the Browser devtool, you can see the request.

Example with Chrome.

You can see the type of request with the X-Requested-With header.

X-Requested-With:XMLHttpRequest

In the send method, you are passing the body.

If you pass:

• a formdata object, the resulting body will be a multipart/form-data
• a URLSearchParams, the resulting body will be a application/x-www-form-urlencoded
• a string, the resulting body is a text/plain;charset=UTF-8
• … more, see the body extraction reference documentation

• XMLHttpRequest - Specification (Level 1)
• https://xhr.spec.whatwg.org/
• https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send