AJAX - XMLHttpRequest 物件
AJAX 的基石是 XMLHttpRequest 物件。
- 建立一個 XMLHttpRequest 物件
- 定義回撥函式
- 開啟 XMLHttpRequest 物件
- 向伺服器傳送請求
XMLHttpRequest 物件
所有現代瀏覽器都支援 XMLHttpRequest 物件。
XMLHttpRequest 物件可用於在後臺與 Web 伺服器交換資料。這意味著可以在不重新載入整個頁面的情況下更新網頁的部分內容。
建立 XMLHttpRequest 物件
所有現代瀏覽器（Chrome、Firefox、IE、Edge、Safari、Opera）都內建了 XMLHttpRequest 物件。
建立 XMLHttpRequest 物件的語法
variable = new XMLHttpRequest();
定義回撥函式
回撥函式是將函式作為引數傳遞給另一個函式的函式。
在這種情況下，回撥函式應包含在響應準備好時要執行的程式碼。
xhttp.onload = function() {
// 響應準備好時要執行的操作
}
傳送請求
要向伺服器傳送請求，可以使用 XMLHttpRequest 物件的 open() 和 send() 方法。
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
示例
// 建立 XMLHttpRequest 物件
const xhttp = new XMLHttpRequest();
// 定義回撥函式
xhttp.onload = function() {
// 在這裡可以使用資料
}
// 傳送請求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
自己動手試一試 »
跨域訪問
出於安全原因，現代瀏覽器不允許跨域訪問。
這意味著網頁和它嘗試載入的 XML 檔案必須位於同一伺服器上。
W3Schools 上的示例都開啟位於 W3Schools 域上的 XML 檔案。
如果您想在你自己的網頁上使用上面的示例，您載入的 XML 檔案必須位於您自己的伺服器上。
XMLHttpRequest 物件的方法
| 方法 | 描述 |
|---|---|
| new XMLHttpRequest() | 建立一個新的 XMLHttpRequest 物件 |
| abort() | 取消當前請求 |
| getAllResponseHeaders() | 返回頭資訊 |
| getResponseHeader() | 返回特定的頭資訊 |
| open(method, url, async, user, psw) | 指定請求 method: 請求型別 GET 或 POST url: 檔案位置 async: true (非同步) 或 false (同步) user: 可選的使用者名稱 psw: 可選的密碼 |
| send() | 將請求傳送到伺服器 用於 GET 請求 |
| send(string) | 將請求傳送到伺服器。 用於 POST 請求 |
| setRequestHeader() | 向要傳送的頭資訊新增一個標籤/值對 |
XMLHttpRequest 物件屬性
| 屬性 | 描述 |
|---|---|
| onload | 定義當請求被接收（載入）時要呼叫的函式 |
| onreadystatechange | 定義當 readyState 屬性更改時要呼叫的函式 |
| readyState | 儲存 XMLHttpRequest 的狀態。 0: 請求未初始化 1: 伺服器連線已建立 2: 請求已接收 3: 正在處理請求 4: 請求已完成，響應已準備好 |
| responseText | 將響應資料作為字串返回 |
| responseXML | 將響應資料作為 XML 資料返回 |
| status | 返回請求的狀態號 200: "OK" 403: "Forbidden" 404: "Not Found" 完整列表請參見 HTTP 訊息參考 |
| statusText | 返回狀態文字（例如，“OK”或“Not Found”） |
onload 屬性
使用 XMLHttpRequest 物件，您可以定義一個回撥函式，在請求收到答覆時執行。
該函式定義在 XMLHttpRequest 物件的 onload 屬性中。
示例
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
自己動手試一試 »
多個回撥函式
如果您在一個網站上有多個 AJAX 任務，您應該為執行 XMLHttpRequest 物件建立一個函式，併為每個 AJAX 任務建立一個回撥函式。
函式呼叫應包含 URL 以及響應準備好時要呼叫的函式。
示例
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// 操作在此處進行
}
function myFunction2(xhttp) {
// 操作在此處進行
}
onreadystatechange 屬性
readyState 屬性儲存 XMLHttpRequest 的狀態。
onreadystatechange 屬性定義一個在 readyState 更改時執行的回撥函式。
status 屬性和 statusText 屬性儲存 XMLHttpRequest 物件的\}, 狀態。
| 屬性 | 描述 |
|---|---|
| onreadystatechange | 定義當 readyState 屬性更改時要呼叫的函式 |
| readyState | 儲存 XMLHttpRequest 的狀態。 0: 請求未初始化 1: 伺服器連線已建立 2: 請求已接收 3: 正在處理請求 4: 請求已完成，響應已準備好 |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" 完整列表請參見 HTTP 訊息參考 |
| statusText | 返回狀態文字（例如，“OK”或“Not Found”） |
每次 readyState 更改時，都會呼叫 onreadystatechange 函式。
當 readyState 為 4 且 status 為 200 時，響應已準備好
示例
function loadDoc() {
const 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");
xhttp.send();
}
自己動手試一試 »
onreadystatechange 事件被觸發四次（1-4），每次 readyState 更改一次。
