1. 要實現(xiàn)的效果
// <!-- 1.導(dǎo)入自定義的ajax函數(shù) -->
<script src="./js/itheima.js"></script>
<script>
// 調(diào)用自定義的 myAjax 函數(shù)纷铣，發(fā)起ajax函數(shù)請求
myAjax({
method: '請求類型',
url: '請求地址',
data: {
// '請求參數(shù)對象'
},
success: function (res) { // 成功的回調(diào)函數(shù)
console.log(res) // 打印數(shù)據(jù)
}
})
</script>
2. 定義options參數(shù)選項
myAjax() 函數(shù)是我們自定義的 Ajax 函數(shù)篙顺，它接收一個配置對象作為參數(shù)把敢，配置對象中可以配置如下屬性：
- method 請求的類型
- url 請求的 URL 地址
- data 請求攜帶的數(shù)據(jù)
- success 請求成功之后的回調(diào)函數(shù)
3 .處理data參數(shù)
需要把 data 對象橘荠，轉(zhuǎn)化成查詢字符串的格式妈踊，從而提交給服務(wù)器扣汪，因此提前定義 resolveData 函數(shù)如下：
/**
*
* @param {*} data 將對象轉(zhuǎn)成查詢字符串
* username=張三&age=20
*/
// 將對象轉(zhuǎn)為查詢字符串
function resolveData(data) {
var arr = [];
for (var key in data) {
var str = key + '=' + data[key]; //key=value
arr.push(str);
}
return arr.join('&'); //將數(shù)組轉(zhuǎn)為字符串并以&分隔
}
4. 定義 myAjax 函數(shù)
在 myAjax() 函數(shù)中，需要創(chuàng)建 xhr 對象科平，并判斷請求的類型褥紫，對請求類型進(jìn)行 if … else … 的判斷：
function myAjax(options) {
//1.創(chuàng)建xhr對象
let xhr = new XMLHttpRequest();
var params = resolveData(options.data);
//判斷請求方式是GET 還是post
//toUpperCase() 方法用于把字符串轉(zhuǎn)換為大寫。
if (options.type.toUpperCase() == 'GET') {
//2.調(diào)用open options.url + '?' + params
xhr.open(options.type, params ? options.url + '?' + params : options.url);
xhr.send();
} else if (options.type.toUpperCase() == 'POST') {
xhr.open(options.type, options.url);
//3.設(shè)置請求頭
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4.設(shè)置數(shù)據(jù)
xhr.send(params);
}
5 .監(jiān)聽注冊事件
監(jiān)聽 onreadystatechange 事件：
// 注冊監(jiān)聽
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 把服務(wù)器的json字符串轉(zhuǎn)成js對象
var obj = JSON.parse(xhr.responseText);
options.success && options.success(obj);
}
};
}
