AJAX - XMLHttpRequest
XMLHttpRequest 物件用於從伺服器請求資料。
向伺服器傳送請求
要向伺服器傳送請求，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| 方法 | 描述 |
|---|---|
| open(方法, url, async) | 指定請求的型別 method：請求型別：GET 或 POST url：伺服器（檔案）位置 async：true（非同步）或 false（同步） |
| send() | 將請求傳送到伺服器（用於 GET） |
| send(string) | 將請求傳送到伺服器（用於 POST） |
URL - 伺服器上的檔案
open() 方法的 url 引數是伺服器上檔案的地址
xhttp.open("GET", "ajax_test.asp", true);
檔案可以是任何型別的檔案，如 .txt 和 .xml，或者伺服器指令碼檔案，如 .asp 和 .php（這些檔案可以在伺服器上執行操作，然後再將響應傳送回來）。
非同步 - 真或假？
應非同步傳送伺服器請求。
open() 方法的 async 引數應設定為 true
xhttp.open("GET", "ajax_test.asp", true);
透過非同步傳送，JavaScript 不必等待伺服器響應，而是可以
- 在等待伺服器響應時執行其他指令碼
- 在響應準備就緒後處理響應
async 引數的預設值為 async = true。
您可以安全地從程式碼中移除第三個引數。
不建議使用同步 XMLHttpRequest（async = false），因為 JavaScript 將停止執行，直到伺服器響應就緒。如果伺服器繁忙或緩慢，應用程式將掛起或停止。
GET 還是 POST？
GET 比 POST 更簡單、更快，並且大多數情況下都可以使用。
但是，請始終在以下情況下使用 POST 請求：
- 無法使用快取檔案（更新伺服器上的檔案或資料庫）。
- 向伺服器傳送大量資料（POST 沒有大小限制）。
- 傳送使用者輸入（可能包含未知字元），POST 比 GET 更健壯、更安全。
GET 請求
一個簡單的 GET 請求
在上面的示例中，您可能會得到快取的結果。要避免這種情況，請向 URL 新增一個唯一的 ID
如果您想使用 GET 方法傳送資訊，請將資訊新增到 URL
伺服器如何使用輸入以及伺服器如何響應請求，將在後續章節中進行解釋。
POST 請求
一個簡單的 POST 請求
要像 HTML 表單一樣 POST 資料，請使用 setRequestHeader() 新增一個 HTTP 標頭。在 send() 方法中指定要傳送的資料
示例
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
自己動手試一試 »
| 方法 | 描述 |
|---|---|
| setRequestHeader(header, value) | 向請求新增 HTTP 標頭 header：指定標頭名稱 value：指定標頭值 |
同步請求
要執行同步請求，請將 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 將停止執行，直到伺服器響應就緒。如果伺服器繁忙或緩慢，應用程式將掛起或停止。
鼓勵現代開發工具警告使用同步請求，並在發生時丟擲 InvalidAccessError 異常。
