Vertiefendes Verständnis der fünf Schritte asynchroner Ajax-Anforderungen (detaillierter Code)

Ajax wird häufig in der Front-End-Arbeit verwendet. Tatsächlich wissen viele Leute nur, dass es sich bei Ajax um eine asynchrone Anfrage handelt, und wissen nicht, wie man sie verwendet. Was sind die grundlegenden Schritte? Als Nächstes stellt Ihnen dieser Artikel die Ajax-Anfrageschritte und den detaillierten Code der Ajax-Anfrageschritte vor. Interessierte Freunde können gerne mal vorbeischauen.

AJAX (Asynchronous JavaScript and XML): bezieht sich auf eine Webentwicklungstechnologie zum Erstellen interaktiver Webanwendungen. Durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund kann AJAX asynchrone Aktualisierungen von Webseiten ermöglichen. Dies bedeutet, dass Teile der Webseite aktualisiert werden können, ohne dass die gesamte Webseite neu geladen werden muss.

1. Erstellen Sie ein xmlHttpRequest-Objekt

Alle modernen Browser (IE7+, Firefox, Chrome, Safari und Opera) unterstützen das XMLHttpRequest-Objekt, während IE5 und IE6 ActiveXObject verwenden.

    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. Stellen Sie die Rückruffunktion ein

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

3. Verwenden Sie die OPEN-Methode, um eine Verbindung mit dem Server herzustellen xmlHttp.open(" get","ajax ?name="+ name,true)

Achten Sie in diesem Schritt auf das Festlegen der HTTP-Anforderungsmethode (post/get). Wenn es sich um die POST-Methode handelt, achten Sie auf das Festlegen der Anforderung Header-Informationen xmlHttp.setRequestHeader("Content-Type"," application/x-www-form-urlencoded")

4. Daten an den Server senden

  xmlHttp.send(null);

Wenn es POST ist, ist es nicht leer

5. Verarbeiten Sie verschiedene Antwortzustände in der Rückruffunktion

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

readyState-Attribut: gibt die aktuelle Phase des Anfrage-/Antwortprozesses an

0: Nicht initialisiert. Die Methode open() wurde noch nicht aufgerufen.
1: Starten. Die open()-Methode wurde aufgerufen, die send()-Methode jedoch noch nicht.
2: Senden. Die send()-Methode wurde aufgerufen, aber die Antwort wurde noch nicht empfangen.
3: Empfangen. Es wurden teilweise Antwortdaten empfangen.
4: Abgeschlossen. Alle Antwortdaten wurden empfangen und können auf dem Client verwendet werden.

Erst nachdem das XMLHttpRequest-Objekt die oben genannten fünf Schritte abgeschlossen hat, können die vom Server zurückgegebenen Daten abgerufen werden.

Statusattribut: HTTP-Statuscode der Antwort
200: Antwort erfolgreich
301: permanente Umleitung/permanente Übertragung
302: temporäre Umleitung/temporäre Übertragung
304: dieses Mal Abrufen des Inhalts besteht darin, die Daten im Cache zu lesen
400: Anforderungsparameterfehler
401: Keine Zugriffsberechtigung
404: Die aufgerufene Ressource existiert nicht

Zusammenfassung: Das Obige stellt die fünf Schritte der Ajax-Anfrage und den detaillierten Code vor. Es mag für diejenigen schwierig erscheinen, die es nicht gelesen haben, und Sie werden es tun Verstehe es langsam. Ich hoffe, es kann dir helfen!

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der fünf Schritte asynchroner Ajax-Anforderungen (detaillierter Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!