AJAX - 服务器 处理响应

XMLHttpRequest 对象的 onreadystatechange 用来自定义要处理服务器响应的回调函数。

httpRequest.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
 document.getElementById("output").innerHTML = this.responseText;
  }
};
测试看看‹/›

onreadystatechange 属性定义当readyState变化时要执行的函数。

readyState 属性存储 XMLHttpRequest 对象的当前状态。

status 属性存储 XMLHttpRequest 对象的状态代码。

statusText 属性保存 XMLHttpRequest 对象的状态文本。

属性描述
onreadystatechange定义当 readyState 属性变化时要调用的函数
readyState保存 XMLHttpRequest 的状态:
0:请求未初始化
1:服务器连接建立
2:收到请求
3:处理请求
4:请求完成并且响应准备就绪
status返回请求的状态号:
200:“OK”
403:“Forbidden”
404:“Not Found”
有关完整列表,请访问HTTP状态代码参考
statusText返回状态文本(例如,“OK”或“Not Found”)

服务器响应属性

下表列出了服务器响应属性:

属性描述
responseText以字符串形式返回响应数据
responseXML将响应数据作为XML数据返回

responseText属性

responseText 属性以 JavaScript 字符串形式返回服务器响应。

document.getElementById("output").innerHTML = httpRequest.responseText;
测试看看‹/›

responseXML属性

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

您可以使用 JavaScript DOM 函数遍历XMLDocument 对象。

以下示例请求文件ajax_test.xml并解析响应:

xmlDoc = httpRequest.responseXML;
tag = xmlDoc.getElementsByTagName("author");
for (let i = 0; i < tag.length; i++) {
    txt += tag[i].childNodes[0].nodeValue + "<br>";
}

httpRequest.open("GET", "ajax_test.xml", true);
httpRequest.send();
测试看看‹/›

服务器响应方法

下表列出了服务器响应方法:

方法描述
getAllResponseHeaders()返回所有Http头信息
getResponseHeader()返回特定的Http头信息

getAllResponseHeaders()方法

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

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
     document.getElementById("output").innerHTML = this.getAllResponseHeaders();
  }
};
测试看看‹/›

getResponseHeader()方法

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

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
     document.getElementById("output").innerHTML = this.getResponseHeader("Server");
  }
};
测试看看‹/›

多个AJAX实例

如果网站中有多个AJAX任务,则应创建两个功能:

  • 执行XMLHttpRequest对象的函数

  • 每个AJAX任务都有一个回调函数

函数调用应包含URL以及响应就绪后要调用的函数。

fetchDoc("url-1", myFunc1);
fetchDoc("url-2", myFunc2);
fetchDoc("url-3", myFunc3);

function fetchDoc(url, callback) {
  var httpRequest = new XMLHttpRequest();
  httpRequest.onreadystatechange = function() {
   if (this.readyState === 4 && this.status === 200) {
        callback(this);
    }
  };
  httpRequest.open("GET", url, true);
  httpRequest.send();
}

function myFunc1(httpRequest) {
  // action goes here
}
function myFunc2(httpRequest) {
  // action goes here
}
function myFunc3(httpRequest) {
  // action goes here
}
测试看看‹/›

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