AJAX (Asynchronous Javascript And XML)

Auteur: Mohamed CHINY Durée necessaire pour le cours de AJAX (Asynchronous Javascript And XML) Niveau recommandé pour le cours de AJAX (Asynchronous Javascript And XML) Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz non disponibles pour ce cours

Page 2: Fonctionnement d'AJAX

Toutes les pages

Requêtes synchrones et asynchrones

Requête synchrone

Quand vous cliquez sur un lien hypertexte au sein d'une page Web où que vous postez un formulaire en cliquant sur le bouton d'envoie de celui-ci, alors vous envoyez par défaut une requête synchrone. En attendant que le serveur réponde à votre requête en vous redirigeant vers la page souhaitée, vous ne pouvez rien faire sur le navigateur. En effet, celui ci est figé tant que la réponse ne lui parvient pas. Ce figement est d'autant plus visible si votre connexion internet est lente et la réponse met alors du temps à atteindre le navigateur.

On peut alors dire qu'en mode synchrone, seule une requête peut être passée au serveur à la fois. Si vous voulez en envoyez une autre, alors il faut attendre que la réponse du serveur parvienne entièrement au navigateur.

Requête asynchrone

Dans le mode asynchrone, vous pouvez envoyer une requête au serveur, et même si la réponse n'a pas encore atteint le navigateur vous pouvez tout de même envoyer d'autres requêtes. Le serveur peut donc traiter plusieurs requêtes provenant d'une même session même si leurs réponses respectives n'ont pas atteint le navigateur.

AJAX peut naturellement envoyer des requêtes dans le mode asynchrone, d'où le nom Asynchronous Javascript And XML. Par conséquent, en utilisant AJAX on peut envoyer plusieurs requêtes simultanées au serveur qui nous renvoie les réponses indépendamment les unes des autres même si, à la fin, elles vont toutes être intégrées dans la même page.
Notez que dans le mode asynchrone, le fait d'envoyer la requête 1 puis la requête 2 ne veut pas forcément dire que l'on va recevoir la réponse 1 puis la réponse 2 (respectives aux deux requêtes).

Séquencement d'échange entre le client et le serveur

Le schéma suivant résume le séquencement d'échange entre le client et le serveur en AJAX:

Echange entre le client et le serveur en AJAX

Déroulement d'un dialogue en AJAX entre le client et le serveur

  1. Quand le client déclenche un événement, celui-ci et capturé par le script Javascript/AJAX.
  2. A l'aide des méthodes d'AJAX, la requête est transférée au serveur.
  3. Après traitement de la requête, le serveur renvoie la réponse (sous forme de texte, XML ou HTML) qui sera récupérée par AJAX.
  4. AJAX fait appel aux méthodes Javascript (en particulier les méthodes qui implémentent le DOM) afin de traiter la réponse reçue.
  5. Le script Javascript place alors la réponse à l'endroit prévu dans le document afin qu'elle soit intégrée au contenu et devenir ainsi visible.

Des styles CSS déjà déclarés peuvent être appliqués au contenu reçu afin de mieux le présenter.

Ces opérations se succèdent sans recharger entièrement la page Web. Seul l'endroit prévu à accueillir la réponse du serveur sera rafraîchi.

A quoi ressemble du contenu chargé en AJAX?

L'exemple ci-dessous illustre un cas classique de transaction AJAX. Il s'agit d'un bouton sur lequel il faut cliquer pour voir apparaître un message. Cliquez pour voir:



Le message qui apparaît en dessous du bouton n'a pas été chargé avec la page, mais individuellement suite au clique sur le bouton. La GIF animée est là pour indiquer au visiteur que les données sont entrain d'être chargées.

J'ai fait en sorte de retarder l'apparition du message afin d'afficher la GIF annimée au moins une seconde pour mieux comprendre à quoi ressemble un échange en AJAX.