Beginner's Guide to AJAX and Using AJAX

This tutorial covers subjects which require some degree of familiarity with Javascript and PHP. Beginners may therefore find it a little hard going, but hopefully should still be able to grasp the principles and uses of Ajax, if not the details. There are some demos and further links at the bottom of the article and elsewhere on these pages - feel free to explore..

What is it?
The standard and well-known method for user interaction with web-based applications involves the user entering information (e.g. filling out a form), submitting that information to the server, and awaiting a page refresh or redirect to return the response from the server.

This is at times frustrating for the user, besides being rather different to the 'desktop' style of user interface with which (s)he may be more familiar.
Ajax (Asynchronous Javascript And XML) is a technique (or, more correctly, a combination of techniques) for submitting server requests 'in the background' and returning information from the server to the user without the necessity of waiting for a page load.

Ajax is actually a combination of several technologies working together to provide this capability.

How does it work?
Instead of a user request being made of the server via, for example, a normal HTTP POST or GET request, such as would be made by submitting a form or clicking a hyperlink, an Ajax script makes a request of a server by using the Javascript XMLHTTPRequest object.

Although this object may be unfamiliar to many, in fact it behaves like a fairly ordinary javascript object. As you may well know, when using a javascript image object we may dynamically change the URL of the image source without using a page refresh. XMLHTTPRequest retrieves information from the server in a similarly invisible manner.

How is it coded?
There are a few, relatively simple, steps to coding an Ajax application. The description below is an attempt to describe the salient points without bogging down the new user in too many of the technicalities.

Firstly, we need to know how to create an XMLHTTPRequest object. The process differs slightly depending on whether you are using Internet Explorer (5+) with ActiveX enabled, or a standards-compliant browser such as Mozilla Firefox.

With IE, the request looks like:

whereas in a standards-compliant browser we can instantiate the object directly:

http = new XMLHttpRequest();

We can make our request of the server by using a GET method to an appropriate server-side script. Here's an example event handler called updateData which assumes that we have created our XMLHTTPRequest object and called it http:

function updateData(param) {

var myurl = [here I insert the URL to my server script];

http.open("GET", myurl + "?id=" + escape(param), true);

http.onreadystatechange = useHttpResponse;

http.send(null);

}

Note that the function listens to the onreadystatechange property of the XMLHTTPRequest object and, each time this parameter changes, calls a further function useHttpResponse.

You will note also that, for the sake of clarity, I have said little about the server-side script which is called - essentially this can be any server routine which will generate the required output when called with the relevant URL and appended parameters, as in any other HTTP GET request. For the sake of the example we are passing a variable named id with a value param passed as an argument to the updateData function.

Thirdly, then, we need to write a function useHttpResponse which will establish when the server has completed our request, and do something useful with the data it has returned:
function useHttpResponse() {

if (http.readyState == 4

) {

var textout = http.responseText;

document.write.textout;

}

}

Note here that our function checks for a readyState value of 4 - there are various numbered states describing the progress of such a request, but we are only interested in the value of 4, which indicates that the request is complete and we can use the returned data.

In this case, we have received our information as simple text via the responseText property of our XMLHTTPRequest object. Information can, however, be returned as XML or as properties of a predefined javascript object, though this is perhaps beyond the scope of this tutorial.
Try out all the techniques described above in the
ajax demonistration

Making Ajax Easy
There are quite a few toolkits springing up that package the Ajax calls into useable libraries. You've probably heard of some of the popular toolkits and frameworks such as those by telerik and jackbe. For small projects, these may not be worth using due to the code overhead and learning curve involved, but for more complex Ajax projects you may find them useful. You'll find some relevant links below and elsewhere on these pages - feel free to explore.