TUANLEADED

This is the first of a series of entries that I will devote to unpacking the popular JavaScript library: jQuery. I chose to start with AJAX because, of all the jQuery functions, I personally rely on it the most yet understand it the least.

Its a good idea to understand what goes on underneath the hood of jQuery; it gives you a greater appreciation of how much time the framework saves, reduces your dependency on the framework, gives you a better understanding of how JavaScript works (and how broken it can be across browsers), and gives insight on how you can write more optimized code.

XMLHttpRequest

It starts with the XMLHttpRequest object. Using Chrome, I created a blank HTML page and inspected a new XMLHttpRequest to take a peek at its properties and its methods.

xhr = new XMLHttpRequest();
console.log(xhr);

Cross-Browser Compatibility

If we look into the history behind XMLHttpRequest, we’ll find that Microsoft’s implementation is an ActiveXObject, which came out before XMLHttpRequest became a standard. Jonathan Snook gives an example of how a function that checks for the native AJAX transport object.

In jQuery, the check looks something like:

function createStandardXHR() {
  try {
    return new window.XMLHttpRequest();
  } catch( e ) {}
}

function createActiveXHR() {
  try {
    return new window.ActiveXObject( "Microsoft.XMLHTTP" );
  } catch( e ) {}
}

jQuery.ajaxSettings.xhr = window.ActiveXObject ?
  /* Microsoft failed to properly
   * implement the XMLHttpRequest in IE7 (can't request local files),
   * so we use the ActiveXObject when it is available
   * Additionally XMLHttpRequest can be disabled in IE7/IE8 so
   * we need a fallback.
   */
  function() {
    return !this.isLocal && createStandardXHR() || createActiveXHR();
  } :
  // For all other browsers, use the standard XMLHttpRequest object
  createStandardXHR;

This detects if the browser supports ActiveXObjects, otherwise it creates a (standard) XMLHttpRequest object.

open and send

The first two XMLHttpRequest methods which I'll use to make an AJAX request and return the results are open and send:

xhr = new XMLHttpRequest();
console.log(xhr);
xhr.open("GET","rsp.txt",false);
xhr.send();
console.log(xhr);

The open() method fetches the file rsp.txt with a GET call, and the third parameter is an optional boolean for asychronous requests. Here we've set it to false to indicate that it is a synchronous request: the script will wait for the request to complete before continuing.

open simply makes the connection; xhr doesn't contain the contents of rsp.txt until we invoke send(). After send, we can see that xhr.response and xhr.responseText are no longer empty strings, as shown with the second xhr object in our console:

Synchronous and Asynchronous Requests

We can change the xhr.onreadystatechange property to be a function that acts as a callback. It acts as a listener to the xhr.readyState property, which can be in one of five states:

value	state
0	UNSENT
1	OPENED
2	HEADERS_RECEIVED
3	LOADING
4	DONE

Observing the readyState

To get a better understanding of the readyState, we'll set xhr.onreadystatechange to a function that simply outputs the current value of readyState whenever it changes.

xhr = new XMLHttpRequest();
console.log(xhr);

xhr.onreadystatechange = function() {
    console.log(xhr.readyState);
};

xhr.open("GET","rsp.txt",false);
xhr.send();
console.log(xhr);

If we change the third open parameter to true, we make an asynchronous call and will see this instead:

Notice that only two readyStates are displayed in the synchronous call, even though xhr.onreadystatechange should output on every state change. According to MDN's documentation, we should not use onreadystatechange for synchronous calls.

In the asynchronous call, xhr is output null, and all the readyState changes are detected. The output is null because of the asynchronous nature of the request; we are attempting to output xhr even before send() is finished. Add another console.log(xhr) to onreadystatechange to see what state xhr is in at every step of the request.

xhr = new XMLHttpRequest();
console.log(xhr);

xhr.onreadystatechange = function() {
    console.log(xhr.readyState);
    console.log(xhr);
};

xhr.open("GET","rsp.txt",false);
xhr.send();
console.log(xhr);

Callbacks and Streaming

Our updates to xhr.onreadystatechange is effectively lays down the foundation for a callback to be fired. We can make the following updates so that the callback is only fired once, when the request has been successfully completed:

xhr.onreadystatechange = function() {
    if( xhr.readyState === 4 ) {
        callback();
    }
};

In some browsers, it is also possible to have a listener to perform feedback while the response is still loading. We can accomplish this by listening for when xhr.readyState:

xhr.onreadystatechange = function() {
    if( xhr.readyState === 3 ) {
        var dataSoFar = xhr.responseText;
        doWhileLoading( dataSoFar );
    } else if( xhr.readyState === 4 ) {
        var data = xhr.responseText;
        doWhenComplete( data );
    }
};

This is called streaming, and allows us to provide continuous feedback even before all the data has been transmitted.

[to be continued...]