ajax 是前端數據交互的重要知識,想做好數據交互就一定要對ajax深入理解.并且熟練運用.
在這里,封裝一下ajax 方便重用.

function json2url(json){
    json.t = Math.random();
    var arr = [];
    for(var name in json){
        arr.push(name+'='+encodeURIComponent(json[name]));
    }
    return arr.join('&');
}
//url,data,type,success,error
function ajax(json){
    if(!json.url){return;}
    json = json||{};
    json.type = json.type||'GET';
    json.data = json.data||{};
    json.timeout = json.timeout||10000;
    //1.創建對象
    if(window.XMLHttpRequest){
        //chrome FF
        var oAjax = new XMLHttpRequest();
    }else{
        //IE低版本 
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    switch(json.type.toLowerCase()){
        case 'get':
        //2.建立連接  //是否異步
        oAjax.open('GET',json.url+'?'+json2url(json.data),true);
        //3.發送
        oAjax.send();
        break;
        case 'post': 
        oAjax.open('POST',json.url,true);
        oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        oAjax.send(json2url(json.data));
        break;
    }
    json.loading&&json.loading();
    //超過json.timeout 后認為失敗 不在請求
    var timer = setTimeout(function(){
        json.error&&json.error();
        json.complete&&json.complete();
        oAjax.onreadystatechange = null;
    },json.timeout);
    
    //4.接收 
    //當網絡狀態改變的時候
    oAjax.onreadystatechange = function(){
        //網絡狀態
        if(oAjax.readyState == 4){
            //http狀態
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                //服務器返回的數據
                clearTimeout(timer);
                json.success&&json.success(oAjax.responseText); 
                json.complete&&json.complete();
            }else{
                clearTimeout(timer);
                json.error&&json.error(oAjax.status);
                json.complete&&json.complete();
            }
        }
    }; 
}

上面是一個比較完整的 ajax.js 用的時候 就可以引入這個函數 ,然后調用

ajax(json){
} 

json: 把參數以json的格式傳進去 就可以了.