AJAX XHR-請求

AJAX如何工作？

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

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

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

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

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

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

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

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

GET 還是 POST？

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

　然而，在以下情況中，請使用POST請求：

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

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

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

GET 請求

　一個簡單的GET請求：

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

　為了避免這種情況，請向 URL 添加一個唯一的 ID：

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

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

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

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

POST 請求

　一個簡單POST請求：

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

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

• POST請求不會被緩存
• POST請求不會保留在瀏覽器歷史記錄中
• POST請求不能被收藏為書簽
• POST請求對數(shù)據(jù)長度沒有要求

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 對象如果要用于 AJAX 的話，其open()方法的sync(async)參數(shù)必須設(shè)置為 true：

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

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

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

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

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

Async=true

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

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

Async = false

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

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

　我們不推薦使用 async=false，但是對于一些小型的請求，也是可以的。

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

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

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