使用原生js封裝Ajax函數

對與原生Ajax的封裝，依然須要遵循請求的四個步驟：

　　1) 建立XMLHttpRequest對象;

　　2) 監聽onreadstatechange函數;

　　3) 使用open函數添加參數;

　　4) 使用send函數發送請求；

首先，封裝建立XHR的函數

 1 /**
 2  * createXHR()
 3  * 建立XHR兼容對象
 4  */
 5 function createXHR() {
 6     if (typeof XMLHttpRequest ！== ‘undefined’) {
 7         return new XMLHttpRequest();
 8     }   else if (typeof ActiveXObject !== 'undefined') {
 9         var version = [
10             'MSXML2.XMLHttp.6.0',
11             'MSXML2.XMLHttp.3.0',
12             'MSXML2.XMLHttp'
13         ];
14         for (var i = 0; i < version.length; i++) {
15             try {
16                 return new ActiveXObject(version[i]);
17             } catch(e) {
18                 console.log(e);
19             }
20         }
21     } else {
22         throw new Error('您的系統或者瀏覽器不支持XHR對象！');
23     }
24 }  

封裝數據處理函數

 1 /**
 2  * params(data)
 3  * 處理數據，ajax以參數的形式傳遞數據
 4  * @ param {any} data  對象形式的數據源
 5  * @ return string 處理完成的數據，字符串
 6  */
 7 function params(data){
 8     var arr = [];
 9     for(var i in data){
10         arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
11     }
12     return arr.join("&");
13 }

開封裝Aja函數

 1 /**
 2  * my_ajax(obj)
 3  * 原生封裝的Ajax函數
 4  * @ param {any} obj 調用數須要傳入的一系列參數，如：url，data等
 5  * @ return null
 6  */
 7 function my_ajax(obj) {
 8     var xhr = createXHR();
 9     obj.url = obj.url + "?rand=" + Math.random(); // 清除緩存,如須要使用緩存數據，能夠不寫
10     obj.data = params(obj.data);      // 轉義字符串
11     if(obj.method === "get"){      // 判斷使用的是不是get方式發送
12         obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
13     }
14     // 異步
15     if(obj.async === true){
16         // 異步的時候須要觸發onreadystatechange事件
17         xhr.onreadystatechange = function(){
18             // 執行完成
19             if(xhr.readyState == 4){
20                 callBack();
21             }
22         }
23     }
24     xhr.open(obj.method,obj.url,obj.async);  // false是同步 true是異步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
25     if(obj.method === "post"){
26         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
27         xhr.send(obj.data);
28     }else{
29         xhr.send(null);
30     }
31     // xhr.abort(); // 取消異步請求
32     // 同步
33     if(obj.async === false){
34         callBack();
35     }
36     // 返回數據
37     function callBack(){
38         // 判斷是否返回正確
39         if(xhr.status == 200){
40             obj.success(xhr.responseText);
41         }else{
42             obj.Error("獲取數據失敗，錯誤代號爲："+xhr.status+"錯誤信息爲："+xhr.statusText);
43         }
44     }
45 }

至此，整個與原生的ajax就已經等裝好了，下面調用如下：

 1 // 調用本身等裝好的my_ajax函數
 2 // 當點擊頁面時，請求就會發出去；
 3 var html = document.getElementsByTagName("html")[0];
 4 html.onclick = function(){
 5     my_ajax({
 6         "method" : "post",
 7         "url" : "demo.php",
 8         "data" : {
 9             "name" : "gao",
10             "age" : 100,
11             "num" : "12346&598"
12         },
13         "success" : function(data){
14             console.log(data);
15         },
16         "Error" : function(text){
17             console.log(text);
18         },
19         "async" : true //是否異步
20     });
21 }