We Staff AJAX Programmers

With the introduction of Gmail and Google Maps applications, the world saw the rise of a relatively new technology called AJAX. AJAX stands for Asynchronous JavaScript and XML and is a web development method that communicates with server-side scripts to update content of a web page without having to refresh the entire page. The first, and possibly the most common application of AJAX, is to add more interactivity to web pages by asynchronously updating portions of a page based upon user action. Another application of AJAX is to reduce load time of a webpage by loading only the most important content first and then loading additional content as needed. You can see examples of heavy use of AJAX technology in Facebook’s Newsfeed page when you want to post a comment or see older newsfeed posts.

In order to integrate AJAX into your project, you will need to acquire basic knowledge of JavaScript and DOM manipulation. It is highly recommended that a JavaScript library is used for AJAX integration. After all, why would you want to reinvent the wheel and rewrite cross-browser compatible AJAX code? Nowadays, there are many powerful JavaScript libraries available for web developers, and among those, jQuery and YUI stand out the most thanks to their features and broad community support.

You can find jQuery and YUI documentation at http://jquery.com/ and http://developer.yahoo.com/yui/ respectively.
It’s time to look under the hood and see how AJAX works.

AJAX uses XMLHttpRequest() object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files.

Here is JavaScript function that sends an AJAX request
var url = 'http://domain.com/getDescription.php?channelId=' + channeled;

`// if Firefox, Safari
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
// if IE
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = processRequest;
req.open("GET", url, true);
req.send(null);

function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
response = req. responseText;
document.getElementById(‘update-div’).innerHTML = response;
} else {
alert ( "Not able to retrieve description" );
}
}
}`

The XMLHttpRequest object will be doing the http connection to retrieve description. We need to check to see if it is IE or not and create the XMLHttpRequest object.

// if Firefox, Safari if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } // if IE else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); }

Set the callback function, and send the HTTP "GET" request to the server:

`req.onreadystatechange = processRequest;
req.open("GET", url, true);
req.send(null);

getDescription.php script will create a response that returns a description
`

JavaScript checks for the response code for the HTTP request. Status is 200 for "OK". Update a

<

div> with returned text.

function processRequest() { if (req.readyState == 4) { if (req.status == 200) { response = req. responseText; document.getElementById(‘update-div’).innerHTML = response; } else { alert ( "Not able to retrieve description" ); } } }

So this is how AJAX works in a nutshell. If you have a JavaScript library installed, the JavaScript code will probably look cleaner and you would not have to handle cross-browser compatibility issues.
For more information on jQuery and YUI AJAX API, refer to:

http://api.jquery.com/jQuery.ajax/
http://developer.yahoo.com/yui/connection/