AJAX XHR-請求

AJAX如何工作？

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

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

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

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

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

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

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

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

GET 還是 POST？

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

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

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

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

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

GET 請求

　一個簡單的GET請求：

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

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

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

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

提示：GET請求具有以下的幾個特點：

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

POST 請求

　一個簡單POST請求：

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

　提示：POST請求的特點如下：

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

url - 服務器上的文件

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

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

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

異步 - True 或 False？

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

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

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

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

　通過 AJAX，JavaScript 無需等待服務器的響應，而是：

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

• 當響應就緒后對響應進行處理

Async=true

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

　您將在稍后的章節(jié)學習更多有關 onreadystatechange 的內容。

Async = false

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

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

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

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

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

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