AJAX For The Masses

When I first heard the term AJAX I just committed it in my mind to being some type of magic that I would never understand. I thought AJAX required jQuery and if you prayed hard enough it would execute your get requests, but if angered might burn your house down. In this post I aim to demystify this concept for both myself and the masses. In order to understand AJAX there are three fundamental pieces you must first understand. They are the XML HTTP request, the term Asynchronous, and the callback function.

What AJAX itself Means

AJAX simple stands for Asynchronous JavaScript and XML. It allows you to make a partial update to your page by making a request to the server. There are plenty of articles like this one that do a great job of explaining the ins and outs of AJAX.

The XML HTTP Request

The XML HTTP request is what makes our asynchronous JavaScript calls possible and the documentation for that is here. This method serves as our boatman ferrying data between the client and server based upon a JSON object and parameters.

Asynchronous

The term asynchronous is quite fancy and academic sounding but its actual meaning is actually quite simple. All asynchronous means is that things do not have to happen in order. Your program can execute a particular function and still go about the rest of its day and when that function returns its result it is handled by a callback. This improves performance by allowing lots of things to happen at the same time. I like to think about it like the roots of a tree. The tree in this case is your program and the roots are your asynchronous functions. They all go off on their own and deliver water to the tree but one root does not always have to wait on another to keep growing. However, in order to make these proverbial roots useful a callback function is needed.

Callbacks

A callback function is simple a function that is passed to another function as a parameter to be executed. This pattern allows us to continue to execute code after we receive a response from our asynchronous function. This is important when we want to obtain results from an asynchronous function.

Callback functions work by providing the a path for results to go down once they are produced. Figure 1.0 provides an example of a callback function.

Figure 1.0

var myXMLRequest = new XMLHttpRequest();
myXMLRequest.open(“GET”, “MyURL”);
myXMLRequest.send(null);
//Here is where we pass our callback
myXMLRequest.onreadystatechange = function(){
var Done = 4;
var Ok = 200;
if(myXMLRequest.readyState === DONE){
if(myXMLRequest.status === Ok){
//Here we can execute code to handle our results
//we can also call other functions and pass our results to them
//please keep in mind these results are no parsed
myCallback(myXMLRequest.results);
}
else{
console.log(“Error: ” + myXMLRequest.status);
}
}
}

function myCallback(output){
alert(“I succeeded” + “with results ” + output);
}

What this function is doing is creating a new XMLHttpRequest and then passing a function to the onreadystatechange event in order to execute code as the function completes. This works because the onreadystatechange function fires every time the ready state updates. Once it provides code 4 it will pass our logic tests and fire our myCallback function. Technically myCallback is a callback within a callback but can serve as a way to pass information from an asynchronous call back to the rest of our program. You can combine this with promises to further the power of this pattern.

Conclusions

While this method may be more obtuse than using jQuery (which I still recommend) I think understanding it helps make more sense of what jQuery is doing behind the scenes. It is also a good way to start working with callback functions.

Advertisements