Ajax

Asynchronous JavaScript and XML is a technology that changes the way web pages work by achieving asynchronously exchanges with the server. Web applications, running on a browser, are all subject to call XMLHttpRequest to communicate with the server as well as making use of dynamic HTML, technologies that are the core of Ajax.

The name Ajax was coined by Jesse James Garrett in an article published on the Adaptive Path site in 2005. (Ref. and Hist.).

What's Ajax?

The technique became popular as soon as the article was published and that has improved greatly the quality of some websites by allowing smooth and innovative applications.
Ajax is a combination of existing technologies to create dynamic Web sites operating just as desktop software:

More details in the article Introducing Ajax.

History

and since this date, websites became asynchronous...

The asynchronous mode

In a traditional web application, when the user performs an action, the browser is waiting for the results to return the focus to the user. When this action require an exchange with the server and an update of the page, it causes delays and waiting for the user.

The asynchronous mode eliminates this waiting. Server programs are launched without the interaction suspended with the browser and the page is updated when the data are available. The asynchronous feature is obtained through the XMLHttpRequest object.

The XMLHttpRequest object

The creation of the object

The compatibility requires the creation of an Active X object for Internet Explorer and a JavaScript object for other browser. For simplicity, we try creating one and in case of failure, the exception clause of the try condition lead to the exectution of the other cases. 

 try {
   xhr = new ActiveXObject("Microsoft.XMLHTTP");    // for Internet Explorer 
}
catch(e)   // failing
{
  xhr = new XMLHttpRequest();   // for other browsers
}

How the interface works

To run the object, is assigned to an event handler a function to execute when the action is sought, what is made by calling the send() method. 

xhr.onreadystatechange = function() { ... };
xhr.send();

The GET command

It requests to retrieve a file on the server. 

xhr.open('GET',  url);                  
xhr.send(null);

In this case the send() method has no parameters, while the file to read is the url parameter of the open method.

The POST command

It is used to send data to a script on the server. 

xhr.open("POST", url, true);
xhr.send(data);

The script is the url parameter, the true value imposes the asynchronous mode, and data is provided in argument as a string of variables and values. 

var data = "name=value&name=value...";

More details and demonstrations in the article The XMLHttpRequest Object.

Ajax and data formats

The XHR object as defined in the standard specification allow to use two different attributes used when the file is loaded in XML format or not, knowing that a file JSON is seen as a text file. There are responseXML and responseTxt.

To choose between formats, the article Comparison of JSON and XML should help to the decision.

Ajax frameworks

Using a framework avoids to the programmer to rewrite common functions of Web applications, they are all available and tested on major browsers.
An Ajax framework when it is pure JavaScript can run on any system, it runs client side. Or it may also have a part running server side, in different programming languages: PHP, Java, ASP.

Main JavaScript frameworks

Anaa is a lightweight and easy to use library to make Ajax pages without to load a full framework.

Server side frameworks

PHP is commonly running on host sites. The List of Ajax and PHP frameworks provides a comparison of the main PHP frameworks.
The JavaFX framework from Sun allow to build a web applications in Java.
The Google Web Toolkit allows for building Java programs that are compiled in JavaScript to work client side.

Essential documents

Tools

Beyond Ajax

(c) 2007-2010 Scriptol.com - Traduction française: Ajax.