Ajax - Asynchronous JavaScript + XML

The word Ajax, which is short for "Asynchronous JavaScript + XML," was coined by Jesse James Garrett and popularized in an article published on February 18, 2005, entitled Ajax: A New Approach to Web Applications, the French translation of which was made by .fr.

Since the publication of this article, the use of the techniques that make up Ajax, and in particular the XMLHttpRequest object, has become widespread among webmasters. W3C also defined the official specification: XMLHttpRequest. Another term that has also become popular is Ajax-based Web 2.0, which refers to collaboration sites or sites that use programming techniques to enable user interaction.
Ajax have two main advantages:

Dynamic pages - The combination of HTML and JavaScript allows you to create dynamic pages whose appearance and content change depending on the user experience.
For example, clicking a button can display or reorder hidden data. This was less useful in synchronous communication, as a new page was displayed in its entirety with each change.
With asynchronous communication, only the part of the page that has changed is redisplayed.

Web applications: Ajax's role in web applications is to interact with the server to read files and save information: this is done almost as easily as on a local computer hard drive.
The usual work of the Internet, which consists in sending pages to browsers, is completely changing thanks to the use of Ajax.

Ajax became common with its integration into JavaScript and HTML 5 frameworks, and in fact developer interest shifted to HTML 5 and its new tags and accompanying APIs. Among them, WebSocket seems to be the successor to Ajax, as it is an excellent means of communication between the application and the server or backend.

What is Ajax in practice?

Ajax is a combination of standard software technologies:

• HTML or XHTML for page code and CSS for view definition.
• DOM (Document Object Model) for accessing and dynamically displaying page elements.
• XML, JSON, or plain text to exchange and manage data with the server.
• The XMLHttpRequest object for asynchronous server requests from the browser. It receives or sends data as text or XML using the GET and POST methods.
• The JavaScript language makes everything work.

The XMLHttpRequest object can retrieve data or send it to a server script synchronously or asynchronously according to the following behavior:

A web page includes a DOM, a document structure, and its presentation is determined by the CSS. It communicates with the server through the XHR object. This object exchanges XML or text content. Operations are performed using JavaScript code that accesses page tags via the DOM.

Synchronous via asynchronous

The principle of asynchronous mode is that the server sends data as it receives requests, and the browser processes it as it arrives, without interrupting other tasks and therefore without pausing the page display.
The immediate effect is that the page may be partially modified after display. Therefore, the interaction between the user and the page is not suspended while waiting for the data to be received.
Asynchronous work can surprise a programmer. Commands are no longer executed sequentially, but based on server responses. Therefore, the results of the instructions that trigger the query can be obtained after the results of the instructions that follow them.

How to make Ajax work?

Ajax is used by defining JavaScript functions to use methods and attributes of the XMLHttpRequest object, or simply by installing a framework that identifies the most common functions.
Frameworks include JavaScript code that runs on the client side and possibly code in another programming language that runs on the server side.

The role of the XHR object is to send requests to the server using the send function. The HTTP GET and POST methods, as well as others, determine the nature of the request: GET to receive data, POST to send data (and get the result). The HEAD method allows you to learn about the nature of the file on the server.

An XHR object allows you to receive files in the text format assigned to the responseText attribute or in the XML format assigned to responseXML. In the second case, content can be accessed directly using DOM methods. Missing responseHTML attribute (Anaa framework allows its emulation).

The XMLHttpRequest 2 specification supports cross-domain Ajax requests.

Read and send data according to the instructions in the Ajax Tutorial, which provides examples.

Use of infrastructure

You can use a JavaScript framework that integrates Ajax to make it easier to read data from the server or send data to the script .

• jQuery is a purely JavaScript framework that adds widgets (graphical components) and special effects. It is distributed as separate code files that can be included as needed, keeping the page light.
• Mootools is another popular Ajax framework.

The trend is towards HTML 5 frameworks, which provide many options for building an application and include Ajax. They most often work on mobile and desktop platforms.

Evolution of Ajax

Should the word Ajax be limited to the definition given by J.J. Garrett in 2005, or can the term be used to describe new technologies for creating dynamic web applications?

In fact, the definition was too restrictive from the start because XML is far from the only or preferred format for communicating with a server. However, there are many technologies for building modern web applications that need to be distinguished from Ajax.

Therefore, for clarity, it is preferred to associate this term only with the use of XMLHttpRequest in combination with the dynamic page technologies mentioned above and with any data format for exchange with the server .
We can imagine that Ajax in the future will designate an asynchronous communication mode and dynamic page update based on another object, replacing XHR, but this should work on all browsers, because Ajax is inherently standards-based.

In fact, Ajax has been technologically overtaken by new protocols like WebSocket, which allows bidirectional communication (the server can send data itself), and WebRTC, which goes further, offering real-time communication. But this does not mean that Ajax is outdated in practical terms: very often it is more than enough to improve the usability of an online application that depends on user actions.

A comparison of XMLHttpRequest and WebSocket is given in the article, which explains how to use the XHR object and WebSocket, as well as the advantages of bidirectional mode over simple asynchronous.