原生JS封裝AJAX方法

//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();

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();
 }
 }
 }
}

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