同步調用固然簡單，但使用非同步呼叫才是我們真正常用的手段。使用非同步呼叫的時候，需要觸發readystatechange事件，然後檢測readyState屬性即可。這個屬性有五個值：
| 值 |
狀態 |
說明 |
| 0 |
未初始化 |
尚未調用open()方法 |
| 1 |
啟動 |
已經調用open()方法，但尚未調用send()方法 |
| 2 |
發送 |
已經調用send()方法，但尚未接受響應 |
| 3 |
接受 |
已經接受到部分響應資料 |
| 4 |
完成 |
已經接受到全部響應資料，而且可以使用 |
addEvent(document, 'click', function () {
var xhr = new createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('資料返回失敗！狀態碼：' + xhr.status + '狀態資訊：'
+ xhr.statusText);
}
}
};
xhr.open('get', 'demo.php?rand=' + Math.random(), true);
xhr.send(null);
});
PS：使用abort()方法可以取消非同步請求，放在send()方法之前會報錯。放在responseText之前會得到一個空值。
一．GET與POST
在提供伺服器請求的過程中，有兩種方式，分別是：GET和POST。在Ajax使用的過程中，GET的使用頻率要比POST高。
在瞭解這兩種請求方式前，我們先瞭解一下HTTP頭部資訊，包含伺服器返回的回應標頭資訊和用戶端發送出去的要求標頭資訊。我們可以擷取回應標頭資訊或者佈建要求頭資訊。我們可以在Firefox瀏覽器的firebug查看這些資訊。
//使用getResponseHeader()擷取單個回應標頭資訊
alert(xhr.getResponseHeader('Content-Type'));
//使用getAllResponseHeaders()擷取整個回應標頭資訊
alert(xhr.getAllResponseHeaders());
//使用setRequestHeader()設定單個要求標頭資訊
xhr.setRequestHeader('MyHeader', 'Lee'); //放在open方法之後，send方法之前
PS：我們只可以擷取伺服器返回回來回應標頭資訊，無法擷取向伺服器提交的要求標頭資訊，自然自訂的要求標頭，在JavaScript端是無法擷取到的。
GET請求
GET請求是最常見的請求類型，最常用於向伺服器查詢某些資訊。必要時，可以將查詢字串參數追加到URL的末尾，以便提交給伺服器。
xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);
通過URL後的問號給伺服器傳遞索引值對資料，伺服器接收到返迴響應資料。特殊字元傳參產生的問題可以使用encodeURIComponent()進行編碼處理，中文字元的返回及傳參，可以講頁面儲存和設定為utf-8格式即可。
//一個通用的URL提交函數
function addURLParam(url, name, value) {
url += (url.indexOf('?') == -1 ? '?' : '&'); //判斷的url是否有已有參數
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
alert(url);
return url;
}
PS：當沒有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');
PS：從效能上來講POST請求比GET請求消耗更多一些，用相同資料比較，GET最多比POST快兩倍。
JSON也可以使用Ajax來回調訪問。
var url = 'demo.json?rand=' + Math.random();
var box = JSON.parse(xhr.responseText);
