JavaScript之Ajax

2005年Jesse James Garrett 發表了一篇文章，標題為：“Ajax： A newApproach to WebApplications”。他在這篇文章裡介紹了一種技術，用他的話說，就叫：Ajax，是 AsynchronousJavaScript + XML 的簡寫。這種技術能夠想服務器請求額外的數據而無須卸載頁面(即刷新) ，會帶來更好的用戶體驗。一時間，席捲全球。

一． XMLHttpRequest

Ajax 技術核心是 XMLHttpRequest 對象(簡稱 XHR)，這是由微軟首先引入的一個特性 ，其他瀏覽器提供商後來都提供了相同的實現。XHR 的出現，提供了向服務器發送請求和解析服務器響應提供了流暢的接口。能夠以異步方式從服務器獲取更多的信息，這就意味著，用戶只要觸發某一事件，在不刷新網頁的情況下，更新服務器最新的數據。

雖然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和數據格式無關，也就是說這種技術不一定使用 XML。

在使用 XHR 對象時，先必須調用 open()方法，它接受三個參數：要發送的請求類型(get 、post)、請求的 URL 和表示是否異步。

open()方法並不會真正發送請求，而只是啟動一個請求以備發送。通過 send()方法進行發送請求，send()方法接受一個參數，作為請求主體發送的數據。如果不需要則，必須填 null 。執行 send()方法之後，請求就會發送到服務器上。

當請求發送到服務器端，收到響應後，響應的數據會自動填充 XHR 對象的屬性。那麼一共有四個屬性：

接受響應之後，第一步檢查 status 屬性，以確定響應已經成功返回。一般而已 HTTP 狀態代碼為 200 作為成功的標誌。除了成功的狀態代碼，還有一些別的：

同步調用固然簡單，但使用異步調用才是我們真正常用的手段。使用異步調用的時候 ，需要觸發 readystatechange 事件，然後檢測 readyState 屬性即可。這個屬性有五個值：

使用 abort()方法可以取消異步請求，放在 send()方法之前會報錯。放在 responseText之前會得到一個空值。

二． GET 與 與 POST

在提供服務器請求的過程中，有兩種方式，分別是：GET 和 POST。在 Ajax 使用的過程中，GET 的使用頻率要比 POST 高。

在瞭解這兩種請求方式前，我們先了解一下 HTTP 頭部信息，包含服務器返回的響應頭信息和客戶端發送出去的請求頭信息。我們可以獲取響應頭信息或者設置請求頭信息。我們可以在 Firefox 瀏覽器的 firebug 查看這些信息。

我們只可以獲取服務器返回回來響應頭信息，無法獲取向服務器提交的請求頭信息，自然自定義的請求頭，在 JavaScript 端是無法獲取到的。

GET 請求

GET 請求是最常見的請求類型，最常用於向服務器查詢某些信息。必要時，可以將查詢字符串參數追加到 URL 的末尾，以便提交給服務器。

xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);

通過 URL 後的問號給服務器傳遞鍵值對數據，服務器接收到返回響應數據。特殊字符傳參產生的問題可以使用 encodeURIComponent()進行編碼處理，中文字符的返回及傳參，可以講頁面保存和設置為 utf-8 格式即可。

當沒有 encodeURIComponent()方法時，在一些特殊字符比如“&”，會出現錯誤導致無法獲取。

POST 請求

POST 請求可以包含非常多的數據，我們在使用表單提交的時候，很多就是使用的 POST傳輸方式。

xhr.open('post', 'demo.php', true);

而發送 POST 請求的數據，不會跟在 URL 的尾巴上，而是通過 send()方法向服務器提交數據。

xhr.send('name=Lee&age=100');

一般來說，向服務器發送 POST 請求由於解析機制的原因，需要進行特別的處理。因為POST 請求和 Web 表單提交是不同的，需要使用 XHR 來模仿表單提交。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

從性能上來講 POST 請求比 GET 請求消耗更多一些，用相同數據比較，GET 最多比 POST 快兩倍