Ajax basics

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.

Keen to learn more? I have a website dedicated entirely to Ajax, at CrackAjax.net, where you'll
find more tutorials, example code and fully-worked projects

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");

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

http = new
XMLHttpRequest();

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

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.

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.