AJAX, an acronym for Asynchronous Javascript and XML, is a cross platform technology which makes web applications faster and more responsive. In traditional javascript coding, to enable the user of your page to get/send any information from a database or a file (read xml) on the server, you would have made an HTML form and GET or POST data to the server. The clicked “submit” button and waited for the server response and a new page would be loaded with the results.

As the server returned a new page each time the user submits input, traditional web applications used to run slowly and tended to be less user-friendly. Using Ajax you can dynamically retrieve data from the web application on the server using the XMLHttpRequest object. Today’s browsers contain the XMLHttpRequest object which is used to create a GET or POST request asynchronously. In other words, with Ajax, Javascript communicates directly with the server.

With an HTTPRequest, a web page can make a request to and get a response form a web server without reloading the page. It also helps to register a callback mehtod which is invoked when the response for that request returns to the client side browser. This response can be either plain text or in XML format.

XMLHttpRequest object is the keystone of Ajax. This object has three important properties:

1. The onreadystatechange Property

This property stores the callback method which will process the response from a server. The following code defines an empty function and sets the onreadystatechange property.

xmlHttp.onreadystatechange=function()
  {
  //  some code 
  }

2. The readystate Property

This property holds the status of the server’s response. Each time the ‘readystate’ changes, the ‘onreadystatechange’ function will be executed.

Following are the possible states related to this property.

State	Description
0	The request is not initialized
1	The request has been set up
2	The request has been sent
3	The request is in process
4	The request is complete

xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    // Get the data from the server's response
    }
  }

3. The responseText Property

This property is used to retrieve the data sent back from the server.

To send off a request to the server the open( ) and send( ) method is used. The open( ) method takes three arguments. The first argument states the method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script/file. The third argument specifies that the request should be handled asynchronously. The send( ) method sends the request off to the server.

xmlObj.open ('GET', file, true)
xmlHttp.send(null);

Let us make a simple application to get the things clear.

We have this xml file staff.xml in the server —

 James Fernandex
 
 033-33434459
 jfernandez@democomp.com

Let us write a simple html file ajaxtest.html

  
    
    
  
  
    
Developing Web Applications with Ajax
    
This page demonstrates the use of Asynchronous Javascript and XML (Ajax) technology to
    update a web page's content by reading from a remote file dynamically -- no page reloading
    is required. Note that this operation does not work for users without JavaScript enabled.
    

    This is some sample data.  View XML data.
    
  

Next we link the staff.xml file, by putting this script in the head part of the html document