上一节:
下一节:

  JavaScript AJAX 服务器响应

  • onreadystatechange属性

    readyState属性保存XMLHttpRequest的状态。onreadystatechange属性定义了readyState更改时要执行的函数。 status属性和statusText属性保存XMLHttpRequest对象的状态。
    属性 描述
    onreadystatechange 定义readyState属性更改时要调用的函数
    readyState 保存XMLHttpRequest的状态。
    • 0: 请求未初始化
    • 1: 服务器连接建立
    • 2: 收到请求
    • 3: 处理请求
    • 4: 请求已完成并且响应已准备就绪
    responseText 以字符串形式返回响应数据
    status 返回请求的状态编号
    • 200: "OK"
    • 403: "Forbidden"
    • 404: "Not Found"
    有关完整列表，请转到Http消息参考
    statusText 返回状态文本（例如“OK”或“Not Found”）
    onreadystatechange每次更改时都会调用readyState函数。当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属性

    XMLHttpRequest对象具有内置的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 + "
";
}
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();
    尝试一下
上一节:
下一节: