XMLHttpRequest

HTTP Response Analysis

The type of a message returned in response to an XMLHttpRequest can be set as an arraybuffer, blob, document, json, or text. The default response type is the empty string:

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=showResponseType;
xhr.open("GET", "http://example.com/");
xhr.send();
. . .
function showResponseType(event) {
 if(this.readyState==4) {
  if(this.status==200) {
   console.log(this.responseType); // empty string
   console.log(this.response); // response entity body is returned as text
   console.log(this.responseText); // the same text data
  }
 }
}

ArrayBuffer

The arraybuffer response type may be useful for requesting binary objects from the Web:

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=drawImage;
xhr.open("GET", "http://example.com/textures/raw-image-data"); // raw bitmap with red, green, blue and alpha values
xhr.responseType="arraybuffer";
xhr.send();
. . .
function drawImage(event) {
 if(event.target.readyState==4) {
  if(event.target.status==200) {
   var imageAsArrayBufferView=new Uint8ClampedArray(event.target.response);
   var context=document.getElementsByTagName("canvas")[0].getContext("2d");
   var imageData=context.createImageData(100, 100);
   var counter;
   for(counter=0; counter<imageData.data.length; counter+=4) {
    imageData.data[counter]=imageAsArrayBufferView[counter]; // setting red sample
    imageData.data[counter+1]=imageAsArrayBufferView[counter+1]; // setting green sample
    imageData.data[counter+2]=imageAsArrayBufferView[counter+2]; // setting blue sample
    imageData.data[counter+3]=imageAsArrayBufferView[counter+3]; // setting alpha
   }
   context.putImageData(imageData, 0, 0);
  }
 }
}

Blob

Setting the responseType property to blob represents an HTTP response as a binary large object. In the example below, an X.509 certificate is fetched from the server and exposed as a file to download:

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=readX509Certificate;
xhr.open("GET", "http://example.com/public-key-certificates/certificate.pem");
xhr.responseType="blob";
xhr.send();
. . .
function readX509Certificate(event) {
 if(event.target.readyState==4) {
  if(event.target.status==200) {
   var blob=event.target.response;
   var url=window.URL.createObjectURL(blob);
   var link=document.createElement("a");
   link.href=url;
   link.download="certificate.pem";
   link.appendChild(document.createTextNode("download certificate"));
   document.body.appendChild(link);
   . . .
  }
 }
}

Document

If the response type is document, two XHR properties can be employed to display the result of the HTTP message exchange: these are response and responseXML. In case an XML file is fetched from the Web, the response is returned as an XMLDocument:

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=parseMarkup;
xhr.open("GET", "http://example.com/metadata/document.xml");
xhr.responseType="document";
xhr.send();
. . .
function parseMarkup(event) {
 if(event.target.readyState==4) {
  if(event.target.status==200) {
   var xmlDocument=event.target.responseXML; // or event.target.response
   var xmlSerializer=new XMLSerializer();
   var markup=xmlSerializer.serializeToString(xmlDocument);
   console.log(markup);
  }
 }
}

If the fetched resource is an HTML file, the response is represented as HTMLDocument

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=parseMarkup;
xhr.open("GET", "http://example.com/html.html");
xhr.responseType="document";
xhr.send();
. . .
function parseMarkup(event) {
 if(event.target.readyState==4) {
  if(event.target.status==200) {
   var htmlDocument=event.target.response;
   console.log(htmlDocument.body.innerHTML);
  }
 }
}

JSON

The response can be returned as a JSON object. Let's assume a server-side JSON file has the following structure:

{
 "images": ["aquamarine.png", "diamond.png", "emerald.png", "ruby.png"]
}

Then the client-side code can look like this:

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=parseListOfImages;
xhr.open("GET", "http://example.com/res-lists/images.json");
xhr.responseType="json";
xhr.send();
. . .
function parseListOfImages(event) {
 if(this.readyState==4) {
  if(this.status==200) {
   console.log(this.response); // response is returned as Object with images property
   console.log(JSON.stringify(this.response)); // response is transformed into string
   console.log(this.response.images[0]); // returns "aquamarine.png"
  }
 }
}

Text

If the responseType property is text, the response is represented as a text string:

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=displayText;
xhr.open("GET", "http://example.com/internet-standards/rfc2045.txt");
xhr.responseType="text";
xhr.send();
. . .
function displayText(event) {
 if(event.target.readyState==4) {
  if(event.target.status==200) {
   var rfcText=event.target.response; // or event.target.responseText
   var div=document.createElement("div");
   div.style.width="30%"; div.style.height="300px";
   div.style.whiteSpace="pre"; div.style.overflow="scroll";
   div.appendChild(document.createTextNode(rfcText));
   document.body.appendChild(div);
  }
 }
}

Stream

Internet Explorer 11 supports the prefixed stream response type. One of possible scenarios of using the type is the streaming of media:

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=handleStream;
xhr.open("GET", "http://example.com/media/audio.mp3");
xhr.responseType="ms-stream";
xhr.send();
. . .
function handleStream(event) {
 if(event.target.readyState==3) {
  var stream=event.target.response;
  var url=window.URL.createObjectURL(stream);
  var audio=document.getElementById("audio-id");
  audio.src=url;
 }
}