AJAX - Serverantwort

Kursempfehlung:

readyState onreadystatechange-Attribut

onreadystatechange Attribute enthalten den Status von XMLHttpRequest.

status Attribute definieren die Funktion, die bei Änderungen des readyState ausgeführt wird. HTTP Message Reference Manual Attribute und

属性 描述
onreadystatechange Attribut enthält den Status des XMLHttpRequest-Objekts.
readyState

Definiert die Funktion, die aufgerufen wird, wenn sich der readyState-Attribut ändert.

  • Speichert den Status von XMLHttpRequest.
  • 0: Die Anfrage ist noch nicht initialisiert
  • 1: Die Verbindung zum Server wurde hergestellt
  • 2: Die Anfrage wurde empfangen
  • 3: Die Anfrage wird bearbeitet
status
  • 4: Die Anfrage ist abgeschlossen und die Antwort ist bereit
  • 200: "OK"
  • 403: "Verboten"

404: "Seite nicht gefunden" Für eine vollständige Liste besuchen Sie bitte
HTTP Message Reference Manual statusText

wird der Status der Antwort zurückgegeben (z.B. "OK" oder "Not Found") jedes Mal

wenn der readyState ändert, wird die onreadystatechange-Funktion aufgerufen. readyState für 4,status für 200 wenn, die Antwort bereit ist:

Beispiel

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
}

Versuchen Sie es selbst

Anmerkung:onreadystatechange wird fünf Mal (0-4) ausgelöst, jedes Mal readyState alle verändert.

Verwenden Sie Callback-Funktionen

Eine Callback-Funktion ist eine Funktion, die als Parameter an eine andere Funktion übergeben wird.

Wenn Ihre Website mehrere AJAX-Aufgaben hat, sollten Sie eine Funktion erstellen, um XMLHttpRequest-Objekte auszuführen, sowie eine Callback-Funktion für jede AJAX-Aufgabe.

该函数应当包含 URL 以及当响应就绪时调用的函数。

Beispiel

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction1(xhttp) {
  // 行动在这里
 } 
function myFunction2(xhttp) {
  // 行动在这里
 }

Versuchen Sie es selbst

服务器响应属性

属性 描述
responseText 获取字符串形式的响应数据
responseXML 获取 XML 数据形式的响应数据

服务器响应方法

方法 描述
getResponseHeader() 从服务器返回特定的头部信息
getAllResponseHeaders() 从服务器返回所有头部信息

responseText 属性

responseText 属性以 JavaScript 字符串的形式返回服务器响应，因此您可以这样使用它：

Beispiel

document.getElementById("demo").innerHTML = xhttp.responseText;

Versuchen Sie es selbst

responseXML 属性

XML HttpRequest 对象有一个內建的 XML 解析器。

ResponseXML 属性以 XML DOM 对象返回服务器响应。

使用此属性，您可以把响应解析为 XML DOM 对象：

Beispiel

请求文件 music_list.xml，并对响应进行解析：

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "music_list.xml", true);
xhttp.send();

Versuchen Sie es selbst

Sie werden im DOM-Kapitel dieses Tutorials mehr über XML DOM lernen.

Die Methode getAllResponseHeaders()

getAllResponseHeaders() Die Methode gibt alle Header-Informationen aus der Server-Antwort zurück.

Beispiel

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

Versuchen Sie es selbst

Die Methode getResponseHeader()

getResponseHeader() Die Methode gibt spezifische Header-Informationen aus der Server-Antwort zurück.

Beispiel

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Versuchen Sie es selbst