AJAX - 伺服器 響應
onreadystatechange 屬性
readyState 屬性儲存 XMLHttpRequest 的狀態。
onreadystatechange 屬性定義了在 readyState 更改時要執行的函式。
status 屬性和 statusText 屬性儲存 XMLHttpRequest 物件的狀態。
| 屬性 | 描述 |
|---|---|
| onreadystatechange | 定義當 readyState 屬性更改時要呼叫的函式 |
| readyState | 儲存 XMLHttpRequest 的狀態。 0: 請求未初始化 1: 伺服器連線已建立 2: 請求已接收 3: 正在處理請求 4: 請求已完成，響應已準備好 |
| status | 200: "OK" 403: "Forbidden" 404: "未找到頁面" 完整列表請參見 HTTP 訊息參考 |
| statusText | 返回狀態文字（例如，“OK”或“Not Found”） |
每次 readyState 更改時都會呼叫 onreadystatechange 函式。
當 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();
}
自己動手試一試 »
上面示例中使用的 "ajax_info.txt" 檔案是一個簡單的文字檔案，內容如下：
<h1>AJAX</h1>
<p>AJAX 不是一種程式語言。</p>
<p>AJAX 是一種從網頁訪問 Web 伺服器的技術。</p>
<p>AJAX 代表 Asynchronous JavaScript And XML（非同步 JavaScript 和 XML）。</p>
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 字串形式返回伺服器響應，您可以相應地使用它。
responseXML 屬性
XML HttpRequest 物件具有內建的 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 + "<br>";
}
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();
自己動手試一試 »
