/*ajax封裝

@param option:傳入一個對象

屬性分別為(順序可以打亂):

url:請求的路徑

type:請求的不同類型get或post

data:發送的數據,格式:key1=value1&key2=value2

callback:回調函數,方便用戶處理自己的數據,傳遞邏輯

*/

function ajax(option){

//創建異步對象

var xhr = new XMLHttpRequest();

//如果是get并且有數據

if(option.type=='get'&&option.data){

option.url=option.url+'?'+option.data;

}

//設置請求行

xhr.open(option.type,option.url);

//設置請求頭(post有數據發送才需要設置請求頭)

//判斷是否有數據發送

if(option.type=='post'&&option.data){

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

}

//注冊回調函數

xhr.onreadystatechange = function(){

if(xhr.readyState==4&&xhr.status==200){

//接收返回的數據類型

var type = xhr.getResponseHeader('Content-Type');

//json格式

if(type.indexOf('json')!=-1){

option.callback(JSON.parse(xhr.responseText));

}

//xml格式

else if(type.indexOf('xml')!=-1){

option.callback(xhr.responseXML);

}

//普通格式

else{

option.callback(xhr.responseText);

}

}

}

//發送請求主體

//判斷不同的請求類型

xhr.send(option.type=='post'?option.data:null);

}

總結

以上是生活随笔為你收集整理的原声ajax的函数式封装,原生 js 封装 ajax的两种方式（get,post）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。