AJAX - server respons

Kursus Anbefalinger:

readyState onreadystatechange-egenskab

onreadystatechange egenskab bevarer XMLHttpRequests status.

status egenskab definerer hvilken funktion der udføres, når readyState ændres. Http Meddelelses Reference Manual egenskab og

属性 描述
onreadystatechange egenskab indeholder XMLHttpRequest-objektets status.
readyState

definerer hvilken funktion der kaldes, når readyState-egenskaben ændres.

  • bevarer XMLHttpRequests status.
  • 0: Anmodningen er ikke initialiseret
  • 1: Serverforbindelsen er etableret
  • 2: Anmodningen er modtaget
  • 3: Anmodningen håndteres
status
  • 4: Anmodningen er fuldført og svaret er klar
  • 200: "OK"
  • 403: "Forbudt"

404: "Side ikke fundet" For en fuld liste, besøg
Http Meddelelses Reference Manual statusText

returnerer statusTekst (f.eks. "OK" eller "Ikke Fundet") hver gang

når readyState ændres, vil onreadystatechange-funktionen blive kaldt. readyState er 4,status er 200 når svaret er klar:

Eksempel

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(); 
}

Prøv det selv

Bemærk:onreadystatechange udløses fem gange (0-4), hver gang readyState ændres alle sammen.

Brug af tilbagekaldelsesfunktioner

En tilbagekaldelsesfunktion er en funktion, der overføres som parameter til en anden funktion.

Hvis din webside har flere AJAX-opgaver, bør du oprette en funktion til at udføre XMLHttpRequest-objekter samt en tilbagekaldelsesfunktion for hver AJAX-opgave.

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

Eksempel

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) {
  // 行动在这里
 }

Prøv det selv

服务器响应属性

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

服务器响应方法

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

responseText 属性

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

Eksempel

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

Prøv det selv

responseXML 属性

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

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

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

Eksempel

请求文件 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();

Prøv det selv

Du vil lære mere om XML DOM i DOM-sektionen af denne vejledning.

getAllResponseHeaders() metoden

getAllResponseHeaders() Metoden returnerer alle hovedinformationer fra serverens respons.

Eksempel

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

Prøv det selv

getResponseHeader() metoden

getResponseHeader() Metoden returnerer specifikke hovedinformationer fra serverens respons.

Eksempel

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();

Prøv det selv