Créer des requêtes AJAX avec XMLHttpRequest

Introduction

Dans ce laboratoire, les participants exploreront le monde puissant d'AJAX (Asynchronous JavaScript and XML) et apprendront à créer des applications web dynamiques à l'aide de XMLHttpRequest. Le tutoriel complet couvre les concepts fondamentaux de la communication web asynchrone, guidant les apprenants dans le processus d'envoi et de réception de données à partir de serveurs sans recharger la page.

Les participants acquerront des compétences pratiques dans la création d'objets XMLHttpRequest, la configuration des méthodes de requête HTTP, la gestion des états de réponse du serveur et la mise en œuvre des techniques de récupération de données AJAX de base. En comprenant ces principes clés, les développeurs seront en mesure de construire des expériences web plus réactives et interactives qui améliorent l'engagement des utilisateurs et les performances de l'application.

Comprendre AJAX et les requêtes asynchrones

Dans cette étape, vous allez découvrir AJAX (Asynchronous JavaScript and XML) et la manière dont il révolutionne la communication web. AJAX permet aux pages web de mettre à jour le contenu dynamiquement sans recharger toute la page, créant une expérience utilisateur plus fluide et plus réactive.

Qu'est-ce qu'AJAX?

AJAX est une technique de développement web qui permet aux applications web d'envoyer et de recevoir des données d'un serveur de manière asynchrone (en arrière-plan) sans interférer avec l'affichage et le comportement de la page existante. Cela signifie que vous pouvez mettre à jour des parties d'une page web sans rafraîchir toute la page.

Caractéristiques clés des requêtes asynchrones

Non-Bloquante: Contrairement aux requêtes synchrones traditionnelles, AJAX permet au navigateur de continuer à exécuter d'autres tâches tout en attendant la réponse du serveur.
Communication en arrière-plan: Les données peuvent être échangées avec le serveur sans interrompre l'interaction actuelle de l'utilisateur.
Mises à jour partielles de la page: Seules des parties spécifiques d'une page web peuvent être mises à jour, améliorant les performances et l'expérience utilisateur.

Démonstration du concept simple d'AJAX

Créons un fichier HTML simple pour illustrer le concept de requêtes asynchrones. Nous utiliserons l'IDE Web pour créer cet exemple.

Ouvrez l'IDE Web et créez un nouveau fichier ~/projet/ajax-demo.html :

<!doctype html>
<html>
  <head>
    <title>Démonstration AJAX</title>
  </head>
  <body>
    <h1>Exemple AJAX</h1>
    <button id="loadData">Charger les données</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          console.log("Bouton cliqué : Initialisation de la requête AJAX");
          // La requête asynchrone sera implémentée dans les étapes suivantes
        });
    </script>
  </body>
</html>

Cas d'utilisation réels d'AJAX

Suggestions de recherche autocomplete
Mises à jour de contenu en direct
Envoi de formulaires sans rafraîchissement de page
Interrogation pour de nouvelles notifications
Récupération de données à partir d'APIs

Pourquoi les requêtes asynchrones comptent

Les requêtes asynchrones résolvent plusieurs défis de développement web :

Amélioration de l'expérience utilisateur
Réduction de la charge serveur
Applications web plus rapides et plus réactives
Échange de données plus efficace

Créer un objet XMLHttpRequest

Dans cette étape, vous allez apprendre à créer un objet XMLHttpRequest, qui est le mécanisme central pour effectuer des requêtes asynchrones en JavaScript. Nous allons construire sur le fichier HTML de l'étape précédente et ajouter la fonctionnalité XMLHttpRequest.

Ouvrez le fichier ~/projet/ajax-demo.html dans l'IDE Web et mettez à jour la section script pour créer un objet XMLHttpRequest :

<!doctype html>
<html>
  <head>
    <title>Démonstration XMLHttpRequest</title>
  </head>
  <body>
    <h1>Exemple de requête AJAX</h1>
    <button id="loadData">Charger les données</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          // Créer un objet XMLHttpRequest
          var xhr = new XMLHttpRequest();

          // Journaliser la création de l'objet XMLHttpRequest
          console.log("Objet XMLHttpRequest créé :", xhr);
        });
    </script>
  </body>
</html>

Comprendre l'objet XMLHttpRequest

L'objet XMLHttpRequest (XHR) est une API intégrée au navigateur qui vous permet de :

Créer des requêtes HTTP
Envoyer des données à un serveur
Recevoir des données d'un serveur
Mettre à jour des parties d'une page web sans recharger

Méthodes clés de XMLHttpRequest

open() : Initialise une nouvelle requête
send() : Envoie la requête au serveur
onreadystatechange : Suive l'état de la requête

Compatibilité des navigateurs

XMLHttpRequest est pris en charge par tous les navigateurs modernes, ce qui en fait un choix fiable pour les communications AJAX. Le développement web moderne utilise également l'API Fetch, mais XMLHttpRequest reste largement utilisé.

Exemple de sortie

Lorsque vous cliquez sur le bouton "Charger les données", vous verrez un message dans la console démontrant la création de l'objet XMLHttpRequest :

Objet XMLHttpRequest créé : XMLHttpRequest {...}

Configurer les méthodes de requête HTTP

Dans cette étape, vous allez apprendre à configurer les méthodes de requête HTTP à l'aide de XMLHttpRequest. Nous allons mettre à jour le fichier ajax-demo.html pour démontrer comment configurer différents types de requêtes HTTP.

Ouvrez le fichier ~/projet/ajax-demo.html dans l'IDE Web et modifiez la section script :

<!doctype html>
<html>
  <head>
    <title>Méthodes de requête HTTP</title>
  </head>
  <body>
    <h1>Méthodes de requête AJAX</h1>
    <button id="getButton">Requête GET</button>
    <button id="postButton">Requête POST</button>
    <div id="result"></div>

    <script>
      // Configuration de la requête GET
      document
        .getElementById("getButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // Configurer la requête GET
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

          // Définir les en-têtes de la requête
          xhr.setRequestHeader("Content-Type", "application/json");

          // Journaliser les détails de la requête
          console.log("Requête GET configurée");

          // Envoyer la requête
          xhr.send();
        });

      // Configuration de la requête POST
      document
        .getElementById("postButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // Configurer la requête POST
          xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);

          // Définir les en-têtes de la requête
          xhr.setRequestHeader("Content-Type", "application/json");

          // Préparer les données à envoyer
          var data = JSON.stringify({
            title: "foo",
            body: "bar",
            userId: 1
          });

          // Journaliser les détails de la requête
          console.log("Requête POST configurée");

          // Envoyer la requête avec les données
          xhr.send(data);
        });
    </script>
  </body>
</html>

Méthodes de requête HTTP

Les méthodes de requête HTTP les plus courantes sont :

GET : Récupérer des données d'un serveur
POST : Soumettre des données à traiter par le serveur
PUT : Mettre à jour des données existantes
DELETE : Supprimer des données

Méthodes clés pour configurer les requêtes

open(method, url, async) :
- method : Méthode HTTP (GET, POST, etc.)
- url : Point d'accès du serveur
- async : Booléen pour une requête asynchrone (généralement true)
setRequestHeader() : Définir les en-têtes de la requête
send() : Envoyer la requête (avec des données optionnelles)

Exemple de sortie

Lorsque vous cliquez sur les boutons, vous verrez des messages dans la console :

Requête GET configurée
Requête POST configurée

Gérer les états de réponse du serveur

Dans cette étape, vous allez apprendre à gérer les différents états d'une XMLHttpRequest et à traiter les réponses du serveur. Nous allons mettre à jour le fichier ajax-demo.html pour démontrer la gestion des réponses.

Ouvrez le fichier ~/projet/ajax-demo.html dans l'IDE Web et modifiez la section script :

<!doctype html>
<html>
  <head>
    <title>Gestion des réponses du serveur</title>
  </head>
  <body>
    <h1>États de réponse AJAX</h1>
    <button id="fetchData">Récupérer les données</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("fetchData")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();
          var resultDiv = document.getElementById("result");

          // Suivre les états de la requête
          xhr.onreadystatechange = function () {
            // Journaliser l'état actuel
            console.log("État prêt :", xhr.readyState);

            // Vérifier si la requête est terminée et réussie
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                // Réponse réussie
                try {
                  var data = JSON.parse(xhr.responseText);
                  resultDiv.innerHTML = `
                                <h3>Données reçues :</h3>
                                <pre>${JSON.stringify(data, null, 2)}</pre>
                            `;
                  console.log("Requête réussie");
                } catch (error) {
                  resultDiv.innerHTML = "Erreur lors du décodage de la réponse";
                  console.error("Erreur de décodage :", error);
                }
              } else {
                // Gestion des erreurs
                resultDiv.innerHTML = `Erreur : ${xhr.status}`;
                console.error("Échec de la requête", xhr.status);
              }
            }
          };

          // Configurer et envoyer la requête
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
          xhr.send();
        });
    </script>
  </body>
</html>

États de prêt de XMLHttpRequest

