Ajax的簡單封裝

親測POST和GET都可以正常使用，如果你有更好的建議請指出~

目前跟jquery的GET和POST一樣效果

一個GET方式的線上DEMO

'use strict';
// 1、封裝AJAX函數
function Ajax(option){
    // 定義domain,方便環境切換
    var domain='https://' + window.location.host + '/';
    var url=domain+option.urlStr;
    var type=option.ajaxType;
    var data=option.ajaxData;
    var xhrRequest=new XMLHttpRequest();
    var str=null;
    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);
        }
    }
    xhrRequest.onreadystatechange=function(){
        if(xhrRequest.readyState==4&&xhrRequest.status==200||xhrRequest.status==304){
            // 1、格式化返回的數據
            var responseData=JSON.parse(xhrRequest.responseText);
            console.log(responseData);
        }
    }
    xhrRequest.send(str);
}
// 2、POST：定義請求參數
var postOption={
    ajaxType:"POST",                                //必須："GET"/"POST"
    urlStr:"v2/html/broke/get_broke_ranked_info",    //必須："string類型"
    ajaxData:{                                        //必須：POST時候為object{key:value}，GET的時候直接為：null
        "HTTP_USER_TOKEN":token,
        "HTTP_USER_UID":pfid, 
        "anchor_pfid":anchor_pfid,
        "broke_pfid":pfid,
        "date":date
    }
}

Ajax(postOption);

//3、GET：定義請求參數
var getOption={
    ajaxType:"GET",                                    //必須：
    urlStr:"v2/html/broke/get_broke_ranked_info",    //必須：
    ajaxData:null                                    //必須：        
}
Ajax(getOption);

 其他：

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