Expliquer les différents états de préparation des requêtes en AJAX

AJAX signifie JavaScript et XML asynchrones. Il s'agit d'un ensemble de technologies de développement Web permettant de créer des applications Web interactives. AJAX permet à une page Web de communiquer avec le serveur sans recharger la page.

L'état prêt est une partie importante du traitement des requêtes AJAX. L'état prêt de la demande indique l'état de la demande au serveur et permet au client de suivre la progression de la demande.

Ci-dessous, nous détaillons les différents états de préparation d'AJAX.

Statut non envoyé (0)

Il s'agit du premier état prêt d'AJAX. Il est représenté par l'entier 0. Lors d'une requête AJAX, la requête est dans un état "non envoyé" jusqu'à ce que la méthode send() soit appelée. Cela signifie que la demande n'a pas encore été envoyée au serveur, ce qui indique que la demande doit encore être envoyée. Cet état est également appelé XMLHttpRequest.UNSENT.

Grammaire

http.onreadystatechange = function () {
   if (this.readyState == 0) {
      
      //put your code here
      console.log('This is UNSET state')
   }
}

Statut ouvert (1)

Il s'agit du deuxième état prêt d'AJAX. Représenté par l'entier 1. L'état ouvert d'une requête AJAX correspond au moment où la requête est envoyée au serveur, mais qu'une réponse n'a pas encore été reçue. Il s'agit généralement de la première étape du cycle de requête AJAX et est généralement déclenchée par une action de l'utilisateur telle qu'un clic sur un bouton ou l'envoi d'un formulaire. Cela indique que la demande a été ouverte et que les en-têtes de demande ont été envoyés.

Par exemple, lorsqu'un utilisateur clique sur un bouton pour soumettre un formulaire, une requête AJAX est envoyée au serveur, qui traite ensuite la demande et renvoie une réponse. Le navigateur traite ensuite la réponse et met à jour la page en conséquence. Un autre exemple est lorsqu'un utilisateur clique sur un lien pour charger plus de contenu, une requête AJAX est envoyée au serveur pour obtenir le contenu supplémentaire, puis l'afficher sur la page.

Grammaire

http.onreadystatechange = function () {
   if (this.readyState == 1) {
      
      //put your code here
      console.log('This is OPENED state')
   }
}

Statut HEADERS_RECEIVED (2)

Il s'agit du troisième état prêt d'AJAX. Il est représenté par l'entier 2. Les en-têtes reçus sont un statut d'une requête en AJAX qui se produit lorsqu'une requête est envoyée et que le serveur répond avec ses en-têtes. Le serveur a reçu la requête et prépare une réponse, indiquant que les en-têtes de réponse ont été reçus.

Par exemple, lorsqu'un utilisateur envoie une demande pour afficher une page Web, le serveur répondra en renvoyant les en-têtes de page. Ces en-têtes contiennent des informations telles que le type de contenu, la longueur de la page et la date de dernière modification de la page.

Un autre exemple est lorsqu'un utilisateur envoie une demande au serveur pour télécharger un fichier. Le serveur répondra en renvoyant les en-têtes de fichiers, tels que la taille et le type du fichier ainsi que la date de sa dernière modification.

Grammaire

http.onreadystatechange = function () {
   if (this.readyState == 2) {
      
      //put your code here
      console.log('This is HEADERS_RECEIVED state')
   }
}

État de chargement (3)

L'état de chargement d'une requête en AJAX se produit lorsqu'une requête est envoyée au serveur et qu'une réponse est reçue. Pendant ce temps, l'état de la requête est « chargement », indiquant que le corps de la réponse est en cours de réception.

Par exemple, lorsqu'un utilisateur clique sur un bouton pour soumettre un formulaire, l'état de chargement correspond au moment où le formulaire est soumis et qu'une réponse (telle qu'un message de réussite ou d'erreur) est renvoyée par le serveur.

Un autre exemple est lorsqu'un utilisateur clique sur un lien pour accéder à une nouvelle page. L'état de chargement se produit lorsqu'un lien est cliqué et qu'une nouvelle page se charge.

Grammaire

http.onreadystatechange = function () {
   if (this.readyState == 3) {
      
      //put your code here
      console.log('This is LOADING state')
   }
}

Statut complet (4)

L'état d'achèvement d'une demande en AJAX correspond au moment où la demande a été complétée et qu'une réponse a été reçue. À ce stade, le serveur a répondu à la demande et les données sont disponibles pour un traitement ultérieur. Cela indique que la demande est terminée et qu'une réponse a été reçue.

Grammaire

http.onreadystatechange = function () {
   if (this.readyState == 4) {
      
      //put your code here
      console.log('This is DONE state')
   }
}

Exemple

Dans cet exemple, nous effectuerons un appel AJAX et examinerons les différents états de préparation. Nous mettrons à jour les pages Web des différents États avec leur statut actuel. Nous ne pouvons pas créer l'état NON ENVOYÉ car cet état n'est disponible qu'avant l'envoi de l'appel AJAX. Nous utilisons un gestionnaire d'événements de clic de bouton pour déclencher l'appel AJAX.

<html>
<body>
   <h2>Different <i>Ready State</i> of AJAX</h2>
   <button onclick = "ajaxCall()">Trigger AJAX Call</button>
   <div id = "root" style = "border: 1px solid black; padding: 1%"></div>
   <script>
      let root = document.getElementById('root')
      function ajaxCall() {
         root.innerHTML = 'AJAX Call Started! <br /><br />'
            
         //AJAX Call
         let http = new XMLHttpRequest()
         http.onreadystatechange = function () {
            if (this.readyState == 1) {
               root.innerHTML += 'This is OPENED state <br />'
            }
            if (this.readyState == 2) {
               root.innerHTML += 'This is HEADERS_RECEIVED state <br />'
            }
            if (this.readyState == 3) {
               root.innerHTML += 'This is LOADING state <br />'
            }
            if (this.readyState == 4) {
               root.innerHTML += 'This is DONE state <br />'
            }
         }
         http.open('GET', 'https://jsonplaceholder.typicode.com/posts/', true)
         http.onload = function () {
            root.innerHTML += '<br />AJAX Call Completed!'
         }
         http.send()
      }
   </script>
</body>
</html>

Conclusion

En JavaScript, les requêtes AJAX ont quatre états de préparation différents : Non envoyé, Ouvert, En-têtes reçus et Terminé. Le statut non envoyé signifie que la demande n'a pas encore été envoyée au serveur. L'état ouvert se produit lorsqu'une requête a été envoyée au serveur mais qu'une réponse n'a pas encore été reçue. L'état d'en-tête reçu correspond au moment où le serveur a répondu avec ses en-têtes et prépare une réponse. Le statut d'achèvement signifie que la demande est terminée et qu'une réponse a été reçue. Chacun de ces états prêts est accessible via la propriété readyState de l'objet XMLHttpRequest. Ils sont utiles pour suivre la progression des requêtes AJAX et gérer les réponses de manière appropriée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!