Asynchronous JavaScript + XML

Ajax is a term coined by Jesse James Garrett and that became popular since the publication of the article Ajax: A New Approach to Web applications, published on 18 February 2005, is a shortcut for: « Asynchronous JavaScript + XML ».

Since the publication of this article, the use of techniques that make up Ajax and the XMLHttpRequest object in particular has become widespread among webmasters. W3C moreover defined a formal specification: XMLHttpRequest. Another term that also became popular is Web 2.0, which designate collaborative sites or use of programming techniques to provide user interaction. But the basis of Web 2.0 is also Ajax.

Ajax is a combination of standard technologies:

• Presentation based on HTML or XHTML for the code of the pages and CSS for the style.
• Dynamic display using DOM (Document Object Model) to access elements of the page.
• Exchange with the server and manipulation of data in XML or JSON or plain text.
• On the client side, the XMLHttpRequest object for asynchronous request to the server.
• JavaScript to bind together anything.

The XMLHttpRequest object can exchange data in XML or text files, and through the GET or POST methods it can retrieve data or send data to a script on the server. That synchronously or asynchronously, according to the schema below:

Synchronous via asynchronous

The principle of the asynchronous mode is that the server sends the data as a measure of queries that the browser and takes them into account when they arrive without interrupting other tasks and therefore without suspending the display of the page.
The immediate effect is that the page can be modified after being partially displayed.

The asynchronous operation can be surprising to the programmer. Commands do not run in sequence but depend upon server responses, the result of instructions in a script can occur after the results of instructions that follow them...

Evolution of Ajax

Should the word Ajax be restricted solely to the definition that was given by JJ Garrett in 2005 or can we use the term about new technologies intended to create dynamic web pages?

In fact, from the outset, the definition was too restrictive because XML is far from being the single or preferential format to exchange data with a server.
Howewer there are quantities of technologies to achieve modern web applications, including Flash, Gear, Maps, which must be distinguished from Ajax.

Therefore it is better to be clear to involve only the word to use XMLHttpRequest in combination with the technologies for dynamic pages listed above, and with any data format for the exchange with the server.
We can consider that Ajax in the future will designate any mode of asynchronous communication and updating dynamic pages, even if it is based on a different object replacing XHR, but this object must work on all browsers because Ajax is founded in principle on standards.

How to use Ajax?

Ajax is used by defining JavaScript functions to use XHR methods and attributes (see tutorial below) or simply by installing a framework that defines the most common tasks.
These frameworks include a JavaScript code that runs client side and possibly also code in another programming language that runs server side.

Dynamic pages

The combination of HTML and JavaScript to create dynamic pages, whose appearance and content can change in interaction with the user. For example clicking on a button could display hidden data or change their order.
With asynchronous communication only the part of the page that is modified is redisplayed.

Web applications

The role of Ajax in applications running on the Web is in the interaction with the server to read the files and saving information that is almost as easily as on the hard disk of the desktop.
The normal behavior of Internet that involves sending pages to the browser is completely changed by the use of Ajax.

The XMLHttpRequest object

The role of the 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 (and receive the result). The HEAD method gives information on the nature of a file on the server.
The XHR object can receive text files, assigned to the responseText attribute, or XML assigned to responseXML . In the second case we can access the content directly with DOM methods.
There is no responseHTML attribute (the Anaa framework can emulate it).

The XMLHttpRequest 2 specification takes into account Ajax requests between different domains.

The exchange of data between the client and the server is done as explained in the Ajax Tutorial, that provides examples.

Frameworks

In JavaScript on the client side they allow to read documents on the server, and to send data to the server with a part in a language supported by the server such as PHP or Java.
Frameworks may provide functions such as "drag and drop", ie moving an element on a web page, and special effects such as drop down menus for examples.

jQuery is a pure JavaScript framework, it adds widgets and special effects. It is distributed in separate JavaScript files which preserves the lightness of the page.

Rico proposes to create rich Internet applications with drag and drop and a library of functions such as kinematic expansion, fading. The LiveGrid function connects an HTML table to a data stream from the server.

Mootools is another popular Ajax framework.

A.E.P. (Extensible Page Ajax) is for non-programmers, it allows with cut and paste to transform a Web page document expandable by the use of Ajax functions.

Google Web Toolkit (Java), Microsoft Ajax Library (. NET languages supported) are server-side frameworks.
They include a part written in a language working on the server.

For an extended List of Ajax frameworks see OSAF.

See also

• XMLHttpRequest vs. WebSocket.
  How to use the XHR object and comparison with WebSocket. We switche from asynchronous to bidirectional exchanges.
• HTML 5 , XUL or XAML. Which plateform for Web applications?

Tweet