Ajax: The New Hero of Web Developers

About a year back, the name Ajax would have evoked two thoughts. One, it is the name of a great Greek mythological character who fought in the Trojan War. Two, it is the name of a popular European football club.

However, since February 18th 2005, things have changed. After Jesse James Garret of Adaptive Path wrote the classic essay on Ajax, which was loosely based on a number of existing technologies, now there is a gold rush out there. Every web developer is betting on Ajax and is trying to develop products as well as technologies surrounding it.

In fact, the very concept of Web 2.0 is often synonymous with Ajax. It is right to call that Ajax is a visual metaphor of the semi-utopian concept of Web 2.0. However, what exactly is Ajax? We will try two explanations.

The first account starts from what Ajax is trying to achieve. As you all must be aware, one of the biggest issues with current web applications is that it fails to provide a rich multimedia experience to users.

Since Internet applications are hosted in some remote web server, accessing and running these applications depend heavily on bandwidth. Hence, web applications have a lot of limitations when it comes to rich user experiences. Compare this to desktop applications. You can have very rich desktop applications that provide user experience, which web cannot provide. While bandwidth is getting cheaper, thanks to better telecommunication facilities, the gap in terms of user experience provided by the web and desktop application is indeed huge.

There are a number of attempts being made by developers to bridge this gap. Browser vendors have been building features that improve web experiences. Technologies such as DHTML, JavaScript and CSS are all little steps in achieving the goal of improving user experiences.

Web developers are often in a dilemma! The user experience depends fundamentally on two aspects. The speed at which applications run off the net and how desktop-like is the application in terms of rich user experience. To improve one aspect, you are forced to sacrifice the other. A Flash-based web site with audio support will run slower than a simple text-based HTML web site.

Consider the example Google Suggest (http://www.google.com/webhp?complete=1&hl=en). As you type in a search, Google starts throwing up options, that too instantaneously. This makes searching for information far more intuitive and fun (read better user experience).

Typically, when you search for an information or click on a URL, you actually send a query to a remote server to fetch a page. Whatever the information is, web servers need to refresh the whole page. This is indeed a time-consuming affair. An Ajax application essentially cuts this down by introducing an intermediary (an Ajax engine). 

To understand how an Ajax engine works, you need to understand how a classic web application works.

Imagine an application that calculates interest rate of home loan depending on certain parameters, including your track record with the bank, and some details that you have entered using a simple web form.

In a classic web application, once you have reached the web page, the steps are as follows:
1. You login to your account to access the page;
2. The web server acknowledges your status and sends you a form to be filled;
3. You start filling the form;
4. After finishing the form you press a button to send details to the server. Once the details reaches its destination, the server validates the form and returns a page, depending on the successful completion of the form;
5. At each stage the server does some number crunching. It connects to a database server, updates data and retrieves information and returns information; and
6. Each cycle is a send, receive, process, return and read cycle.

Note that time is lost in each step of the cycle in processing a simple form. What Ajax does is to cut down on that time.

Ajax is defined as Asynchronous JavaScript + XML. Garret coined the name to define the world of new applications that will use some or most of the below mentioned technologies:
1. A standards-based approach, which means designing web pages according to XHTML and CSS standards as approved by W3C;
2. Base you web site on the Document Object Model and build interactivity around the Document Object Model. This is what the new age web designers are telling people to practice;
3. Use XSL and XSLT extensively in the web site, to transform XML data to colorful, interactive web pages;
4. Retrieve data using XMLHttpRequest objects, which have been around for a long time. Today, both Mozilla and Apple Safari browsers support XMLHttpRequest; and
5. Use JavaScript to glue everything together.

How does Ajax work?

Ajax breaks a fundamental rule of web page navigation, where for every HTTP request (or for most of the mouse clicks) you refresh a web page. An Ajax engine, which is a program that uses some of the technologies mentioned above, acts as a layer between the web page you see and the application residing in the server. Using XML DOM object, different elements are processed synchronously, reducing the time required for processing down to almost a fraction of a second.

Instead of a user request being made of the server via, for example, a normal HTTP POST or GET request, such as would be made by submitting a form or clicking a hyperlink, an Ajax script makes a request of a server using the JavaScript XMLHTTPRequest object.

Let us take the example of a form validation. You can use JavaScript to interact with XML (or XHTML) elements in the web server and validate form elements on the fly as a user keys in data. This will happen asynchronously, not waiting for the user to click on a button. The user experience becomes better, faster.

Ajax is not a product!

It is easy for some developers to get confused about Ajax. It is not a product and is not even a technology in the correct sense. It is actually a method to solve the problem of making web applications richer without compromising on speed. It is, in certain sense, an architecture that can also be described as a collection of technologies.

There are a number of vendors who are trying to create products based on Ajax technologies or supposed to provide ‘Ajax in a box’. Notable efforts are from Ruby on Rails team, the Turbo Gears and Sajax Toolkit, among others. In the next few months, we will see several projects that will try to bank on the hype surrounding Ajax.

From Ajax to Ajax-like

A careful examination of some of these projects will reveal that the technologies being used are often a little different from the original Ajax definition by Garrett. In the coming days you will see Ajax to mean more ‘Ajax-like’. To achieve the results, you will see a number of new technologies being used. Flickr from Yahoo!, is one example where instead of just JavaScript, JavaScript along with Flash is being used.

The pitfalls of Ajax

There are some issues with Ajax. One of the beauties of the typical HTTP-based navigation system is that you can navigate, i.e. use the web browser’s back, forward and history buttons. Ajax does not support this navigation model. This can be a problem when a regular user uses an Ajax enabled web application. Ajax applications introduce lots of problems for users who assume GET operations don't change state. Not only do state changing links cause problems for robots; users who are accustomed to having links drive navigation can become confused when links are used to drive application state changes.

Ajax is built on JavaScript and is not search engine friendly. Also, you cannot send URLs to friends or contacts of a web page that is Ajax generated. Since Ajax does not use HTTP Request methods, few web applications actually generate pages that have unique URLs.

End Note

There is little doubt that Ajax is a great technology and it makes a lot of sense for anyone with online presence to take advantage of it. However, architecting an Ajax application itself is a challenge. At the same time, developers need to understand that every web site cannot be Ajax enabled, or attempting to Ajax enabling each web page will not make sense. Read the tutorials in the magazine to understand how Ajax works.