Your IP: 38.107.191.114
History Ajax
Posted by: Asif D. Khalyani
History of Ajax2005 will definitely be remembered as the rise of AJAX the new development technique that many believe will blur the line between web-based and desktop applications. This mystical acronym, authored by Adaptive Path in mid February, is a label for the rich, highly responsive and interactive interfaces of AJAX-enabled applications. It stands for Asynchronous JavaScript + XML.
Although we are just beginning to realize its full potential, the proven success of famous AJAX-based projects like Google Maps signifies that this is not just another media hype, but rather a promising technology that may change web-applications as we know them.
How does AJAX work?
The core idea behind AJAX is to make the communication with the server asynchronous, so that data is transferred and processed in the background. As a result the user can continue working on the other parts of the page without interruption. In an AJAX-enabled application only the relevant page elements are updated, only when this is necessary.
In contrast, the traditional synchronous (postback-based) communication would require a full page reload every time data has to be transferred to/from the server. This leads to the following negative effects:
* The user interaction with the application is interrupted every time a server call is needed, since a postback has to be made.
* The user has to wait and look at blank screen during each postback.
* The full page is being rendered and transferred to the client after each postback, which is time consuming and traffic intensive.
* Any information entered by the user will be submitted to the server, perhaps prematurely.
The AJAX-enabled applications, on the other hand, rely on a new asynchronous method of communication between the client and the server. It is implemented as a JavaScript engine that is loaded on the client during the initial page load. From there on, this engine serves as a mediator that sends only relevant data to the server as XML and subsequently processes server response to update the relevant page elements.
Let's examine complete lifecycle of an AJAX-enabled web form.
1. Initial request by the browser – the user requests the particular URL.
2. The complete page is rendered by the server (along with the JavaScript AJAX engine) and sent to the client (HTML, CSS, JavaScript AJAX engine).
3. All subsequent requests to the server are initiated as function calls to the JavaScript engine.
4. The JavaScript engine then makes an XmlHttpRequest to the server.
5. The server processes the request and sends a response in XML format to the client (XML document). It contains the data only of the page elements that need to be changed. In most cases this data comprises just a fraction of the total page markup.
6. The AJAX engine processes the server response, updates the relevant page content or performs another operation with the new data received from the server. (HTML + CSS)
