如何封裝一個(gè)Ajax函數(shù)
如何封裝Ajax函數(shù)
一個(gè)Ajax函數(shù):
// 一個(gè)Ajax函數(shù)
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest;
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","https://jsonplaceholder.typicode.com/users");
xhr.send(null);
xhr.onreadystatechange = function(){
if(this.readyState === 4){
console.log(xhr.responseText)
}
}
封裝自己的 Ajax 函數(shù)
參數(shù)1:{string} 請求方法--method
參數(shù)2:{string} 請求地址--url
參數(shù)3:{object} 請求參數(shù)--params
參數(shù)4:{function} 請求完成后,執(zhí)行的回調(diào)函數(shù)--done
function ajax(method,url,params,done){
// 統(tǒng)一將method方法中的字母轉(zhuǎn)成大寫,后面判斷GET方法時(shí) 就簡單點(diǎn)
method = method.toUpperCase();
//IE6的兼容
var xhr = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
//創(chuàng)建打開一個(gè)連接 open
//將對(duì)象格式的參數(shù)轉(zhuǎn)為urlencoded模式
//新建一個(gè)數(shù)組,使用for循環(huán),將對(duì)象格式的參數(shù),
//以(id = 1)的形式,每一個(gè)鍵值對(duì)用 & 符號(hào)連接
var pairs = [];
for(var k in params){
pairs.push(k + "=" + params[k]);
}
var str = pairs.join("&");
//判斷是否是get方法 , get方法的話,需要更改url的值
if(method == "GET"){
url += "?" + str;
}
//創(chuàng)建打開一個(gè)連接
xhr.open(method,url);
var data = null;
if(method == "POST"){
//post方法 還需要設(shè)置請求頭、請求體
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
data = str;
}
xhr.send(data);
//執(zhí)行回調(diào)函數(shù)
xhr.onreadystatechange = function(){
if(this.readyState == 4) {
done(JSON.parse(this.responseText));
}return;
// 執(zhí)行外部傳進(jìn)來的回調(diào)函數(shù)即可
// 需要用到響應(yīng)體
}
}
//調(diào)用函數(shù)
//get方法
// ajax("GET","http://localhost:3000/users",
// {"id":1},
// function(data){
// console.log(data);
// });
//post方法
ajax("POST", "http://localhost:3000/users",
{ "name": "lucky","class":2,"age":20 },
function (data) {
console.log(data);
});
以上就是如何封裝一個(gè)Ajax函數(shù)的詳細(xì)內(nèi)容,更多關(guān)于封裝Ajax函數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
簡單實(shí)體類和xml文件的相互轉(zhuǎn)換方法
下面小編就為大家?guī)硪黄唵螌?shí)體類和xml文件的相互轉(zhuǎn)換方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
前端實(shí)現(xiàn)滑動(dòng)按鈕AJAX與后端交互的示例代碼
這篇文章主要介紹了前端實(shí)現(xiàn)滑動(dòng)按鈕AJAX與后端交互的示例代碼,前端代碼分為html代碼和css代碼,通過js事件觸發(fā),代碼簡單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2022-02-02
Ajax獲取到數(shù)據(jù)放入echarts里不顯示的原因分析及解決辦法
在做一個(gè)需要用到echarts地圖的項(xiàng)目的時(shí)候,成功通過ajax獲取到了后臺(tái)提供的數(shù)據(jù),并生成了想要的JSON串。但是,放到echarts option.series[0].data里,獲取不到數(shù)據(jù)。在生成的地圖上無法看到你從后臺(tái)獲取到的值,下面小編給大家分享我的解決辦法,需要的朋友參考下2016-01-01
Ajax請求二進(jìn)制流進(jìn)行處理(ajax異步下載文件)的簡單方法
最近做項(xiàng)目遇到這樣的需求:管理后臺(tái)需要隨時(shí)下載數(shù)據(jù)報(bào)表,數(shù)據(jù)要實(shí)時(shí)生成后轉(zhuǎn)換為excel下載。怎么解決這個(gè)問題呢?下面小編給大家分享Ajax請求二進(jìn)制流進(jìn)行處理(ajax異步下載文件)的簡單方法,一起看看吧2017-09-09
history保存列表頁ajax請求的狀態(tài)使用示例詳解
這篇文章主要為大家介紹了history保存列表頁ajax請求的狀態(tài)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12

