Detailliertes Verständnis der XHR-Objekte von Ajax

Dieses Mal werde ich Ihnen ein detailliertes Verständnis der XHR-Objekte von Ajax vermitteln. Vorsichtsmaßnahmen für die Verwendung der XHR-Objekte von Ajax. Hier sind praktische Fälle.

Die vorherigen Wörter

Ajax ist die Abkürzung für asynchrones Javascript und XML. Die chinesische Übersetzung ist asynchrones Javascript und XML 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 (kurz XHR). die zuerst von Microsoft eingeführt wurde. Eine Funktion, für die andere Browseranbieter später identische Implementierungen bereitstellten. 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 Konstruktor . 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 des XHR-Objekts ist die erste aufzurufende Methode open(), die 3 Parameter akzeptiert: den Typ der zu sendenden Anfrage („get“, „post“ usw.), die URL der Anfrage und ob die Darstellung asynchron ist. Boolescher Wert zum Senden einer Anfrage

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

[Hinweis] Die URL ist relativ zur aktuellen Seite, auf der der Code ausgeführt wird, und Anfragen können nur an URLs in gesendet werden dieselbe Domäne mit demselben Port und Protokoll. 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 an den Server gesendet

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

Antwort empfangen

Nach Erhalt der Antwort wird die Antwortdaten Die Attribute des XHR-Objekts werden automatisch ausgefüllt, hauptsächlich einschließlich der folgenden 4 Attribute

responseText: der als Antworttext zurückgegebene Text

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

status: HTTP-Status der Antwort

statusText: Beschreibung des HTTP Status

Nach dem Empfang Nach der Antwort besteht der erste Schritt darin, das Statusattribut zu überprüfen, um festzustellen, ob die Antwort erfolgreich zurückgegeben wurde. Im Allgemeinen kann ein HTTP-Statuscode von 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 Beim 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);
}

asynchronous

Wenn Sie eine asynchrone Antwort erhalten müssen, müssen Sie das readyState-Attribut des XHR-Objekts erkennen, das die aktuell aktive Phase des Anforderungs-/Antwortprozesses darstellt. 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

　　只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常，我们对readyState值为4的阶段感兴趣，因为这时所有数据都已就绪

　　[注意]必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收readyState属性为0和1的情况

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

实例

　　下面以一个小实例来演示ajax中xhr对象的应用

<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('Microsoft.XMLHTTP');
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //发送请求
  xhr.open('get','message.xml',true);
  xhr.send();
}
</script>

//message.xml

<p>hello world</p>

最后

　　通过实例的演示发现，ajax前端本身的内容并不难。但是，由于ajax涉及到一些后端及网络的知识，使得学起来不是很容易。以后的博文将逐步深入地介绍ajax的重点内容

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

AJAX的队列请求如何实现（附代码）

pushState+Ajax实现无刷新的页面切换

Das obige ist der detaillierte Inhalt vonDetailliertes Verständnis der XHR-Objekte von Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!