XMLHttpRequest對象是ajax編程的基礎，用於發送請求（數據）與服務端進行交互。
目前主流瀏覽器都內置了XMLHttpRequest對象。
瀏覽器會使用XMLHttpRequest對象來創建Ajax請求。
XMLHttpRequest對象的方法
| 方法 | 說明 |
|---|---|
| open(method, url, async) | 指定請求類型 method: 請求類型: GET 或 POST url: 服務器URL async: true (asynchronous)異步 或 false (synchronous) 同步 |
| send() | 發送請求到服務端 |
| send(string) | 發送請求到服務端 |
| setRequestHeader(header, value) | 添加一個請求頭 |
采用GET還是POST
methond請求有GET和POST，應該選擇哪種呢？
GET比 POST 更簡單、更快, 並且可以在大多數情況下使用。
但是, 在下列情況下始終使用 POST 請求:
- 更新服務器上的數據。
- 向服務器發送大量數據 (POST 沒有大小限制)。
- 發送用戶輸入 (可以包含未知字符), POST 比獲取更健壯、更安全。
采用異步還是同步
通過異步發送, JavaScript 不必等待服務器響應, 而是可以:
- 在等待服務器響應時執行其他腳本
- 響應就緒后處理響應
|
1
|
xhttp.open(
"GET"
,
"ajax_test.jsp"
,
true
);
|
open () 方法的異步參數設置為 true表示采用異步:
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<
script
>
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();
}
</
script
>
|
第一步：創建一個XMLHttpRequest對象實例
第二步：xhttp.open("GET", "ajax_info.txt", true); 准備處理GET請求，請求地址是ajax_info.txt
第三步：發送請求，xhttp.send();
第四步：根據請求返回的狀態，實現不同的響應。