Ajax - Asynchronous JavaScript + XML

Le mot Ajax qui est un raccourci pour « Asynchronous JavaScript + XML » (JavaScript Asynchrone + XML ) a été inventé par Jesse James Garrett et popularisé dans un article paru le 18 février 2005, intitulé Ajax: Une Nouvelle Approche pour les Applications Web, dont la traduction française a été réalisée par Scriptol.fr.

Depuis la parution de cet article, l’emploi des techniques qui forment Ajax et notamment de l’objet XMLHttpRequest s’est généralisé auprès des webmasters. Le W3C a d’ailleurs défini une spécification officielle: XMLHttpRequest. Un autre terme est devenu également populaire, c’est Web 2.0, qui désigne les sites collaboratifs ou qui emploient des techniques de programmation fournir une interaction avec l'utilisateur. Mais la base du Web 2.0, c’est aussi Ajax.

Ajax est une combinaison de technologies logicielles standards:

• La présentation basée sur HTML ou XHTML pour le code des pages et CSS pour le style.
• L'affichage dynamique utilisant le DOM (Document Object Model) pour accéder aux éléments de la page.
• L'échange avec le serveur et la manipulation de données dans le format XML, JSON ou texte simple.
• Du coté client, l'objet XMLHttpRequest pour les requêtes sur le serveur en mode asynchrone.
• Le langage JavaScript pour faire fonctionner l'ensemble.

L'objet XMLHttpRequest peut échanger des données dans des fichiers XML ou texte, et avec les méthodes GET et POST peut récupérer des données, ou en envoyer à un script sur le serveur. Cela en mode synchrone ou asynchrone, selon le schéma de fonctionnement suivant:

Synchrone via asynchrone

Le principe du mode asynchrone est que le serveur envoie les données au fur et a mesure des requêtes et que le navigateur les prend en compte quand elles arrivent sans interrompre les autres tâches et donc sans suspendre l’affichage de la page.
L’effet immédiat est que la page peut être modifiée partiellement après avoir été affichée. L'interaction entre l'utilisateur et la page n'est donc pas suspendue dans l'attente que les données arrivent.
Le fonctionnement asynchrone peut être surprenant pour le programmeur. Les commandes ne s’exécutent plus en séquence mais en fonction des réponses du serveur, le résultat des instructions qui lancent une requête peut donc se produire après les résultats des instructions qui les suivent…

Evolution d'Ajax

Le mot Ajax doit-il être restreint à la seule définition qui en a été donnée par J. J. Garrett en 2005 ou peut-on employer le terme à propos des nouvelles technologies permettant de créer des applications web dynamique?

En fait, dès le départ la définition était trop restrictive car XML est loin d'être le format unique ou préférentiel pour échanger des données avec un serveur. Cependant il existe des quantités de technologies pour réaliser des applications web modernes, dont Flash, Gear, Maps, qui doivent être distinguées d'Ajax.

Il est donc préférable pour être clair d'associer uniquement le mot à l'utilisation de XMLHttpRequest en combinaison avec les technologies de pages dynamiques mentionnée plus haut et avec tout format de données pour l'échange avec le serveur.
On peut envisager qu'Ajax désigne à l'avenir un mode de communication asynchrone et de mise à jour dynamique des pages qui se base sur un objet différent, remplaçant de XHR, mais celui-ci doit fonctionner sur tous navigateurs car par principe Ajax repose sur des standards.

Comment utiliser Ajax?

On utilise Ajax en définissant des fonctions JavaScript pour utiliser les méthodes et attributs de XHR (voir tutoriel plus bas) ou plus simplement en installant un framework qui définit les fonctions les plus courantes.
Les frameworks comprennent un code JavaScript qui s'exécute coté client et éventuellement du code dans un autre langage de programmation qui s'exécute coté serveur.

Les pages dynamiques

L’association de HTML et de JavaScript permet de créer des pages dynamiques, dont l’apparence et le contenu se modifient selon l'interaction avec l’utilisateur.

Par exemple un clic sur un bouton peut afficher des données cachées ou changer leur classement. L’intérêt était moindre en mode de communication synchrone puisque une nouvelle page s’affichait en entier avec chaque modification.
Avec la communication asynchrone, seule la partie de la page qui se modifie est réaffichée.

Les applications Web

Le part d’Ajax dans les applications fonctionnant sur le Web est dans l’interaction avec le serveur pour la lecture des fichiers et la sauvegarde de l’information: elle se réalise presque aussi aisément que sur disque dur d’un poste local.
Le fonctionnement habituel d’Internet qui consiste à envoyer des pages aux navigateurs se trouve totalement modifié par l’usage d’Ajax.

L’objet XMLHttpRequest

Le rôle de l’objet est d’envoyer des requêtes au serveur avec la fonction send. Les méthodes HTTP GET et POST ainsi que d’autres, déterminent la nature de la requête: GET pour recevoir des données, POST pour en envoyer (et recevoir le résultat). La méthode HEAD permet de se renseigner sur la nature d’un fichier sur le serveur.

L’objet XHR permet de recevoir des fichiers au format texte, assignés à l’attribut responseText, ou au format XML, assigné à responseXML. Dans le second cas on peut donc accéder directement au contenu avec les méthodes de DOM.
Il n’existe pas d’attribut responseHTML (le framework Anaa permet de l'émuler).

La spécification XMLHttpRequest 2 prend en compte les requêtes Ajax entre domaines différents.

La lecture et l’envoi de données se font comme expliqué dans le Tutoriel Ajax, qui fournit des exemples.

Frameworks Ajax

En JavaScript sur le coté client ils permettent la lecture de document et l'envoi de données au serveur s'ils comportent une partie en langage de script tel que PHP ou Java.
Les frameworks élaborés apportent des fonctions « drag and drop », autrement dit déplacement d’un élément sur une page web, et des effets spéciaux tels que menus déroulants par exemples.

jQuery est un framework purement JavaScript, il ajoute des widgets (composants graphiques) et effets spéciaux. Il est distribué en fichiers JavaScripts séparés optionnels  ce qui préserve la légèreté de la page.

Rico propose de créer des applications Internet riches, avec le drag and drop et une bibliothèque de fonctions cinématiques d’agrandissement, de fondu enchaîné. La fonction LiveGrid connecte une table HTML à un flux de données du serveur.

Mootools est un autre cadre d’application Ajax populaire.

A.E.P. (Ajax Extensible Page) est destiné aux non programmeurs, il permet avec du copier-coller de transformer une page Web en document extensible par l’emploi de fonctions Ajax.

Google Web Toolkit (Java), Microsoft Ajax Library (.NET et langages supportés) sont des frameworks coté serveur.
Ils comportent une partie écrite dans un langage fonctionnant sur le serveur.

Voir aussi

• XMLHttpRequest vs WebSocket.
  Comment utiliser l'objet XHR et comparaison avec WebSocket. On passe du mode asynchrone au mode bidirectionnel.
• HTML 5 , XUL ou XAML. Quelle interface pour une application Web? Comparaison détaillée et évolutions en cours.