溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹ajax函數封裝的基本實現方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
前面一篇文章講了ajax的原理，作用和實現。但是都只是實現一個ajax請求響應操作，瀏覽器和服務器之間請求響應不會只有一次，加入請求響應100次，那么要寫100次近似的代碼嗎？
這篇文章就是解決如何發送多個ajax的問題。如果你對ajax沒有了解，我的上一篇文章《認識ajax》用心看完，大約5分鐘就可以get到這篇文章內容。
這篇文章其實就是講了一個函數。接下來一起來看看吧。
發送多個請求的操作都是相同的，如果寫多個就會有重復的代碼。避免代碼冗余就可以借助函數的思想，將ajax操作的代碼封裝到一個函數中，不同的請求函數傳遞的參數所有不同。如果要多次發送ajax請求的時候，就調用我們封裝好的函數就好了。
前面說用函數封裝ajax，那么ajax實現的四步放到函數中，然后調用這個函數，因為傳遞的參數比較多，所以參數用一個對象options來表示。這個對象里面包括請求方式，請求地址，請求發送成功后觸發的請求處理函數。
我么看看下面的例子。代碼中將ajax操作封裝到ajax函數中，調用ajax函數，傳入參數，xht下的onload事件觸發后，調用了sunccess函數，將相應內容xhr.responsetext打印到控制臺中。
function ajax(options) {
var xhr = new XMLHttpRequest();
xhr.open(options.type, options.url);
xhr.send();
xhr.onload = function () {
options.success(xhr.responsetext);
}
}
ajax({
type: 'get',
url: 'http://www.example.com',
success: function (data) {
console.log(data);
}
})復制代碼上面代碼實現了基本的封裝，接下來講一講如何對請求參數進行封裝，上一篇文章中介紹了post方法和get方法這兩種方法發送請求，不同的請求方式請求參數也是放置在不同的位置的，比如get方法拼接在url后，post方法放在send方法里面。我們在ajax方法的實參對象中加一個data屬性，data屬性值就是請求參數。
在ajax這個函數中利用for-in循環拼接請求參數，將請求參數多余的的&去掉。后然對請求類型做出判斷，如果是get請求就把剛剛拼接好的params拼接到url后面；如果是post請求將參數放到send方法中，并使用xhr對象下的setRequestHeader方法設置請求參數格式的類型。
代碼如下：
var xhr = new XMLHttpRequest();
// 拼接請求參數的變量
var params = '';
// 循環用戶傳遞進來的對象格式參數 for (var attr in options.data) {
// 將參數轉換為字符串格式
params += attr + '=' + options.data[attr] + '&';
}
// 將參數最后面的&截取掉
// 將截取的結果重新賦值給params變量
params = params.substr(0, params.length - 1);
// 判斷請求方式 if (options.type == 'get') {
options.url = options.url + '?' + params;
}
// 配置ajax對象
xhr.open(options.type,options.url);
// 如果請求方式為post if (options.type == 'post') {
// 設置請求參數格式的類型
xhr.setRequestHeader('Content-Type', contentType);
// 向服務器端傳遞請求參數
xhr.send(params);
}else {
// 發送請求
xhr.send();
}
xhr.onload = function () {
options.success(xhr.responsetext);
}
ajax({
type: 'get',
url: 'http://www.example.com',
data: {
name:'linglong',
age:20
},
success: function (data) {
console.log(data);
}
})復制代碼進過前面兩個熱身后直接看ajax封裝的最后版本。 終極版封裝解決了以下幾個問題。
這是終極版的代碼，代碼后面會有針對性的解釋。
var defaults = { type: 'get',
url: '',
data: {},
header: { 'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 使用options對象中的屬性覆蓋defaults對象中的屬性
Object.assign(defaults, options);復制代碼補充:Object.assign方法
這里舉個代碼，夠應付這篇文章，具體深入的還是看官方文檔
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }復制代碼 // 創建ajax對象
var xhr = new XMLHttpRequest();
// 拼接請求參數的變量
var params = '';
// 循環用戶傳遞進來的對象格式參數 for (var attr in defaults.data) {
// 將參數轉換為字符串格式
params += attr + '=' + defaults.data[attr] + '&';
}
// 將參數最后面的&截取掉
// 將截取的結果重新賦值給params變量
params = params.substr(0, params.length - 1);復制代碼 if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
// 配置ajax對象
xhr.open(defaults.type, defaults.url);
// 如果請求方式為post if (defaults.type == 'post') {
// 用戶希望的向服務器端傳遞的請求參數的類型
var contentType = defaults.header['Content-Type']
// 設置請求參數格式的類型
xhr.setRequestHeader('Content-Type', contentType);
// 判斷用戶希望的請求參數格式的類型
// 如果類型為json if (contentType == 'application/json') {
// 向服務器端傳遞json數據格式的參數
xhr.send(JSON.stringify(defaults.data))
}else {
// 向服務器端傳遞普通類型的請求參數
xhr.send(params);
}
}else {
// 發送請求
xhr.send();
}復制代碼4.當請求發送成功，就會觸發onload事件，執行函數。我們要對服務器響應的數據進行格式判斷，用getResponseHeader方法獲取響應頭的數據，Content-Type是響應頭的屬性名稱。如果響應頭中包含application/json這個字符，就說明響應的是json對象，但是傳輸的時候是字符串形式傳輸，所以用json下的parse方法轉字符串為對象。 如果http的狀態碼是200就說明客戶端發來的請求在服務器端得到了正確的處理。調用success函數，否則調用錯伏處理函數。
xhr.onload = function () {
// xhr.getResponseHeader()
// 獲取響應頭中的數據
var contentType = xhr.getResponseHeader('Content-Type');
// 服務器端返回的數據
var responseText = xhr.responseText;
// 如果響應類型中包含applicaition/json if (contentType.includes('application/json')) {
// 將json字符串轉換為json對象
responseText = JSON.parse(responseText)
}
// 當http狀態碼等于200的時候 if (xhr.status == 200) {
// 請求成功 調用處理成功情況的函數
defaults.success(responseText, xhr);
}else {
// 請求失敗 調用處理失敗情況的函數
defaults.error(responseText, xhr);
}
}
}復制代碼完整的封裝代碼貼出來，如下所示：
<script type="text/javascript"> function ajax (options) {
// 存儲的是默認值
var defaults = { type: 'get',
url: '',
data: {},
header: { 'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 使用options對象中的屬性覆蓋defaults對象中的屬性
Object.assign(defaults, options);
// 創建ajax對象
var xhr = new XMLHttpRequest();
// 拼接請求參數的變量
var params = '';
// 循環用戶傳遞進來的對象格式參數 for (var attr in defaults.data) {
// 將參數轉換為字符串格式
params += attr + '=' + defaults.data[attr] + '&';
}
// 將參數最后面的&截取掉
// 將截取的結果重新賦值給params變量
params = params.substr(0, params.length - 1);
// 判斷請求方式 if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
// 配置ajax對象
xhr.open(defaults.type, defaults.url);
// 如果請求方式為post if (defaults.type == 'post') {
// 用戶希望的向服務器端傳遞的請求參數的類型
var contentType = defaults.header['Content-Type']
// 設置請求參數格式的類型
xhr.setRequestHeader('Content-Type', contentType);
// 判斷用戶希望的請求參數格式的類型
// 如果類型為json if (contentType == 'application/json') {
// 向服務器端傳遞json數據格式的參數
xhr.send(JSON.stringify(defaults.data))
}else {
// 向服務器端傳遞普通類型的請求參數
xhr.send(params);
}
}else {
// 發送請求
xhr.send();
}
// 監聽xhr對象下面的onload事件
// 當xhr對象接收完響應數據后觸發
xhr.onload = function () {
// xhr.getResponseHeader()
// 獲取響應頭中的數據
var contentType = xhr.getResponseHeader('Content-Type');
// 服務器端返回的數據
var responseText = xhr.responseText;
// 如果響應類型中包含applicaition/json if (contentType.includes('application/json')) {
// 將json字符串轉換為json對象
responseText = JSON.parse(responseText)
}
// 當http狀態碼等于200的時候 if (xhr.status == 200) {
// 請求成功 調用處理成功情況的函數
defaults.success(responseText, xhr);
}else {
// 請求失敗 調用處理失敗情況的函數
defaults.error(responseText, xhr);
}
}
}
ajax({ type: 'post',
// 請求地址
url: 'http://localhost:3000/responseData',
success: function (data) {
console.log('這里是success函數');
console.log(data)
}
})
</script>復制代碼以上是ajax函數封裝的基本實現方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
