编辑这个页面须要登录或更高权限！

AJAX 发送请求 AJAX PHP示例

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
}
测试看看‹/›

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

AJAX 发送请求 AJAX PHP示例