Ajax大家每天都在用，jquery庫對Ajax的封裝也很完善、很好用，下面我們看一下它的內(nèi)部原理，并手動(dòng)封裝一個(gè)自己的Ajax庫。

一、原理

原生Ajax的發(fā)送需要四步：

1) 創(chuàng)建Ajax對象: XMLHttpRequest

2) 設(shè)置請求參數(shù): open(請求參數(shù)[get/post],url地址, 是否異步[true/false] )

3) 設(shè)置回調(diào)函數(shù): onreadystateChange 用于處理返回的數(shù)據(jù)

4) 發(fā)送請求: send()

//TODO step1: 創(chuàng)建ajax對象 var xhr = new XMLHttpRequest(); //TODO step2: 設(shè)置請求參數(shù) xhr.open('get','01.php',true); //TODO step3: 設(shè)置回調(diào) xhr.onreadystatechange = function () {     //接收返回?cái)?shù)據(jù)     console.log(xhr.responseText);//responseText 用于接收后臺(tái)響應(yīng)的文本 } //TODO step4: 發(fā)送請求 xhr.send();

二、封裝

封裝的核心思想就是把需要?jiǎng)討B(tài)變化的部分當(dāng)成參數(shù)，不變的部分就留在那里，在上面的代碼中請求方式（get、post）、請求地址url、請求參數(shù)data、成功的回調(diào)success、失敗回調(diào)error等，這些參數(shù)都是動(dòng)態(tài)變化的；而創(chuàng)建Ajax對象 XMLHttprequest、事件監(jiān)聽onreadystatechange等是固定的，所以第一步我們要確定好封裝的參數(shù)：

v url 請求地址

v data 請求數(shù)據(jù)

v type 請求類型

v success 成功回調(diào)

v error 失敗回調(diào)

v beforeSend 發(fā)送前調(diào)用 return false 阻止發(fā)送

v complete ajax請求成功的回調(diào), 無論什么時(shí)候都會(huì)執(zhí)行

function ajax(option){     //用戶配置option 默認(rèn)配置init     var init = {         type:'get',         async:true,         url:'',         success: function () { },         error: function () { },         data:{},         beforeSend: function () {             console.log('發(fā)送前...');             return false;         }     };     //TODO step1: 合并參數(shù)     for(k in option){         init[k] = option[k];     }     //TODO step2: 參數(shù)轉(zhuǎn)換     var params = '';     for(k in init.data){         params += '&'+k+'='+init.data[k];     }     var xhr = new XMLHttpRequest();     // type url     //TODO step3: 區(qū)分get和post,進(jìn)行傳參     var url = init.url+'?__='+new Date().getTime();     //TODO step4: 發(fā)送前     var flag = init.beforeSend();     if(!flag){         return;     }     if(init.type.toLowerCase() == 'get'){         url += params;         xhr.open(init.type,url,init.async);         xhr.send();     }else{         xhr.open(init.type,url,init.async);       xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');         xhr.send(params.substr(1));     }     xhr.onreadystatechange = function () {         if(xhr.readyState == 4){             if(xhr.status == 200){                 init.success(xhr.responseText);             }else{                 //error                 init.error();             }         }     } }

這里我們要注意的是get和post的傳參方式位置不一樣，get請求需要直接拼接在url地址后邊，post請求需要在send方法里面?zhèn)鲄?，而且需要這是請求頭setRequestHeader('content-type','application/x-www-form-urlencoded')，所以封裝時(shí)要進(jìn)行區(qū)分。

由于參數(shù)過多，用戶不需要每次都傳入很多參數(shù)，否則用起來會(huì)非常繁瑣。所以我們采取默認(rèn)參數(shù)的形式，用戶不傳入就是用默認(rèn)值，傳入就是用用戶的參數(shù)。

三、使用示例

ajax({     url: 'test.json',     data:{test:123,age:456},     //type:'post',     success: function (res) {         console.log(res);     } });