javascript中Ajax的簡單封裝

 GET方式的在線：DEMO

 POST方式在線：DEMO

// 一、封裝AJAX函數
function nativeAjax(option,success,error){
    // 定義domain,方便環境切換
    var domain='https://' + window.location.host + '/';
    var url=domain+option.urlStr;
    var type=option.ajaxType;
    var data=option.ajaxData;
    var xhrRequest=null;
    if(window.XMLHttpRequest){
        xhrRequest = new XMLHttpRequest();
    } else {
        xhrRequest = new ActiveXObject('Microsoft.XMLHTTP')
    }
    var str="";
    xhrRequest.open(type,url,true);
    if(type==="POST"&&data!=null){
        xhrRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
        for(var key in data){
            str+='&'+key+'='+data[key];
        }
　　　　　str=str.slice(1);
    }else{
　　　　　str=null;
    }
    xhrRequest.onreadystatechange=function(){
        if(xhrRequest.readyState==4){
            if(xhrRequest.status==200){
                // 1.一、格式化返回的數據
                var responseData=JSON.parse(xhrRequest.responseText);
                // 1.二、這裏操做數據--------
                success(responseData);
            }else{
                // 1.三、沒成功返回HTTP狀態碼
                error(xhrRequest.status);
            }
        }
    }
    xhrRequest.send(str);
}
// 二、POST：定義請求參數
var postOption={
    ajaxType:"POST",
    urlStr:"v2/html/broke/get_broke_ranked_info",
    ajaxData:{                                        
        "HTTP_USER_TOKEN":token,
        "HTTP_USER_UID":pfid, 
        "anchor_pfid":anchor_pfid,
        "broke_pfid":pfid,
        "date":date
    }
}
// 三、調用AJAX
nativeAjax(postOption,function(data){
    // 3.一、請求成功回調
    console.log(data);
},function(error){
    // 3.二、請求失敗回調,返回HTTP狀態碼
    console.log(error);
});



//四、GET：定義請求參數
var getOption={
    ajaxType:"GET",    
    urlStr:"v2/html/broke/get_broke_ranked_info",
    ajaxData:null        
}
Ajax(getOption,function(data){
    // 成功函數
    console.log(data);
},function(error){
    // 失敗返回HTTP狀態碼
    console.log(error);

});
// 使用說明
// 1、option必須
option={
    //一、ajaxType必須："GET"或者"POST"
    ajaxType:"",
    //二、urlStr必須："string類型"
    urlStr:"",
    //三、必須：POST時候爲object{key:value}，GET的時候直接爲：null
    ajaxData:null
}
// 2、success請求成功回調必須
// 三：error請求失敗回調必須

 

其餘：

關於xhrRequest.readyState請參考MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState