Ajax大家每天都在用，jquery庫對Ajax的封裝也很完善、很好用，下面我們看一下它的內部原理，並手動封裝一個自己的Ajax庫。
一、原理
原生Ajax的傳送需要四個步驟：
1) 建立Ajax物件: XMLHttpRequest
#2)設定請求參數: open(請求參數[get/post],url位址, 是否非同步[true/false] )
3) 設定回呼函數: onreadystateChange 用於處理傳回的資料
# 4) 發送請求: send()
//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();二、封裝
封裝的核心思想就是把需要動態變化的部分當成參數，不變的部分就留在那裡，在上面的程式碼中請求方式（get、post）、請求位址url、請求參數data、成功的回呼success、失敗回呼error等，這些參數都是動態變化的；而創建Ajax物件XMLHttprequest、事件監聽onreadystatechange等是固定的，所以第一步我們要確定好封裝的參數：
v url 請求位址
v data 請求資料
##v type 請求類型v success 成功回呼v error 失敗回呼v beforeSend 發送前呼叫return false 阻止發送v complete ajax請求成功的回調, 無論什麼時候都會執行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);
}
});以上是原生JS封裝AJAX方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
