AJAX 响应

---

onreadystatechange 属性

readyState 属性保存XMLHttpRequest的状态。

onreadystatechange 属性定义当readyState更改时要执行的函数。

status 属性和statusText属性保存XMLHttpRequest对象的状态。

属性	描述
onreadystatechange	定义readyState属性更改时要调用的函数
readyState	保存XMLHttpRequest的状态。 0: 请求未初始化 1: 已建立服务器连接 2: 已收到请求 3: 正在处理请求 4: 请求已完成，响应已准备就绪
status	200: "OK" 403: "Forbidden" 404: "Page not found" 有关完整列表，请转到 Http 消息参考
statusText	返回状态文本（例如"确定"或"未找到"）

每次readyState更改时都会调用onreadystatechange函数。

当readyState为4且status为200时，响应就绪:

实例

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();
} 尝试一下 »

onreadystatechange事件被触发四次（1-4），readyState中的每次更改触发一次。

---

---

使用回调函数

回调函数是作为参数传递给另一个函数的函数。

如果一个网站中有多个AJAX任务，那么应该为执行XMLHttpRequest对象创建一个函数，为每个AJAX任务创建一个回调函数。

函数调用应该包含URL和响应就绪时要调用的函数。

实例

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) {
  // action goes here
}
function myFunction2(xhttp) {
  // action goes here
} 尝试一下 »

---

服务器响应属性

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

---

服务器响应方法

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

---

responseText 属性

responseText 属性将服务器响应作为JavaScript字符串返回，您可以相应地使用它:

实例

document.getElementById("demo").innerHTML = xhttp.responseText; 尝试一下 »

---

responseXML 属性

XML HttpRequest 对象有一个内置的XML解析器。

responseXML 属性将服务器响应作为XML DOM对象返回。

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

实例

请求文件cd_catalog.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", "cd_catalog.xml", true);
xhttp.send(); 尝试一下 »

在本教程的DOM章节中，您将了解更多关于XML DOM的内容。

---

getAllResponseHeaders() 方法

getAllResponseHeaders() 方法从服务器响应返回所有头信息。

实例

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

---

getResponseHeader() 方法

getResponseHeader() 方法从服务器响应返回特定的头信息。

实例

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(); 尝试一下 »