AJAX - XMLHttpRequest

XMLHttpRequest 對象用于同服務器交換數據。

向服務器發送請求

如需向服務器發送請求，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
方法 描述
open(method, url, async)

規定請求的類型

  • method：請求的類型：GET 還是 POST
  • url：服務器（文件）位置
  • async：true（異步）或 false（同步）
send() 向服務器發送請求（用于 GET）
send(string) 向服務器發送請求（用于 POST）

GET 還是 POST？

GET 比 POST 更簡單更快，可用于大多數情況下。

不過，請在以下情況始終使用 POST：

  • 緩存文件不是選項（更新服務器上的文件或數據庫）
  • 向服務器發送大量數據（POST 無大小限制）
  • 發送用戶輸入（可包含未知字符），POST 比 GET 更強大更安全

GET 請求

一條簡單的 GET 請求：

實例

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

親自試一試

在上面的例子中，您可能會獲得一個緩存的結果。為了避免此情況，請向 URL 添加一個唯一的 ID：

實例

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

親自試一試

如果您需要用 GET 方法來發送信息，請向 URL 添加這些信息：

實例

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

親自試一試

POST 請求

一條簡單的 POST 請求：

實例

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

親自試一試

如需像 HTML 表單那樣 POST 數據，請通過 setRequestHeader() 添加一個 HTTP 頭部。請在 send() 方法中規定您需要發送的數據：

實例

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

親自試一試

方法 描述
setRequestHeader(header, value)

向請求添加 HTTP 頭部

  • header：規定頭部名稱
  • value：規定頭部值

url - 服務器上的文件

open() 方法的 url 參數，是服務器上文件的地址：

xhttp.open("GET", "ajax_test.asp", true);

該文件可以是任何類型的文件，如 .txt 和 .xml，或服務器腳本文件，如 .asp 和 .php（它們可以在發送回響應之前在服務器執行操作）。

異步 - true 還是 false？

如需異步發送請求，open() 方法的 async 參數必須設置為 true：

xhttp.open("GET", "ajax_test.asp", true);

發送異步請求對 web 開發人員來說是一個巨大的進步。服務器上執行的許多任務都非常耗時。在 AJAX 之前，此操作可能會導致應用程序掛起或停止。

通過異步發送，JavaScript 不必等待服務器響應，而是可以：

  • 在等待服務器響應時執行其他腳本
  • 當響應就緒時處理響應

onreadystatechange 屬性

通過 XMLHttpRequest 對象，您可以定義當請求接收到應答時所執行的函數。

這個函數是在 XMLHttpResponse 對象的 onreadystatechange 屬性中定義的：

實例

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();

親自試一試

您將在稍后的章節學到更多有關 onreadystatechange 的知識。

同步請求

如需執行同步的請求，請把 open() 方法中的第三個參數設置為 false：

xhttp.open("GET", "ajax_info.txt", false);

有時 async = false 用于快速測試。你也會在更老的 JavaScript 代碼中看到同步請求。

由于代碼將等待服務器完成，所以不需要 onreadystatechange 函數：

實例

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

親自試一試

我們不推薦同步的 XMLHttpRequest (async = false)，因為 JavaScript 將停止執行直到服務器響應就緒。如果服務器繁忙或緩慢，應用程序將掛起或停止。

同步 XMLHttpRequest 正在從 Web 標準中移除，但是這個過程可能需要很多年。

現代開發工具被鼓勵對使用同步請求做出警告，并且當這種情況發生時，可能會拋出 InvalidAccessError 異常。