Ajax ou Asynchronous JavaScript And XML.

Est un ensemble de techniques permettant de créer des applications web plus interactives, en actualisant dynamiquement une partie d'une page sans la recharger entièrement.

Ajax est composé d'un Assemblage de produits et techniques qui sont :

- HTML + CSS : pour la structure et la présentation de la page.

- JavaScript : pour les traitements côté client.

- XML (de plus en plus remplacé par JSON) : pour échanger des données entre le client et le serveur.

- XMLHttpRequest (XHR) : pour envoyer et recevoir des données en mode asynchrone (middleware entre le client et le serveur).

Ajax introduit une distribution des traitements entre client et serveur, participant au mouvement du Web 2.0 et favorisant l’émergence d’applications web plus dynamiques.

Ajax modifie l'architecture classique client-serveur :

Certaines logiques de traitement sont déplacées du serveur vers le client.

Le modèle architectural proposé suit les classifications du Gartner Group, où les traitements sont mieux distribués et les interactions plus riches.

L'utilisation d'Ajax permet ainsi d'alléger les serveurs et de rendre les applications plus réactives sans solliciter constamment des rechargements complets de page.

Ajax repose sur une communication asynchrone entre le client et le serveur :

Lorsqu'une interaction utilisateur se produit (clic, saisie, etc.), un objet XMLHttpRequest est créé côté client.

Cet objet envoie une requête HTTP en arrière-plan vers le serveur sans interrompre l'affichage ou l'interaction en cours.

Le serveur traite la demande et renvoie une réponse (souvent au format JSON ou XML).

JavaScript traite ensuite cette réponse pour mettre à jour dynamiquement la page.

Un schéma de principe illustre cette chaîne : Interaction utilisateur → Envoi d'une requête XHR → Réponse du serveur → Mise à jour dynamique de la page.

Requête en mode asynchrone associée à fonction de rappel

En Ajax, les requêtes sont asynchrones, c'est-à-dire qu'elles ne bloquent pas le reste de l'application pendant leur exécution. Lorsqu'une requête est envoyée :

Une fonction de rappel (callback) est définie pour être exécutée dès que la réponse du serveur est disponible.

Cette approche permet d'améliorer la fluidité de l'expérience utilisateur et d'éviter les temps d'attente perceptibles.

Exemple simple :

<script>

  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json', true);
  xhr.onload = function() {
      if (xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText));
      }
  };
  xhr.send();

</script>