XMLHttpRequest 對(duì)象的 onreadystatechange 用來(lái)自定義要處理服務(wù)器響應(yīng)的回調(diào)函數(shù)。
httpRequest.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("output").innerHTML = this.responseText;
}
};測(cè)試看看?/?onreadystatechange 屬性定義當(dāng)readyState變化時(shí)要執(zhí)行的函數(shù)。
readyState 屬性存儲(chǔ) XMLHttpRequest 對(duì)象的當(dāng)前狀態(tài)。
status 屬性存儲(chǔ) XMLHttpRequest 對(duì)象的狀態(tài)代碼。
statusText 屬性保存 XMLHttpRequest 對(duì)象的狀態(tài)文本。
| 屬性 | 描述 |
|---|---|
| onreadystatechange | 定義當(dāng) readyState 屬性變化時(shí)要調(diào)用的函數(shù) |
| readyState | 保存 XMLHttpRequest 的狀態(tài)： 0：請(qǐng)求未初始化 1：服務(wù)器連接建立 2：收到請(qǐng)求 3：處理請(qǐng)求 4：請(qǐng)求完成并且響應(yīng)準(zhǔn)備就緒 |
| status | 返回請(qǐng)求的狀態(tài)號(hào)： 200：“OK” 403：“Forbidden” 404：“Not Found” 有關(guān)完整列表，請(qǐng)?jiān)L問HTTP狀態(tài)代碼參考 |
| statusText | 返回狀態(tài)文本（例如，“OK”或“Not Found”） |
下表列出了服務(wù)器響應(yīng)屬性：
| 屬性 | 描述 |
|---|---|
| responseText | 以字符串形式返回響應(yīng)數(shù)據(jù) |
| responseXML | 將響應(yīng)數(shù)據(jù)作為XML數(shù)據(jù)返回 |
responseText 屬性以 JavaScript 字符串形式返回服務(wù)器響應(yīng)。
document.getElementById("output").innerHTML = httpRequest.responseText;測(cè)試看看?/?responseXML 屬性將服務(wù)器響應(yīng)作為XMLDocument對(duì)象返回。
您可以使用 JavaScript DOM 函數(shù)遍歷XMLDocument 對(duì)象。
以下示例請(qǐng)求文件ajax_test.xml并解析響應(yīng)：
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();測(cè)試看看?/?下表列出了服務(wù)器響應(yīng)方法：
| 方法 | 描述 |
|---|---|
| getAllResponseHeaders() | 返回所有Http頭信息 |
| getResponseHeader() | 返回特定的Http頭信息 |
getAllResponseHeaders() 方法從服務(wù)器響應(yīng)中返回所有 Http 頭信息。
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("output").innerHTML = this.getAllResponseHeaders();
}
};測(cè)試看看?/?該getResponseHeader()方法從服務(wù)器響應(yīng)中返回特定的 Http 頭信息。
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("output").innerHTML = this.getResponseHeader("Server");
}
};測(cè)試看看?/?如果網(wǎng)站中有多個(gè)AJAX任務(wù)，則應(yīng)創(chuàng)建兩個(gè)功能：
執(zhí)行XMLHttpRequest對(duì)象的函數(shù)
每個(gè)AJAX任務(wù)都有一個(gè)回調(diào)函數(shù)
函數(shù)調(diào)用應(yīng)包含URL以及響應(yīng)就緒后要調(diào)用的函數(shù)。
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
}測(cè)試看看?/?回調(diào)函數(shù)是作為參數(shù)傳遞給另一個(gè)函數(shù)的函數(shù)。