What is Ajax?

Ajax is a way of developing Web applications that combines:
•    XHTML and CSS standards based presentation 
•    Interaction with the page through the DOM 
•    Data interchange with XML and XSLT 
•    Asynchronous data retrieval with XMLHttpRequest 
•    JavaScript to tie it all together

In the traditional Web application, the interaction between the customer and the server goes like this: 
1.    Customer accesses Web application 
2.    Server processes request and sends data to the browser while the customer waits 
3.    Customer clicks on a link or interacts with the application 
4.    Server processes request and sends data back to the browser while the customer waits

Why to use Ajax?

Mainly to build a fast, dynamic website, but also to save resources.
For improving sharing of resources, it is better to use the power of all the client computers rather than just an unique server and network. Ajax allows to perform processing on client computer (in JavaScript) with data taken from the server. 
The processing of web page formerly was only server-side, using web services or PHP scripts, before the whole page was sent within the network.
But Ajax can selectively modify a part of a page displayed by the browser, and update it without the need to reload the whole document with all images, menus, etc...
For example, fields of forms, choices of user, may be processed and the result displayed immediately into the same page. 

How does it works?

Ajax uses a programming model with display and events. These events are user actions, they call functions associated to elements of the web page.
Interactivity is achieved with forms and buttons. DOM allows to link elements of the page with actions and also to extract data from XML files provided by the server.
To get data on the server, XMLHttpRequest provides two methods:
- open: create a connection.
- send: send a request to the server.
Data furnished by the server will be found in the attributes of the XMLHttpRequest object:
- responseXml   for an XML file or
- responseText   for a plain text.

Take note that a new XMLHttpRequest object has to be created for each new file to load.

We have to wait for the data to be available to process it, and in this purpose, the state of availability of data is given by the readyState attribute of XMLHttpRequest.

States of readyState follow (only the last one is really useful):
0: not initialized.
1: connection established.
2: request received.
3: answer in process.
4: finished. 
Ajax and DHTML
DHTML has same purpose and is also, as Ajax, a set of standards:
- HTML,
- CSS,
- JavaScript.
DHTML allows to change the display of the page from user commands or from text typed by the user.
Ajax allows also to send requests asynchronously and load data from the server.

How to build an Ajax website?

        You need for some wrapper. A short list of frameworks is provided below.
Your JavaScript program, integrated into a web page, sends request to the server to load files for rebuilding of pages. The received documents are processed with Dom's methods or XML parsers and the data are used to update the pages.

Brief history

         Ajax is only a name given to a set of tools that were previously existing.
The main part is XMLHttpRequest, a server-side object usable in JavaScript , that was implemented into Internet Explorer since the 4.0 version.
It is in Internet Explorer an ActiveX object that was first named XMLHTTP some times, before to be generalized on all browser under the name XMLHttpRequest, when the Ajax technologie becomes commonly used.
The use of XMLHttpRequest in 2005 by Google, in Gmail and GoogleMaps has contributed to the success of this format. But this is the name Ajax itself that made the technology so popular. 

The Purpose of Ajax

  
         The main purpose of Ajax is to provide a simple and standard means for a web page to communicate with the server without a complete page refresh. To illustrate this, consider a simple registration form. You have very likely experienced the frustration of having to try multiple usernames when registering for some new website. You fill out the entire form, hit the submit button, wait for a second or so, and then get the same form right back with a message saying that the username you have chosen is not available. You try another easy-to-remember username and find it is also not available. You repeat this several times until finally you pick some obscure username. This process wouldn't be nearly as bad if you didn't have to wait for the entire page to refresh each time you tried a new username. 
But that's a very simple example. Some web-based applications require constant interaction with a database through a middle-tier. Take, for example, an interface for updating employee records. The traditional way of doing this is illustrated below.
 

Advatages of AJAX?

•  In many cases, the pages on a website consist of much content that is common between them. Using traditional methods, that content would have to be reloaded on every request. However, using Ajax, a web application can request only the content that needs to be updated, thus drastically reducing bandwidth usage. 
•  The use of asynchronous requests allows the client's Web browser UI to be more interactive and to respond quickly to inputs, and sections of pages can also be reloaded individually. Users may perceive the application to be faster or more responsive, even if the application has not changed on the server side 
•  The use of Ajax can reduce connections to the server, since scripts and style sheets  only have to be requested once

Disadvantages of AJAX?

•    Dynamically created pages do not register themselves with the browser's history engine, so clicking the browser's "back" button would not return the user to an earlier state of the Ajax-enabled page, but would instead return them to the last page visited before it. Workarounds include the use of invisible IFramesto trigger changes in the browser's history and changing the anchor portion of the URL (following a #) when AJAX is run and monitoring it for changes. •    Dynamic web page updates also make it difficult for a user to bookmark a particular state of the application. Solutions to this problem exist, many of which use the URL fragment idetifier (the portion of a URL after the '#') to keep track of, and allow users to return to, the application in a given state. •    Because most web crawlers do not execute JavaScript code, web applications should provide an alternative means of accessing the content that would normally be retrieved with Ajax, to allow search engines to index it. •    Any user whose browser does not support Ajax or JavaScript, or simply has JavaScript disabled, will not be able to use its functionality.Similarly, devices such as mobile phones,PDAs and screen readers may not have support for JavaScript or the XMLHttpRequest object. Also, screen readers that are able to use Ajax may still not be able to properly read the dynamically generated content. •    The same origin policy prevents Ajax from being used across domains, although the W3C has a draft that would enable this functionality.