封裝的一般套路
- 使用全局代碼寫一個比較完整的用例
- 然后寫一個空函數(shù)，沒有形參忌警，沒有返回值脏毯，將這個完整地放到這個空函數(shù)中
- 最后根據(jù)使用過程中的需求（即需要變更的數(shù)據(jù)）抽象參數(shù)
統(tǒng)一管理接口url
var RequestTheAddress = {
session: "http://127.0.0.1:89/session",
client : "http://127.0.0.1:89/client",
// ...
};
AJAX封裝
// params = null, 這是 ES6 中的語法杆逗，即默認參數(shù)，
// 也就是：當這里沒有參數(shù)傳遞進來的話站宗，就默認為 null,有參數(shù)傳遞進來的話，就使用參數(shù)
function _ajax(method, url, params = null, done) {
// 統(tǒng)一將方法轉(zhuǎn)換為小寫,因為調(diào)用益愈，這樣調(diào)用ajax()函數(shù)時 method 寫大小寫都可以
method = method.toLowerCase();
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsot XMLHTTP");
// 將 object 類型的數(shù)據(jù)轉(zhuǎn)換為 uuid=hsz-01&id=1 這種形式的字符串
if (typeof params === 'object') {
let tempArr = [];
for (let key in params) {
let value = params[key];
// 將元素一個一個的放進這個空數(shù)組中
tempArr.push(key + '=' + value);
}
//console.log(tempArr);
// join()方法：把數(shù)組中的所有元素放入一個字符串梢灭，并通過指定參數(shù)進行元素之間的分隔
params = tempArr.join('&');
console.log(params);
}
// 當使用 get 方法傳遞參數(shù)，應(yīng)該通過 url 傳遞參數(shù)
if (method === 'get') {
url += '?' + params;
}
xhr.open(method, url);
// 當使用 post 方法時蒸其，要設(shè)置響應(yīng)頭(當傳遞參數(shù)為 urlencoded 形式時)
// urlencoded 形式： uuid=hsz-01&id=1
if (method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
xhr.send(params);
xhr.addEventListener('readystatechange', function () {
console.log(this.readyState);
if (this.readyState !== 4) return;
// 不應(yīng)該在封裝的函數(shù)中主觀的處理響應(yīng)結(jié)果
console.log(this.responseText);
// 無法在內(nèi)部包含的函數(shù)中通過 return 的方式將返回值返回出去
// return this.responseText
// 這里使用了回調(diào)函數(shù)敏释，
// 執(zhí)行調(diào)用者
return done(JSON.parse(this.responseText));
return
});
}
AJAX調(diào)用
let ondone = function (res) {
console.log('回調(diào)開始');
console.log(res);
/*
{resCode: 0
resData: { session: '82c8638b-30c7-3060-95e4-efabbfc411db' }
resMsg: "session已傳遞"}
*/
console.log('回調(diào)結(jié)束');
if (res.resCode !== 0) {
return layui.layer.msg(res.resMsg, { icon: 5, time: 2000, shift: 6 });
}
window.sessionStorage.setItem('session', res.resData.session)
lastname = sessionStorage.getItem("session");
}
AJAX測試
_ajax('get', RequestTheAddress.session, {}, ondone)
