Detailliertes Verständnis des XHR-Objekts im ersten Teil der Ajax-Reihe

Ajax ist die Abkürzung für asynchrones Javascript und XML. Diese Technologie kann zusätzliche Daten vom Server anfordern, was zu einer besseren Benutzererfahrung führt Freunde, werfen wir einen Blick auf das XHR-Objekt, den ersten Artikel in der Ajax-Reihe

Die vorherigen Wörter

Ajax ist die Abkürzung Die chinesische Übersetzung besteht aus asynchronem Javascript und XML. Diese Technologie kann zusätzliche Daten vom Server anfordern, ohne die Seite zu entladen, was zu einer besseren Benutzererfahrung führt. Obwohl XML im Namen enthalten ist, hat die Ajax-Kommunikation nichts mit dem Datenformat zu tun. Im Folgenden wird der Inhalt von Ajax im Detail vorgestellt

Erstellung

Der Kern der Ajax-Technologie ist das XMLHttpRequest-Objekt (siehe). als XHR), das aus einer Funktion besteht, die zuerst von Microsoft eingeführt und später von anderen Browseranbietern implementiert wurde. XHR bietet eine flüssige Schnittstelle zum Senden von Anforderungen an den Server und zum Parsen der Serverantwort. Es kann mehr Informationen vom Server asynchron abrufen, was bedeutet, dass der Benutzer nach dem Klicken neue Daten abrufen kann, ohne die Seite zu aktualisieren

IE5 Es war der erste Browser, der XHR-Objekte einführte. In IE5 wird das XHR-Objekt über ein ActiveX-Objekt in der MSXML-Bibliothek implementiert, während IE7+ und andere Standardbrowser native XHR-Objekte unterstützen

Das Erstellen eines XHR-Objekts wird auch als Instanziieren eines XHR-Objekts bezeichnet, da XMLHTTPRequest() dies ist ein Konstrukteur. Im Folgenden finden Sie eine kompatible Methode zum Schreiben eines XHR-Objekts

var xhr;
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest();
}else{
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

Anfrage senden

open()

Bei Verwendung eines XHR-Objekts ist die erste aufzurufende Methode open(), die 3 Parameter akzeptiert: den Typ der Anfrage gesendet werden soll. („get“, „post“ usw.), die angeforderte URL und ein boolescher Wert, der angibt, ob die Anfrage asynchron gesendet werden soll

xhr.open("get","example.php", false);

[Hinweis] Die URL bezieht sich auf die aktuelle Seite, auf der der Code ausgeführt wird, und Anfragen können nur an URLs in derselben Domäne gesendet werden, die denselben Port und dasselbe Protokoll verwenden. Wenn sich die URL von der Seite unterscheidet, die die Anfrage initiiert hat, tritt ein Sicherheitsfehler auf

send()

Die send()-Methode empfängt einen Parameter, der als Request-Body-Daten gesendet werden sollen. Nach dem Aufruf der send()-Methode wird die Anfrage zum Empfang an den Server

xhr.open("get", "example.txt", false);
xhr.send(null);

gesendet die Antwort

Nach Erhalt der Antwort füllen die Antwortdaten automatisch die Attribute des XHR-Objekts aus, hauptsächlich einschließlich der folgenden 4 Attribute

responseText: der zurückgegebene Text als Antworttext

responseXML: Wenn der Inhaltstyp der Antwort „text/xml“ oder „application/xml“ ist, speichert dieses Attribut das XML-DOM-Dokument der Antwortdaten

status: HTTP-Status der Antwort

statusText: Beschreibung des HTTP-Status

Nach Erhalt der Antwort besteht der erste Schritt darin, das Statusattribut zu überprüfen, um zu bestätigen, dass die Antwort erfolgreich zurückgegeben wurde. Im Allgemeinen kann der HTTP-Statuscode 200 als Erfolgszeichen verwendet werden. Zu diesem Zeitpunkt ist der Inhalt des Attributs „responseText“ fertig und auf „responsXML“ kann auch zugegriffen werden, wenn der Inhaltstyp korrekt ist. Darüber hinaus bedeutet der Statuscode 304, dass die angeforderte Ressource nicht geändert wurde und die zwischengespeicherte Version im Browser direkt verwendet werden kann. Dies bedeutet natürlich auch, dass die Antwort gültig ist

Unabhängig davon Inhaltstyp wird der Inhalt des Antworttexts im Attribut „responseText“ gespeichert und für Nicht-XML-Daten ist der Wert des Attributs „responseXML“ null

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
  alert(xhr.responseText);
}else{
  alert(&#39;request was unsuccessful:&#39; + xhr.status);
}

Asynchron

Wenn Sie eine asynchrone Antwort erhalten müssen, müssen Sie das readyState-Attribut des XHR-Objekts erkennen. Dies stellt die aktuell aktive Phase des Anfrage-/Antwortprozesses dar. Mögliche Werte für dieses Attribut sind wie folgt:

0 (UNSENT): Nicht initialisiert. Die Methode open() wurde noch nicht aufgerufen

1 (GEÖFFNET): Start. Die open()-Methode wurde aufgerufen, aber die send()-Methode wurde noch nicht aufgerufen

2 (HEADERS_RECEIVED): Senden. Die send()-Methode wurde aufgerufen und die Header-Informationen

3 (LOADING): empfangen. Teilweise Informationen zum Antwortkörper wurden empfangen

4 (FERTIG): Abgeschlossen. Alle Antwortdaten wurden empfangen und können auf dem Client verwendet werden

Immer wenn sich der Wert des readyState-Attributs von einem Wert zu einem anderen ändert, wird ein readystatechange-Ereignis ausgelöst. Mit diesem Ereignis können Sie den Wert von readyState nach jeder Zustandsänderung ermitteln. Normalerweise interessiert uns die Phase, in der der readyState-Wert 4 ist, da zu diesem Zeitpunkt alle Daten bereit sind

[Hinweis] Der onreadystatechange-Ereignishandler muss vor dem Aufruf von open() angegeben werden, um die browserübergreifende Kompatibilität sicherzustellen . Ansonsten ist die Instanz

xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status == 200){
      alert(xhr.responseText);
    }
  }
}

Das Folgende ist ein kleines Beispiel um die Anwendung von xhr-Objekten in Ajax zu demonstrieren

<button id="btn">获取信息</button>
<p id="result"></p>
<script>
btn.onclick = function(){
  //创建xhr对象
  var xhr;
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //发送请求
  xhr.open(&#39;get&#39;,&#39;message.xml&#39;,true);
  xhr.send();
}
</script>

//message.xml

<p>hello world</p>

Durch die Demonstration von Beispielen haben wir festgestellt, dass der Inhalt des Ajax-Frontends selbst nicht schwierig ist. Da Ajax jedoch einige Back-End- und Netzwerkkenntnisse erfordert, ist es nicht einfach zu erlernen. Zukünftige Blog-Beiträge werden nach und nach die wichtigsten Inhalte von Ajax ausführlich vorstellen

Der obige Artikel ist der erste Artikel der vom Herausgeber zum XHR-Objekt vorgestellten ausführlichen Einführung in die Ajax-Reihe. Ich hoffe, dass er hilfreich sein wird alle!

Verwandte Empfehlungen:

Detaillierte Erläuterung der einfachen Implementierung des AJAX-Paging-Effekts

Ajax-Sendeformular und JSON-Methode empfangen

Ein Beispiel für die Implementierung von Ajax mit einem einfachen prozentualen Fortschrittsbalken

Das obige ist der detaillierte Inhalt vonDetailliertes Verständnis des XHR-Objekts im ersten Teil der Ajax-Reihe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!