How ajax works ....................

Ajax web application follows the sequential steps below;

Courtesy: http://www.visualbuilder.com/ajax/tutorial/pageorder/8/



1. The JavaScript function handEvent()t will be invoked when having an event occurred on the HTML element.



2. In the handEvent() method,an instance of XMLHttpRequest object is created.



3. The XMLHttpRequest object organizes an xml message within about the status of the HTML page,and then sends it to the web server.



4. After sending the request,the XMLHttpRequest object listens to the message from the web server



5. The XMLHttpRequest object parses the message returned from the web server and updates it into the DOM object





----------------------------------------------------------------------------------


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.

the steps invovled are -------------
Initial request by the browser – the user requests the particular URL.
The complete page is rendered by the server (along with the JavaScript AJAX engine) and sent to the client (HTML, CSS, JavaScript AJAX engine).
All subsequent requests to the server are initiated as function calls to the JavaScript engine.
The JavaScript engine then makes an XmlHttpRequest to the server.
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.
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)