Introduction to AJAX

AJAX is an essential tool in any web developer's toolbox. We'll take a quick look at the history of the technology, and how you can use it in your web applications.

The computer industry thrives on acronyms. AJAX is no exception. Short for Asynchronous JavaScript And XML, AJAX has actually existed in one form or another for nearly a decade, although it's only seen a surge in popularity for the past couple of years(the term 'AJAX' itself was only coined in 2005).

AJAX lets you communicate between a web page and a backend server without reloading the page. Since you're only sending data back and forth and not reloading the HTML and CSS that control the layout of your page, AJAX uses less bandwidth then typical page-based web application. One end result of this is that web applications feel more responsive.

Most of the pioneering work done with AJAX was done by Microsoft when they introduced the XMLHttpRequest Object into Internet Explorer 5. Once the benefits of AJAX became clear, other browsers followed with their own implementation shortly thereafter.

Let's create an example JavaScript fuction that uses AJAX.


function ajaxCall(url)
{
if (window.XMLHttpRequest)
PageRequest = new XMLHttpRequest()
else if (window.ActiveXObject)
{
try
{
PageRequest = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e)
{
try
{
PageRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e)
{
return (false);
}
}
}
else
return (false);

PageRequest.open('GET', url, true)
PageRequest.send(null)
}


Let's walk through the code. The first thing we do is check to see if the browser has a native XMLHttpRequest object; something that is typically true for browsers such as Safari, Firefox, and Opera. If there is such an object, we instantiate it with a variable of PageRequest. If there is no such object, we are probably dealing with IE and try instantiating one of the ActiveX components IE uses for AJAX communication.

Once we have a valid XMLHttpRequest object (whether its ActiveX based or otherwise), we call the 'open' method with three parameters. The first parameter is the method of the call we're making (either 'GET' or 'POST'). The second parameter is the address of the program we're calling. The last parameter is whether the call is asynchronous or not. In other words, if the third parameter is true, the script continues processing without waiting for a reply; but if the parameter is false the script will stop right there until it gets a response.

Since AJAX is 'Asynchronous JavaScript And XML', we've set this to true. We can then call the send method with any variables we are passing along(in this example there isn't any, so we've just passed in null).

While this works fine, its the barest example of how you would use AJAX. A glaring question remains: how do we get the response from the server? We do that by using an onreadystatechanged listener. See below.


PageRequest.onreadystatechange=function()
{
if (PageRequest.readyState == 4 && PageRequest.status == 200)
{
if (PageRequest.responseText)
{
}
}
}


You see that we assign a function to the oreadystatechange property. This function is called when the state of the XMLHttpRequestObject(PageRequest) has changed in some fashion.

Inside the function we immediately check two fields. The first is the readystate field. This tells us what the state of the XMLHttpRequest object is. There are four valid states:

0. uninitialized
1. open
2. sent
3. receiving
4. loaded

We want to proceed with our code once the response from the server has been loaded-so we're primarily interested in number four. The other field we check is the status field; this corresponds to HTTP status codes. We're hoping for a status code of 200-which means the call was made successfully-if the url you've given doesn't match up with a program or page, you would get a 404 here; just as you would if you tried to access the URL from a web browser.

Once we know everything is good, we can access the responseText field-this is the actual response from the server and we can do parsing on it and proceed with our program(there is also another field for retrieving data called responseXML if your server program is spitting out XML for you to use).

Although this is a good beginning, we've just started to scratch the surface of what and how you can use AJAX. Hopefully this is enough to get you started.