AJAX - 向伺服器傳送 請求
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 請求
在上面的示例中，您可能會得到一個快取的結果。要避免這種情況，請在 URL 中新增一個唯一 ID
如果您想透過 GET 方法傳送資訊，請將資訊新增到 URL
POST 請求
一個簡單的 POST 請求
要像 HTML 表單一樣 POST 資料，請使用 setRequestHeader() 新增一個 HTTP 標頭。在 send() 方法中指定要傳送的資料
示例
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
自己動手試一試 »
| 方法 | 描述 |
|---|---|
| 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);
透過非同步傳送，JavaScript 不必等待伺服器響應，而是可以
- 在等待伺服器響應時執行其他指令碼
- 在響應準備好後處理響應
onreadystatechange 屬性
使用 XMLHttpRequest 物件，您可以定義一個在請求收到答案時執行的函式。
該函式在 XMLHttpRequest 物件的 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();
自己動手試一試 »
上面示例中使用的 "ajax_info.txt" 檔案是一個簡單的文字檔案，內容如下：
<h1>AJAX</h1>
<p>AJAX 不是一種程式語言。</p>
<p>AJAX 是一種從網頁訪問 Web 伺服器的技術。</p>
<p>AJAX 代表 Asynchronous JavaScript And XML（非同步 JavaScript 和 XML）。</p>
您將在後續章節中瞭解更多關於 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 異常。
