Réponse du serveur AJAX

Recommandation de cours :

readyState L'attribut onreadystatechange

onreadystatechange L'attribut conserve l'état de XMLHttpRequest.

status L'attribut définit la fonction exécutée lorsque l'état readyState change. Référence du message HTTP L'attribut et

属性 描述
onreadystatechange L'attribut contient l'état de l'objet XMLHttpRequest.
readyState

Définit la fonction appelée lorsque l'attribut readyState change.

  • a enregistré l'état de XMLHttpRequest.
  • 0: La requête n'est pas initialisée
  • 1: La connexion au serveur a été établie
  • 2: La requête a été reçue
  • 3: La requête est en cours de traitement
status
  • 4: La requête est terminée et la réponse est prête
  • 200: "OK"
  • 403: "Interdit"

404: "Page non trouvée" Pour une liste complète, veuillez visiter
Référence du message HTTP statusText

retourne le texte d'état (par exemple "OK" ou "Not Found") à chaque fois

lorsque, le readyState change, la fonction onreadystatechange est appelée. readyState pour 4,status pour 200 lorsque, la réponse est prête :

Exemple

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

Essayez-le vous-même

Remarque :onreadystatechange est déclenché cinq fois (0-4), chaque fois readyState tous changent.

Utilisation de la fonction de rappel

Une fonction de rappel est une fonction qui est passée en paramètre à une autre fonction.

Si votre site web contient plusieurs tâches AJAX, vous devriez créer une fonction pour exécuter l'objet XMLHttpRequest et une fonction de rappel pour chaque tâche AJAX.

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

Exemple

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

Essayez-le vous-même

服务器响应属性

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

服务器响应方法

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

responseText 属性

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

Exemple

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

Essayez-le vous-même

responseXML 属性

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

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

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

Exemple

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

Essayez-le vous-même

Vous apprendrez plus sur le XML DOM dans la section DOM de ce tutoriel.

Méthode getAllResponseHeaders()

getAllResponseHeaders() La méthode retourne toutes les informations d'en-tête de la réponse du serveur.

Exemple

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

Essayez-le vous-même

Méthode getResponseHeader()

getResponseHeader() La méthode retourne des informations spécifiques de l'en-tête de la réponse du serveur.

Exemple

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

Essayez-le vous-même