AJAX at a Glance

Friday, 09 September 2005

A refrain often heard about web applications is the 'speed' of response. Even with a broad band connection, the web applications do not feel like desktop applications. Then, how come gmail is so snappy and fun to use, compared to the rest of webmail providers and even desktop equivalents? The answer is AJAX.

AJAX stands for Asynchronous Java Script and XML. Its a collection of technologies including Javascript, Dynamic HTML and XMLHTTPRequest. The main idea behind using AJAX is that, web pages are clumsy when it comes to data intensive user interaction. Using a clever combination of Javascript and a Microsoft pioneered technology called XMLHTTPRequest, the web developer can fetch the data with outthe user's direct input and change the behaviour of the User interface dynamically.

For instance, when you are signing up for a new online service, you might be asked for your country's name. Once you select the countries name, typically, the browser submits (asks you to click a button somewhere) this information to server, the server sends back a list of states/provinces in your country. In the mean time, you are left twiddling your thumbs. In contrast, a AJAX enabled webapp, will send out the country code silently to the Server while you bat your eyelid and fills up the 'provinces' list with relevent entries. All this happens without reloading the page.

Where is the XML? When the browser requests for a list of states, the server will send back the data in XML format. The client will then parse that data to whatever form necessary and render it as HTML. However, XML is not the be-all and end-all of data transfer formats in an AJAX implementation. XML suffers from poor human readability and verbosity. An excellent alternate is JSON - JavaScript Object Notation. JSON is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. Since it is a subset of javascript programming language, it is quite native to Javascript(read speed). If you are a Python programmer (like me), you will appreciate the fact that a JSON object looks a lot like a Python Dictionary. JSON and AJAX are a potent combination that can make web application development a joy, as I found out in my current project (more about that in later posts).

How does the magic happen with the Interface? If you have used an AJAX application, you will notice that the page you are seeing changes with your input. Applying good AJAX practices, a chore like Registration page can be made much more bearable. We all love one page sign-ups right? This is possible by manipulating the DOM(Document Object Model) of the webpage. A well formed html document can be traversed much like a tree using Javascript. And nodes/elements of this tree can be replaced, new nodes added/deleted using Javascript. Even the Styling attributes of elements can be modified using Javascript. Today, with AJAX developers can do 'Flashy' stuff, without having to learn new tools and more importantly, without sacrificing accessibility and portability.

So, why is AJAX so exciting? AJAX has managed to excite the web developers of all hues (programmers...designers...artists...usability experts...) by being technology neutral (almost), familiar(JS,CSS,DHTML) and useful(it does make the programmer's life a lot easier). Developing AJAX is NOT easy. It requires the developer to have a good comamnd over a wide set of skillsets and forces him to think in terms of genuine ease of use instead of the old throw-an-ui-at-the-user mindset. At the same it offers the freedom from heavy-duty frameworks like Java and Flash.

The fact that AJAX manages to run on most modern browsers with no additional plugins, makes a compelling case for wider adoption by the developers. We can expect to see an explosion of AJAX applications in near future.

The tipping point for this almost decade old technology came with a clever and catchy name given by Jesse James Garrett in this article.

Some of the popular web applications that use AJAX are:

See Ajaxian, Ajax Matters,Ajax Patterns for more.