上節講了ajax的作用好處即流程為的就是去封裝ajax，那......那該怎麽封裝ajax呢？？？？？？？

封裝方法，傳參是個很大的問題！在這裏，我們應該傳幾個參數呢？

　　首先我們肯定要傳一個請求方式get或post（method），然而json數據也是必不可少的，其次就是需要傳入一個URL路徑了，在者就需要一個成功的回調和一個失敗的回調了；

　　如上所示，參數分為（method， json， url， success， error）；

參數知道了，ajax流程也有了，那我們就開始封裝吧！

　　首先創建一個ajax對象，然後再定義一個空的字符串。因為傳入的method包含兩種請求方式，所以要判斷是get還是post。然後再將json數據進行遍歷，且將所有的哈希值進行拼接；再截取前面的&符，將url進行拼接，緊接著就是open打開和send提交了。註：get和post請求方式的區別還在於post要設置請求頭而get不用。

function ajax(method,url,json,success,error){
    //創建ajax對象
    var xml = new XMLHttpRequest()||new ActiveXObject("Microsoft,XMLHTTP");
    //定義一個空的字符串
    var str = "";
    //如果是get方式
    if(method == "get"){
        //將所有哈希值進行拼接
        for(var key in json){
            str+="&"+key+"="+json[key];
        }
        
 
//截取前面的&符
        str = str.substr(1);
        //url進行拼接
        url = url+"?"+str;
    
        xml.open("get",url,true);

        xml.send();
    }else{

        //將所有哈希值進行拼接
        for(var key in json){
            str+="&"+key+"="+json[key];
        }
        //截取前面的&符
        str = str.substr(1
 
);

        xml.open("post",url,true);

        //設置請求頭
        xml.setRequestHeader("content-type","application/x-www-form-urlencoded");

        xml.send(str);
    }
}

　　還記得ajax流程最後一步是啥麽？沒錯，就是監聽服務器的狀態。但是該怎麽監聽呢？首先就是判斷建立連接的狀態是否完成（4）並且服務器是否請求成功（200）；然後在判斷後臺數據給的自否是字符串，如果不是我們則將它轉換成字符串（JSON.parse( ) ）；在其之後如果第一個判斷為true的話如果成功的回調存在的話則執行成功的回調，如果為false的話有失敗的回調則執行失敗的回調。代碼如下：

//監聽服務器狀態
xml.onreadystatechange = function(){
    //建立連接狀態 ----------狀態碼
    if(xml.readyState == 4 && xml.status == 200){

        //後臺數據給的自否是字符串 JSON.parse() 
        var data = xml.responseText;

        if(typeof data !="object"){
            data = JSON.parse(data);
        }

        //成功的回調
        success&&success(data);
    }else{

        //失敗的回調
        error&&error(xml.status);
    }
}

　　看吧，ajax就這樣封裝好啦，快去試試吧。略略略.......

function ajax(method,url,json,success,error){
    var xml = new XMLHttpRequest()||new ActiveXObject("Microsoft,XMLHTTP");
    var str = "";
    if(method == "get"){
        for(var key in json){
            str+="&"+key+"="+json[key];
        }
        str = str.substr(1);
        url = url+"?"+str;    
        xml.open("get",url,true);
        xml.send();
    }else{
        for(var key in json){
            str+="&"+key+"="+json[key];
        }
        str = str.substr(1);
        xml.open("post",url,true);
        xml.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xml.send(str);
    }
    xml.onreadystatechange = function(){
        if(xml.readyState == 4 && xml.status == 200){
            var data = xml.responseText;
            if(typeof data !="object"){
                data = JSON.parse(data);
            }
            success&&success(data);
        }else{
            error&&error(xml.status);
        }
    }
}

　　不用感謝我，因為我是八寶山喊麥王，嘻嘻。

js之ajax的封裝