Pourquoi utiliser AJAX avec JavaScript sur une page HTML5 - Les nuls

Beaucoup d'utilisateurs de JavaScript et de développeurs web ont entendu parler d'AJAX, supposant que c'était un langage spécial, et ne sont jamais allés plus loin. AJAX n'est pas une nouvelle langue; c'est une réutilisation de la technologie existante pour créer une nouvelle façon de gérer les mises à jour de documents. Tout ce que vous avez à faire est d'appliquer les technologies derrière AJAX d'une nouvelle manière pour obtenir des avantages majeurs dans la présentation de contenu en ligne.

Les avantages de AJAX

AJAX permet de créer des applications dynamiques qui se chargent et s'exécutent plus rapidement et utilisent également moins de ressources réseau et serveur. L'objectif d'AJAX est de permettre des modifications à une page sans avoir à recharger toute la page.

L'utilisation d'AJAX permet de créer des applications assez rapides sans charger le serveur de requêtes volumineuses. Tout ce que le serveur doit faire est d'envoyer un petit morceau de données à l'appelant lorsque cela lui est demandé. Ce petit morceau de données se déplace plus rapidement sur le réseau, ce qui signifie que la latence de demande est également plus faible.

L'une des principales raisons d'utiliser AJAX est qu'il est basé sur des normes (créé et administré par un groupe de normalisation). Il n'y a pas une grande entreprise qui contrôle AJAX. Parce qu'il est basé sur des normes, AJAX fonctionne sur toute nouvelle combinaison de navigateur et de plate-forme qui prend en charge les normes qu'il utilise. AJAX s'appuie sur ces normes:

• JavaScript: Vous utilisez JavaScript pour écrire le code requis pour gérer les événements du navigateur, envoyer des demandes au serveur et mettre à jour les zones de la page si nécessaire.

• Document Object Model (DOM): JavaScript utilise le DOM pour accéder à des emplacements spécifiques sur la page.

• Feuilles de style en cascade (CSS): L'utilisation de CSS permet de créer des effets spéciaux lors de la mise à jour des données. De plus, CSS fait correspondre les nouvelles données au contenu de la page existante.

• eXtensible Markup Language (XML): Toute mise à jour nécessitera un type de données. XML est un choix parfait car il fonctionne n'importe où.

• Objet XMLHttpRequest : La communication avec le serveur nécessite une connexion, et l'objet XMLHttpRequest crée cette connexion. AJAX effectue ses tâches de manière asynchrone.

Comment fonctionne AJAX

AJAX n'effectue pas de magie. Il n'y a rien dans les coulisses qui n'a pas de sens une fois que vous le comprenez. AJAX effectue la tâche sur un fil de réseau plutôt que localement dans la même page ou une page externe dans le même dossier. Voici la séquence des événements qui se produisent lors de l'utilisation d'AJAX.

1. Un événement se produit sur le navigateur. (La nature de l'événement n'est pas pertinente, mais implique généralement une demande de données de quelque sorte.

2. JavaScript crée un nouvel objet XMLHttpRequest. Dans ce cas, l'objet sera configuré pour effectuer son travail de manière asynchrone à l'aide d'une fonction de rappel.

3. JavaScript envoie la requête au serveur pour traitement. À ce stade, la page continue à effectuer des tâches comme elle le fait normalement en attendant une réponse.

4. Le serveur reçoit l'objet XMLHttpRequest que JavaScript a envoyé et le traite.

5. Le serveur crée une réponse et la renvoie au navigateur.

6. La fonction de rappel du navigateur fournie avec la requête d'origine reçoit la réponse du serveur.

7. La fonction de rappel effectue tout post-traitement requis de la réponse.

8. Une mise à jour de l'écran d'information se produit et l'utilisateur voit le résultat.