Ajax

Uses of AJAX
AJAX has many potential uses. Here are a few of them:


 * Updating page information
 * Real-time data validation
 * Obtaining data for a control
 * Responding to server events
 * Pushing data to the client
 * Real-time interaction
 * Real-time monitoring
 * Auto completion

The Technology
As with all technology, there are issues that you will need to deal with when using AJAX. Some of these issues include:


 * AJAX requires both client side and server side code. This means that you have more technology to master. It also means that you will have to rely on client side technology which you do not control. At a minimum it means knowing DHTML, JavaScript and at least one server side technology.
 * Debugging will be more difficult since you will need to debug both client and server code in a distributed environment. Be sure to set up your local development server to be as close to your live server as you can. For example, if you are using PHP do not use PHP 5.0 on your local server if your live server is using PHP 4.06.
 * All client side code is viewable including all JavaScript used on the client. So if you have any secrets be sure to put them on the server side. You may also want to minimize and obfuscate your JavaScript.
 * You may need to consider using an AJAX enabled framework as your application gets more complex.
 * Content only shown by AJAX cannot be indexed by search engines. And even if it were indexed it would difficult to construct an URL that a search engine could directly reference.
 * There are some — often subtle — differences between browsers and different versions JavaScript. This means that you will need to test on multiple platforms and gracefully degrade as needed.

How to get the XMLHttpRequestObject
The AJAX process starts with a DOM event. In step 1 you need to obtain a XMLHttpRequest object. This is typically done using a function like the following so that the code will work on different browsers: function GetXMLHttpRequest { var object = null; if (window.XMLHttpRequest) { object = new XMLHttpRequest; } else if (window.ActiveXObject) { try { object = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { }       if (object == null) { try { object = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { }       }    }    if (object == null) { alert("Your browser does not support AJAX"); }   return object; }

What's next?
After you have the XMLHttpRequest object, you then need to set the 'onreadystatechange' callback function and call the 'open' and 'send' methods using code:

XMLHttpRequestObject.onreadystatechange = ProcessRequest; XMLHttpRequestObject.open("GET", url, true); XMLHttpRequestObject.send(data);

Note that the data that you send and receive when using the XMLHttpRequest object can be in any format. It does not need to be XML. We recommend that you look at JSON in place of XML. JSON is a subset of the literal object notation in JavaScript that includes many of the features of XML. If your application is fairly simple you could also use traditional name value pairs.

At the end of step 1 you should provide the user some visual indication that something has changed. In the examples on this page we rename the Vote button to Loading...

In step 2 you will need to have a handler that processes your request on the server. The handler can be a CGI or other server side script such as PHP, ASP, or JSP.

Process the Request
In step 3 you will need to process the response using your ProcessRequest function. It should look something like the following: function ProcessRequest { if (XMLHttpRequestObject.readyState == 4) { // complete if (XMLHttpRequestObject.status == 200) { // OK           var result = Parse; if (result) // Update HTML based on the result }       } else { // An error has occurred. }   } }

Be sure to check ready state and status codes since the handler will be called with different ready states and status codes. In this example we are only interested when the call is complete.

Important: Because the ProcessRequest function is being used as a callback you do not have control over when or if it will be called.

Possible XMLHttpRequestObject.readyState codes are: 0 - uninitialized 1 - loading 2 - loaded 3 - interactive 4 - complete

XMLHttpRequestObject.status codes are just HTTP status codes.