Ajax Beginners Tutorial

Using Ajax

Page update without refresh using Javascript, PHP and XML's XMLHTTPRequest object (also known as 'remote scripting')

In this tutorial we'll discuss the basic principles of remote scripting using Ajax, a combination of javascript and XML to allow web pages to be updated with new information from the server, without the user having to wait for a page refresh.  Ajax therefore allows us to build web applications with user interfaces rather more like those of desktop applications, providing a better experience for the user.  Ajax tools are becoming increasingly popular, and a list of ajax development projects is also given.

Here you'll find:

• a brief tour of the important principles of Ajax
• code examples of all important points
• links to further Ajax and related resources

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:

http = new ActiveXObject("Microsoft.XMLHTTP");

There's an example of a short piece of code to create the object here, which clearly demonstrates the different approaches for the two different browser types, along with a browser detection routine.

Secondly, we need to write an event handler which will be called via some event on our user's page, and will handle sending our request for data to our server.

The event handler will use various methods of our XMLHTTPRequest object to:

• make the request of the server
• check when the server says that it has completed the request, and
• deal with the information returned by the server

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];

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 Demonstration

Making Ajax Easy

There are quite a few toolkits springing up that package the Ajax calls into useable libraries.  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.