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示例