Ajax Tutorial for Beginners

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

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. 

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

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.

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.