Compréhension approfondie des cinq étapes des requêtes asynchrones ajax (code détaillé)

Ajax est souvent utilisé dans le travail front-end. En fait, beaucoup de gens savent seulement qu'Ajax est une requête asynchrone et ne savent pas comment l'utiliser. Quelles sont ses étapes de base ? Ensuite, cet article vous présentera les étapes de la requête Ajax et le code détaillé des étapes de la requête Ajax. Les amis intéressés peuvent y jeter un œil.

AJAX (Asynchronous JavaScript and XML) : fait référence à une technologie de développement Web permettant de créer des applications Web interactives. En échangeant une petite quantité de données avec le serveur en arrière-plan, AJAX peut permettre des mises à jour asynchrones de pages Web. Cela signifie que certaines parties de la page Web peuvent être mises à jour sans recharger la page Web entière.

1. Créez un objet xmlHttpRequest

Tous les navigateurs modernes (IE7+, Firefox, Chrome, Safari et Opera) prennent en charge l'objet XMLHttpRequest, tandis qu'IE5 et IE6 utilisent ActiveXObject.

    if(window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest(); 
      if(xmlHttp.overrideMimeType){
        xmlHttp.overrideMimeType("text/xml");
      }
   }else if(window.ActiveXobject){
       var activeName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
       for(var i=0; i<activeName.length; i++){
          try{
              xmlHttp = new ActiveXobject(activeName[i]);
             break;
          }catch(e){
          }
       }     
   }
   if(!xmlHttp){
      alert("创建xmlhttprequest对象失败");
   }else{    
   }

2. Définissez la fonction de rappel

   xmlHttp.onreadystatechange= callback;
   function callback(){}

3. Utilisez la méthode OPEN pour établir une connexion avec le serveur xmlHttp. .open("get ","ajax?name="+ name,true)

Dans cette étape, faites attention à définir la méthode de requête http (post/get). S'il s'agit d'une méthode POST, faites attention. pour définir les informations d'en-tête de requête xmlHttp.setRequestHeader("Content- Type","application/x-www-form-urlencoded")

Envoyer les données au serveur

  xmlHttp.send(null);

S'il s'agit d'une méthode POST, cela ne fonctionnera pas Vide

5. Traitez différents états de réponse dans la fonction de rappel

 if(xmlHttp.readyState == 4){
      //判断交互是否成功
      if(xmlHttp.status == 200){
        //获取服务器返回的数据
        //获取纯文本数据
        var responseText =xmlHttp.responseText;
       document.getElementById("info").innerHTML = responseText;
      }
  }

Attribut readyState : Représente l'étape actuelle du processus de demande/réponse

0 : Non initialisé. La méthode open() n'a pas encore été appelée.
1 : Commencez. La méthode open() a été appelée, mais la méthode send() n'a pas encore été appelée.
2 : Envoyer. La méthode send() a été appelée, mais la réponse n'a pas encore été reçue.
3 : Recevoir. Des données de réponse partielles ont été reçues.
4 : Terminé. Toutes les données de réponse ont été reçues et sont prêtes à être utilisées sur le client.

Ce n'est qu'une fois que l'objet XMLHttpRequest a terminé les cinq étapes ci-dessus que les données renvoyées par le serveur peuvent être obtenues.

attribut statut : réponse code statut HTTP
200 : réponse réussie
301 : redirection permanente/transfert permanent
302 : redirection temporaire/transfert temporaire
304 : cette fois-ci Obtention du contenu est de lire les données dans le cache
400 : Erreur de paramètre de demande
401 : Aucune autorisation d'accès
404 : La ressource consultée n'existe pas

Résumé : Ce qui précède présente les cinq étapes de la requête Ajax et le code détaillé. Cela peut sembler difficile à ceux qui n'ont pas été en contact avec celle-ci. Après l'avoir lu, vous pourrez l'essayer davantage. comprenez-le lentement. J'espère que cela pourra vous aider !

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!