AJAX XHR-請(qǐng)求

AJAX如何工作？

　AJAX 使用的 XMLHttpRequest 的對(duì)象與服務(wù)器通信。讓我們嘗試通過(guò)下面顯示的圖像了解 AJAX 的流程或 AJAX 的工作原理。

　正如您在上面的示例中所看到的，XMLHttpRequest對(duì)象起著重要作用。

1. 用戶從 UI 發(fā)送請(qǐng)求，JavaScript 中調(diào)用 XMLHttpRequest 對(duì)象。
2. HTTP 請(qǐng)求由 XMLHttpRequest 對(duì)象發(fā)送到服務(wù)器。
3. 服務(wù)器使用 JSP，PHP，Servlet，ASP.net 等與數(shù)據(jù)庫(kù)交互。
4. 檢索數(shù)據(jù)。
5. 服務(wù)器將 XML 數(shù)據(jù)或 JSON 數(shù)據(jù)發(fā)送到 XMLHttpRequest 回調(diào)函數(shù)。
6. HTML 和 CSS 數(shù)據(jù)顯示在瀏覽器上。

向服務(wù)器發(fā)送請(qǐng)求

　XMLHttpRequest 對(duì)象用于和服務(wù)器交換數(shù)據(jù)。

　當(dāng)你的頁(yè)面全部加載完畢后，客戶端會(huì)通過(guò) XMLHttpRequest 對(duì)象向服務(wù)器請(qǐng)求數(shù)據(jù)，服務(wù)器端接受數(shù)據(jù)并處理后，向客戶端反饋數(shù)據(jù)。

　如需將請(qǐng)求發(fā)送到服務(wù)器，我們使用 XMLHttpRequest 對(duì)象的open()和send()方法：

xmlhttp.open("GET","ajax_info.txt",true);        
xmlhttp.send();

GET 還是 POST？

　與POST相比，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用。

　然而，在以下情況中，請(qǐng)使用POST請(qǐng)求：

• 無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）

• 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST沒(méi)有數(shù)據(jù)量限制）

• 發(fā)送包含未知字符的用戶輸入時(shí)，POST比GET更穩(wěn)定也更可靠

GET 請(qǐng)求

　一個(gè)簡(jiǎn)單的GET請(qǐng)求：

　在上面的例子中，您可能得到的是緩存的結(jié)果。

　為了避免這種情況，請(qǐng)向 URL 添加一個(gè)唯一的 ID：

　如果您希望通過(guò)GET方法發(fā)送信息，請(qǐng)向 URL 添加信息：

?fname=Henry&lname=Ford為請(qǐng)求時(shí)傳遞的參數(shù)，指瀏覽器向服務(wù)器傳遞兩個(gè)參數(shù)，一個(gè)為fname，值為Henry，一個(gè)為lname，值為Ford。在本實(shí)例中服務(wù)器只用到fname的參數(shù)，沒(méi)有用到lname的參數(shù)。

提示：GET請(qǐng)求具有以下的幾個(gè)特點(diǎn)：

• GET請(qǐng)求可被緩存
• GET請(qǐng)求保留在瀏覽器歷史記錄中
• GET請(qǐng)求可被收藏為書簽
• GET請(qǐng)求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用
• GET請(qǐng)求有長(zhǎng)度限制
• GET請(qǐng)求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)

POST 請(qǐng)求

　一個(gè)簡(jiǎn)單POST請(qǐng)求：

　如果需要像 HTML 表單那樣 POST 數(shù)據(jù)，請(qǐng)使用setRequestHeader()來(lái)添加 HTTP 頭。然后在send()方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：

　提示：POST請(qǐng)求的特點(diǎn)如下：

• POST請(qǐng)求不會(huì)被緩存
• POST請(qǐng)求不會(huì)保留在瀏覽器歷史記錄中
• POST請(qǐng)求不能被收藏為書簽
• POST請(qǐng)求對(duì)數(shù)據(jù)長(zhǎng)度沒(méi)有要求

url - 服務(wù)器上的文件

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

xmlhttp.open("GET","ajax_test.html",true);

　該文件可以是任何類型的文件，比如.txt和.xml，或者服務(wù)器腳本文件，比如.asp和.php（在傳回響應(yīng)之前，能夠在服務(wù)器上執(zhí)行任務(wù)）。

異步 - True 或 False？

　AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

　XMLHttpRequest 對(duì)象如果要用于 AJAX 的話，其open()方法的sync(async)參數(shù)必須設(shè)置為 true：

xmlhttp.open("GET","ajax_test.html",true);

　對(duì)于 web 開發(fā)人員來(lái)說(shuō)，發(fā)送異步請(qǐng)求是一個(gè)巨大的進(jìn)步。很多在服務(wù)器執(zhí)行的任務(wù)都相當(dāng)費(fèi)時(shí)。AJAX 出現(xiàn)之前，這可能會(huì)引起應(yīng)用程序掛起或停止。

　通過(guò) AJAX，JavaScript 無(wú)需等待服務(wù)器的響應(yīng)，而是：

• 在等待服務(wù)器響應(yīng)時(shí)執(zhí)行其他腳本

• 當(dāng)響應(yīng)就緒后對(duì)響應(yīng)進(jìn)行處理

Async=true

　當(dāng)使用 async=true 時(shí)，請(qǐng)規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時(shí)執(zhí)行的函數(shù)：

　您將在稍后的章節(jié)學(xué)習(xí)更多有關(guān) onreadystatechange 的內(nèi)容。

Async = false

　如需使用 async=false，請(qǐng)將open()方法中的第三個(gè)參數(shù)改為 false：

xmlhttp.open("GET","test1.txt",false);

　我們不推薦使用 async=false，但是對(duì)于一些小型的請(qǐng)求，也是可以的。

　請(qǐng)記住，JavaScript 會(huì)等到服務(wù)器響應(yīng)就緒才繼續(xù)執(zhí)行。如果服務(wù)器繁忙或緩慢，應(yīng)用程序會(huì)掛起或停止。

　注意：當(dāng)您使用 async=false 時(shí)，請(qǐng)不要編寫 onreadystatechange 函數(shù) - 把代碼放到send()語(yǔ)句后面即可：

　以上就是 AJAX 通過(guò) XMLHttpRequest 對(duì)象向服務(wù)器發(fā)送請(qǐng)求的介紹內(nèi)容了，在下一章中，我們將繼續(xù)學(xué)習(xí) XHR 響應(yīng)。