Ajax大家每天都在用，jquery庫對Ajax的封裝也很完善、很好用，下麵我們看一下他的內部原理，並手動封裝一個自己的Ajax庫。

更多有關ajax封裝及數據處理，請參看上海尚學堂《Ajax中replace+Jq封裝的ajax》、《ajax+json數據處理》

一、原理

原生Ajax的發送需要四步：
1) 創建Ajax對象: XMLHttpRequest
2) 設置請求參數: open(請求參數[get/post],url地址, 是否非同步[true/false] )
3) 設置回調函數: onreadystateChange 用於處理返回的數據
4) 發送請求: send()

//TODO step1: 創建ajax對象
var xhr = new XMLHttpRequest();
 //TODO step2: 設置請求參數
xhr.open('get','01.php',true);
 //TODO step3: 設置回調
xhr.onreadystatechange = function () {
     //接收返回數據
    console.log(xhr.responseText);//responseText 用於接收後臺響應的文本
}
 //TODO step4: 發送請求
xhr.send();

二、封裝

封裝的核心思想就是把需要動態變化的部分當成參數，不變的部分就留在那裡，在上面的代碼中請求方式（get、post）、請求地址url、請求參數data、成功的回調success、失敗回調error等，這些參數都是動態變化的；而創建Ajax對象 XMLHttprequest、事件監聽onreadystatechange等是固定的，所以第一步我們要確定好封裝的參數：

一、封裝

封裝的核心思想就是把需要動態變化的部分當成參數，不變的部分就留在那裡，在上面的代碼中請求方式（get、post）、請求地址url、請求參數data、成功的回調success、失敗回調error等，這些參數都是動態變化的；而創建Ajax對象 XMLHttprequest、事件監聽onreadystatechange等是固定的，所以第一步我們要確定好封裝的參數：

#.  url  請求地址

#.  data 請求數據

#.  type 請求類型

#.  success 成功回調

#.  error 失敗回調

#. beforeSend 發送前調用 return false 阻止發送

#.  complete ajax請求成功的回調, 無論什麼時候都會執行

function ajax(option){
    //用戶配置option 預設配置init
    var init = {
        type:'get',
        async:true,
        url:'',
        success: function () { },
        error: function () { },
        data:{},
        beforeSend: function () {
            console.log('發送前...');
            return false;
        }
    };
    //TODO step1: 合併參數
    for(k in option){
        init[k] = option[k];
    }
    //TODO step2: 參數轉換
    var params = '';
    for(k in init.data){
        params += '&'+k+'='+init.data[k];
    }
    var xhr = new XMLHttpRequest();
    // type url
    //TODO step3: 區分get和post,進行傳參
    var url = init.url+'?__='+new Date().getTime();
    //TODO step4: 發送前
    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方法裡面傳參，而且需要這是請求頭setRequestHeader('content-type','application/x-www-

form-urlencoded')，所以封裝時要進行區分。

由於參數過多，用戶不需要每次都傳入很多參數，否則用起來會非常繁瑣。所以我們採取預設參數的形式，用戶不傳入就是用預設值，傳入就是用用戶的參數。

三、使用示例

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