如何封裝一個Ajax函數(shù)
更新時間:2021年05月06日 16:50:53 作者:小白可別不舉鐵
這篇文章主要介紹了如何封裝一個Ajax函數(shù),幫助大家更好的理解和學(xué)習(xí)網(wǎng)絡(luò)編程,感興趣的朋友可以了解下
如何封裝Ajax函數(shù)
一個Ajax函數(shù):
// 一個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方法時 就簡單點 method = method.toUpperCase(); //IE6的兼容 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //創(chuàng)建打開一個連接 open //將對象格式的參數(shù)轉(zhuǎn)為urlencoded模式 //新建一個數(shù)組,使用for循環(huán),將對象格式的參數(shù), //以(id = 1)的形式,每一個鍵值對用 & 符號連接 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)建打開一個連接 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í)行外部傳進來的回調(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); });
以上就是如何封裝一個Ajax函數(shù)的詳細內(nèi)容,更多關(guān)于封裝Ajax函數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Ajax獲取到數(shù)據(jù)放入echarts里不顯示的原因分析及解決辦法
在做一個需要用到echarts地圖的項目的時候,成功通過ajax獲取到了后臺提供的數(shù)據(jù),并生成了想要的JSON串。但是,放到echarts option.series[0].data里,獲取不到數(shù)據(jù)。在生成的地圖上無法看到你從后臺獲取到的值,下面小編給大家分享我的解決辦法,需要的朋友參考下2016-01-01Ajax請求二進制流進行處理(ajax異步下載文件)的簡單方法
最近做項目遇到這樣的需求:管理后臺需要隨時下載數(shù)據(jù)報表,數(shù)據(jù)要實時生成后轉(zhuǎn)換為excel下載。怎么解決這個問題呢?下面小編給大家分享Ajax請求二進制流進行處理(ajax異步下載文件)的簡單方法,一起看看吧2017-09-09history保存列表頁ajax請求的狀態(tài)使用示例詳解
這篇文章主要為大家介紹了history保存列表頁ajax請求的狀態(tài)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12