How does AJAX work?
[ November 10, 2005 ]

   1. Introduction
   2. So what is AJAX anyway?
   3. How does AJAX work?
   4. Why use AJAX?
   5. Is AJAX right for my project?
   6. Who's using AJAX?

When an application uses AJAX, a new layer is added to the communication model. In the classic web application, communication between the client (the browser) and the web server were performed directly, using HTTP requests.

Tip: HTTP is the acronym for HyperText Transfer Protocol, the communication protocol used throughout the Internet.

When the visitor requests a page, the server will send the full HTML and CSS code at once. After the visitor fills in a form and submits it, the server processes the information and rebuilds the page. It then sends the full page back to the client. And so on.

When using AJAX, the page is loaded entirely only once, the first time it is requested. Besides the HTML and CSS code that make up the page, some JavaScript files are also downloaded: the AJAX engine. All requests for data to the sever will then be sent as JavaScript calls to this engine. The AJAX engine then requests information from the web server asynchronously. Thus, only small page bits are requested and sent to the browser, as they are needed by the user. The engine then displays the information without reloading the entire page. This leads to a much more responsive interface, because only the necessary information is passed between the client and server, not the whole page. This produces the feeling that information is displayed immediately, which brings web applications closer to their desktop relatives.

To better illustrate the communication between the client (browser) and the remote server, as well as the differences between the classic and the AJAX-powered applications, take a look at the diagram below:

AJAX communication model diagram
Illustration 1: Classic and AJAX communication models


At the heart of the AJAX method of communicating with the server lies the AJAX engine. This is nothing more than some JavaScript code that instantiates and uses the XMLHttpRequest object. This is a JavaScript object that allows sending, receiving and processing HTTP requests to and from the server without refreshing the entire page.

In AJAX-powered applications, HTTP requests for data can be made completely in the background, without the user experiencing any interruptions. This means the user can continue working and using the application, while the necessary page sections are received from the server. The XMLHttpRequest object was implemented as an ActiveX object in Internet Explorer, and has later become a native JavaScript object in most modern browsers (FireFox, Safari).

Although adding an extra layer to any kind of model should add to the response time, this is an exception. Through the use of this new layer – the AJAX engine âÃÆââ‚ÂÂÃââ‚
šÃ‚¬ÃƒÆ’ƒÂ¢Ã¢â‚¬Å¾Ã‚¢ÃƒÆ’ƒâ€šÃÆââ