Introducing Ajax

Since the publication of the article in 2005, when the word Ajax, acronym of "Asynchronous JavaScript And XML" was popularized by Jesse James Garrett, the use of the techniques which are part of Ajax and in particular the XMLHttpRequest are becoming essential to webmasters. W3C has defined an official XMLHttpRequest specification.

Another term became also popular, it is Web 2.0, which designates collaborative websites or sites using programming techniques for building elaborate sites. But the base of Web 2.0 is also Ajax.

How it works

The XHR object works in asynchronous mode, which makes an advantage for the design: no waiting when date are loaded from the server, the request is launched and when data are provided, the page is updated, but only the parts of the page that change are updated.

Synchronous via asynchronous

The principle of the asynchronous mode is that the server progressively sends the data at requests and that the browser takes them into account when they are delivered, without stopping other tasks and thus without to block the display of the page. The immediate effect is that the page can be modified partially after being displayed.
The asynchronous mode can be surprising for programmer. Orders are not executed any more in sequence but according to answers of the server, and the result of instructions which launch a request can thus occur after the results of instructions which follow them!

Uses of Ajax

Dynamic pages

The association of HTML and Javascript makes it possible to create dynamic pages, whose appearance can change in interaction with the user, by a click on a button for example, to display hidden data or to change the order of elements for example. There is less interest in synchronous communication mode since a new page has to be displayed entirely with each modification.
For example, when one clicks on the label "Display the table", a table can appears in the place of the text.

Display the table

Web applications

The part of Ajax in applications running on the Web is in the interaction with the server for reading files and storing data, which is done almost as easily as on a hard disk on the desktop. The usual Internet operation which consists for the server to send pages to the browser, is now completely modified by the use of Ajax who allows browsers to get data by the way of the XMLHttpRequest object.

The XMLHttpRequest object

The role of the XHR object is to send requests to the server with the send function. The HTTP methods GET and POST as well as others, determine the nature of the request: GET to receive data, POST to send some. The HEAD method makes it possible to get information about a file on the server.
The XHR object allows to receive files in plain-text format, assigned to the responseText attribute, or in XML, assigned to responseXML. In the second case, it is a true XML document which is assigned, one can thus access the contents by DOM's methods.
There is not responseHTML attribute, (a project for future versions of XHR at W3C is to handle HTML in responseXML), but one can simulate it as explained in this article, or by using the Anaa framework.

Simple frameworks

The Ajax Extensible Page script (used in the example above to display a table) is aimed at non-programmers, it allows the webmaster by just copy and paste actions to transform a Web page into extensible document thanks to a single Ajax function.

This AEP function is also included into the Anaa framework, as optional extension, that is a complete framework, intended for programmers. GET and POST functions are recognized for any file formats, including HTML by the way of the principle described in the article previously evoked.

Extended frameworks

Client-side frameworks

Written in Javascript, they allow only to read documents, in plain-text or XML formats. To send data to the server, some additional scripts are needed, in a language supported by the server, such as PHP or Java.
Elaborated frameworks support "drag and drop" functions, in other words displacement of elements on a Web page, and special effects such as popup menus for example.

Script Aculo US is based on Prototype, a purely JavaScript framework, and it adds widgets and special effects to Web pages. It is released as a set of optional separated JavaScripts files (effect.js, slider.js, dragdrop.js) for preserving the lightness of the page.
The functions are used inside CDATA tags or in JavaScript events (onclick, etc).

Rico proposes to create rich Internet applications, with drag and drop and a library of cinematic functions as scaling and smooth sliding transitions. He tries to approach Flex and Laszlo. The LiveGrid function connects a HTML table to a flow of data from the server.

Server-side frameworks

They comprise a JavaScript part and a second part written in a server-upported language.
Script running on the server must process data sent, and possibly store them into a file. Data are sent by HTTP POST methods in the format attribut=value, as explained in the tutorial given in references.
As example, let us quote Xajax (PHP), Google Web Toolkit (Java), Microsoft Ajax Library (.NET and supported languages).

Conclusion

Thanks to the variety of frameworks with variable complexity, any webmaster, programmer or not, can incorporate Ajax in his Web pages, make them dynamic and make them react instantaneously to actions from users as desktop applications do it.

Articles

Tutorials and references

(c) 2007 Denis Sureau. Scriptol.com