ajax的理解與工作流程

標籤：資料交換   指派   sed   cti   並且   執行   發送請求   活動   opera   

一、什麼是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屬性返回資料

 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     //1、建立一個XMLHttpRequest對象23     //相容寫法24     if(window.ActiveXObject) {25         var ajax = new ActiveXObject("MSXML2,XMLHTTP");//相容IE6、726     } else {27         var ajax = new XMLHttpRequest();//現代瀏覽器28     }29     //2、建立一個請求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         //3、發送請求40         //get方法傳輸的資料已經放到url中，可以將參數設定為null41         ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");42         ajax.send(pathArr[1]);//pathArr[1]?之後的內容43     }44     //4、檢測請求的狀態45     ajax.onreadystatechange = function() {46         //如果ajax對象的準備狀態發生改變執行事件47         //onreadystatechange事件是在readyState屬性發生改變時觸發的，48         //readyState的值表示當前請求的狀態，在事件處理常式中可以根據這個值來進行不同的處理。49         //5、判斷請求的狀態50         if(ajax.readyState == 4) {51             //6、判斷請求結果52             if(ajax.status >= 200 && ajax.status <= 207 || ajax.status == 304) {53                 //7、請求成功拿到返回的結果54                 if (succFn) {55                     succFn(ajax.responseText);56                 }57             } else {58                 if (failFn) {59                     failFn(ajax.status);60                 }                61             }62         }63     }64 }

View Code

 

ajax的理解與工作流程