XMLHttpRequest a 5 états de prêt :

0 : NON_ENVOYÉ (requête non initialisée)
1 : OUVERT (connexion établie)
2 : EN_TÊTES_REÇUES (requête reçue)
3 : CHARGEMENT (traitement de la requête)
4 : TERMINÉ (requête terminée)

Concepts clés de la gestion des réponses

Utiliser onreadystatechange pour suivre l'avancée de la requête
Vérifier readyState === 4 pour les requêtes terminées
Vérifier status === 200 pour les réponses réussies
Utiliser responseText ou responseXML pour accéder aux données
Mettre en œuvre la gestion des erreurs pour différents codes d'état

Exemple de sortie

Lorsque vous cliquez sur "Récupérer les données", vous verrez des messages dans la console :

État prêt : 1
État prêt : 2
État prêt : 3
État prêt : 4
Requête réussie

Implémenter la récupération de données AJAX de base

Dans cette étape, vous allez apprendre à récupérer et à afficher des données à partir d'une API à l'aide d'AJAX. Nous allons créer une application de gestion d'utilisateurs simple qui récupère et affiche des informations sur les utilisateurs.

Ouvrez le fichier ~/projet/ajax-demo.html dans l'IDE Web et remplacez son contenu par le code suivant :

<!doctype html>
<html>
  <head>
    <title>Application de gestion d'utilisateurs</title>
    <style>
      #userList {
        margin-top: 20px;
        border: 1px solid #ddd;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Gestion d'utilisateurs</h1>
    <button id="fetchUsers">Récupérer les utilisateurs</button>
    <div id="userList"></div>

    <script>
      document
        .getElementById("fetchUsers")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();
          var userListDiv = document.getElementById("userList");

          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                try {
                  var users = JSON.parse(xhr.responseText);

                  // Effacer le contenu précédent
                  userListDiv.innerHTML = "<h2>Liste d'utilisateurs</h2>";

                  // Créer la liste d'utilisateurs
                  users.forEach(function (user) {
                    var userDiv = document.createElement("div");
                    userDiv.innerHTML = `
                                    <p>
                                        <strong>Nom :</strong> ${user.name}<br>
                                        <strong>Email :</strong> ${user.email}<br>
                                        <strong>Société :</strong> ${user.company.name}
                                    </p>
                                `;
                    userListDiv.appendChild(userDiv);
                  });
                } catch (error) {
                  userListDiv.innerHTML =
                    "Erreur lors du décodage des données utilisateur";
                }
              } else {
                userListDiv.innerHTML = `Erreur lors de la récupération des utilisateurs : ${xhr.status}`;
              }
            }
          };

          // Récupérer les utilisateurs à partir de l'API JSONPlaceholder
          xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
          xhr.send();
        });
    </script>
  </body>
</html>

Concepts clés de la récupération de données

Utiliser une API publique (JSONPlaceholder) pour la démonstration
Récupérer plusieurs enregistrements d'utilisateurs
Analyser la réponse JSON
Créer dynamiquement des éléments HTML
Gérer les erreurs potentielles

Exemple de sortie

Lorsque vous cliquez sur "Récupérer les utilisateurs", vous verrez une liste d'utilisateurs avec leurs détails :

Liste d'utilisateurs
Nom : Leanne Graham
Email : Sincere@april.biz
Société : Romaguera-Crona

Nom : Ervin Howell
Email : Shanna@melissa.tv
Société : Deckow-Crist

... (plus d'utilisateurs)

Meilleures pratiques

Toujours valider et nettoyer les données
Mettre en œuvre la gestion des erreurs
Utiliser try-catch pour l'analyse JSON
Créer une interface utilisateur dynamique et réactive

Résumé

Dans ce laboratoire, les participants explorent les bases d'AJAX et de la communication web asynchrone, apprenant à créer des expériences web dynamiques sans recharger complètement la page. Le laboratoire présente des concepts clés tels que les requêtes non bloquantes, l'échange de données en arrière-plan et les mises à jour partielles de la page, démontrant comment XMLHttpRequest permet une interaction transparente entre les clients web et les serveurs.

En parcourant des exemples pratiques et en comprenant les principes fondamentaux d'AJAX, les apprenants acquièrent des connaissances sur la mise en œuvre d'applications web réactives capables de récupérer et d'afficher dynamiquement des données. Le laboratoire couvre les techniques essentielles pour créer des objets XMLHttpRequest, configurer les méthodes HTTP, gérer les réponses du serveur et récupérer des données de manière asynchrone, fournissant une base complète pour les pratiques de développement web modernes.