A First Touch on AJAX

Side Note: First Draft on Apr 12 2011. I once had a chance to work part-time on AJAX web development during undergrad, but my friend and I quit half way. Recently, I had the chance to develop some simple AJAX pages, so it’s kind of first touch.

AJAX, stands for Asynchronous JavaScript and XML, is a group of popular technologies used in client-side web development for interactive applications. The main idea of AJAX is to retrieve data from server at the background and dynamically update the web page.

The advantage of this technique is it allows client web page to be updated partially without refreshing the entire page. Therefore, less data is exchanged between client and server, and the web application becomes more responsive.

One of the earliest example of AJAX is Google’s search keyword auto-completion. The web page is constantly sending the letters you typed into the search box back to Google servers, and Google’s backend servers will do the analysis and return a list of possible keywords. Then client side page will parse this data and do the auto-completion for you.

The difference between the traditional web application and AJAX application is as below,

Picture from interakt

The AJAX engine is nothing but some JavaScript downloaded from the web to the user’s browser.

In AJAX apps, data is usually retrieved using XMLHttpRequest object and JavaScript is written to parse the received data and dynamically change the website. XMLHttpRequest object was implemented as ActiveX object in IE and later on become a native JavaScript object in most browsers, including FireFox, Safari and Chrome.

A typical HTTP request using XMLHttpRequest looks like below,

http://127.0.0.1:8080/update.xml
GET /update.xml HTTP/1.1
Host: 127.0.0.1:8080
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.16) Gecko/20110323 Ubuntu/9.10 (karmic) Firefox/3.6.16
Accept: application/xml, text/xml, */*; q=0.01
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
X-Requested-With: XMLHttpRequest
Referer: http://127.0.0.1:8080/update.html

And once the server returned the requested XML file with data, the JavaScript in the web page can parse it and update the web page. The data can be in other formats as well, for example, JSON.

The request and parsing can be simplified by using some JavaScript, for example, the popular JQuery library.

A typical JavaScript function using JQuery JavaScript library is as below,

function receiveServerData() {
    $.ajax({
        type: "GET",
        url: "update.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('s').each(function() {
            //further parsing the xml 
            }
       }
   });
}

This simple script will request for an xml file and then parse the xml file if it returns successfully.