一、什麼是ajax

ajax是一種非同步通訊技術。在ajax出現之前，客戶端與服務端之間直接通訊。引入ajax之後，客戶端與服務端加了一個第三者--ajax。有了ajax之後，通過在後臺與伺服器進行少量資料交換，可以達到在不重新整理整個頁面的情況下實現區域性重新整理。其原理如圖

二、XHR物件

ajax技術的核心是XMLHttpRequest物件(簡稱XHR)。IE7+、FireFox、Opera、Chrome和Safari都支援原生的XHR物件，建立XHR物件可以這樣寫

var xhr = new XMLHttpRequest();

那如果要相容IE6、7又該怎麼寫

var
 
 xhr = new ActiveXObject("MSXML2,XMLHTTP");

因此相容寫法如下

1 if(window.ActiveXObject) {
2     var xhr = new ActiveXObject("MSXML2,XMLHTTP");
3 } else {
4     var xhr = new XMLHttpRequest();
5 }

三、XHR用法

建立完XHR物件後，要呼叫open()方法建立請求，open()方法接受三個引數：

1.要傳送的請求的型別(如"get"、"post"等)

2.請求的URL

3.表示是否非同步傳送請求的布林值(預設為true，表示非同步)

xhr.open("get","index.php",true);

post()請求方法如下面程式碼

xhr.open("get","index.php",true);
//post()方法必須在send()方法之前加上下面這段程式碼
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

說明一點：URL相對於執行程式碼的當前頁面，也可以用絕對路徑

準備工作做好後，呼叫send()方法傳送請求，

xhr.send(null);

這裡get方法傳輸的資料已經放到url中，可以將引數設定為null

在呼叫send()方法後，請求就會被分派到伺服器，onreadychange捕獲請求的狀態碼，並進行檢測

onreadychange物件有個readyState屬性，該屬性的值表示當前的活動階段，其值有如下幾個：

0：未初始化。尚未呼叫open()方法

1：啟動。已經呼叫open()方法，但尚未呼叫send()方法

2：傳送。已經呼叫send()方法，但尚未接收到響應

3：接收。已經接受到部分響應資料

4：完成。已經接受到全部響應資料，並且可以在客戶端使用

我們只需判斷readyState的值是否為4就可以知道所有資料已經就緒。

 1 xhr.onreadystatechange = function(){
 2     if (xhr.readyState==4) {
 3         //判斷狀態碼是否成功
 4         if (xhr.status>=200&&xhr.status<=207||xhr.status==304) {
 5             //呼叫ajax的responseText屬性返回資料
 6             alert(xhr.responseText);
 7         }else{
 8             alert(xhr.status);
 9     }  
10 }      

四、總結

原生ajax的請求總結為一下六個步驟

1.建立XHR物件

2.呼叫open()方法建立請求

3.呼叫send()方法傳送請求

4.onreadychange捕獲請求的狀態碼

5.判斷狀態嗎是否成功

6.呼叫ajax的responseText屬性返回資料