Tuesday, October 17, 2006
How Ajax Works?
“The ability to simplify means to eliminate the unnecessary so that necessary may speak.” – Hans Hofmann
Ajax enabled web applications have different functioning style as compared to the traditional web applications. In the classic web application model, most user actions in the interface generate an HTTP request back to a web server. The server does some processing on it and then sends the information back to the client in HTML format. The approach is great when it comes to the static web pages but unfortunately not so effective in the dynamic web application environment. A user has no option but to sit idle when server is doing some processing at its level. The user interaction comes to a halt each time the application wants something from the server. Is it should be so? Why the user should wait at each step when the application needs something from the server?
An Ajax based application smartly eliminates the unnecessary steps (from the user’s point of view) by introducing an Ajax engine between the user and the web server. Instead of loading a web page directly to the server, the browser sends the request to the Ajax engine which has been written in JavaScript. This engine is responsible for what the user sees through interface and at the same time it communicates with the server on the behalf of user’s request. Ajax engine helps the user interacting with the application asynchronously - independent of communication with the server. In this way, user needs not to stare at the blank screen or an hourglass icon, waiting for the server to do something when server is busy in doing its things.
An Ajax based application takes the following steps to respond a user’s request:
1. A user sends his HTTP request to a web server through a web browser.
2. An Ajax engine welcomes the user’s request. It makes sure that the user has an uninterrupted interaction with the application and at the same time communicates server on user’s behalf with the help of JavaScript.
3. If the user’s request is simple – such as simple data validation, editing in memory or some navigation for which the engine does not need something from the server; the engine responds to the request on his own.
4. If the engine needs something from server to respond – such as data for processing, loading additional interface code or retrieving new data; the engine makes those requests to server independently using XMLHttpRequest object without halting the user’s interaction with the application. If the data has been retrieved, it is retrieved in XML format.
5. The retrieved XML data has been then converted into HTML format with the help of client-side Document Object Model (DOM).
6. Marking up some styles at client-side using XHTML, HTML and CSS.
7. After applying the styles, the final content has been displayed on the client’s browser.

