ajax的工做原理

1、什麼是ajax

ajax是一種異步通訊技術。在ajax出現以前，客戶端與服務端之間直接通訊。引入ajax以後，客戶端與服務端加了一個第三者--ajax。有了ajax以後，經過在後臺與服務器進行少許數據交換，能夠達到在不刷新整個頁面的狀況下實現局部刷新。其原理如圖

2、XHR對象

ajax技術的核心是XMLHttpRequest對象(簡稱XHR)。IE7+、FireFox、Opera、Chrome和Safari都支持原生的XHR對象，建立XHR對象能夠這樣寫

var xhr = new XMLHttpRequest();

那若是要兼容IE六、7又該怎麼寫

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

所以兼容寫法以下

var xhr = '';
window.ActiveXObject ? xhr = new ActiveXObject('MSXML2,XMLHTTP') : xhr = new XMLHttpRequest();

3、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 }      

4、總結

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

1.建立XHR對象

2.調用open()方法建立請求

3.調用send()方法發送請求

4.onreadychange捕獲請求的狀態碼

5.判斷狀態嗎是否成功

6.調用ajax的responseText屬性返回數據

 1 //拼接路徑
 2 function toUrl(url, data) {
 3     //獲取時間戳
 4     var time = new Date().getTime();
 5     data.time = time;
 6     var arr = [];
 7     for(var i in data) {
 8         var str = i + "=" + data[i];
 9         //["user"='lili',"pass"="4564522",time="145486456"]
10         arr.push(str);
11     }
12     var str = arr.join("&"); //"user=lili&pass=4564522&time=145486456"
13     var path = url + "?" + str;
14     return path;
15 }
16 function fnAjax(obj) {
17     var data = obj.data||{};//可選，若是沒有data就新建一個
18     var path = toUrl(obj.url,data);
19     var sendType = obj.sendType||"get";
20     var succFn = obj.succFn||false;
21     var failFn = obj.failFn||false;
22     //一、建立一個XMLHttpRequest對象
23     //兼容寫法
24     if(window.ActiveXObject) {
25         var ajax = new ActiveXObject("MSXML2,XMLHTTP");//兼容IE六、7
26     } else {
27         var ajax = new XMLHttpRequest();//現代瀏覽器
28     }
29     //二、建立一個請求
30     var time = new Date().getTime();
31     //判斷傳送的類型
32     if (sendType=="get") {
33         ajax.open("get", path);
34         ajax.send(path);
35     }else{
36         var pathArr = path.split("?");
37         ajax.open("post", pathArr[0]);// pathArr[0]?以前的內容
38         //url = "test.txt?time=12365478"
39         //三、發送請求
40         //get方法傳輸的數據已經放到url中，能夠將參數設置爲null
41         ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
42         ajax.send(pathArr[1]);//pathArr[1]?以後的內容
43     }
44     //四、檢測請求的狀態
45     ajax.onreadystatechange = function() {
46         //若是ajax對象的準備狀態發生改變執行事件
47         //onreadystatechange事件是在readyState屬性發生改變時觸發的，
48         //readyState的值表示當前請求的狀態，在事件處理程序中能夠根據這個值來進行不一樣的處理。
49         //五、判斷請求的狀態
50         if(ajax.readyState == 4) {
51             //六、判斷請求結果
52             if(ajax.status >= 200 && ajax.status <= 207 || ajax.status == 304) {
53                 //七、請求成功拿到返回的結果
54                 if (succFn) {
55                     succFn(ajax.responseText);
56                 }
57             } else {
58                 if (failFn) {
59                     failFn(ajax.status);
60                 }                
61             }
62         }
63     }
64 }

View Code