封装一个属于自己的ajax - params应该也是对象;
params里最起码要有四个属性: method, url, data, success(是一个函数)
实现类似jQuery中的ajax的封装
$.ajax({
method: 'GET/POST',
url: 'http......./api/getbooks',
data: {
id: 12
},
success: function (res) {
// 响应成功的结果
console.log(res);
}
});
function myAjax(params) {
// 1.创建 xhr 对象
let xhr = new XMLHttpRequest();
// 2.绑定事件
xhr.onreadystatechange = function () {
// 判断ajax请求结束,数据接收成功,把参数转换为对象类型
if (xhr.readyState == 4 && xhr.status == 200) {
let obj = JSON.parse(xhr.response);
// 成功接收数据后,要调用成功的回调函数
params.success(obj);
}
}
// 把对象类型的参数,转换为字符串类型的参数
// {a:1,b:2,c:3} => a=1&b=2&c=3
function objectToString(obj) {
// 遍历对象中的每一个元素,向数组中添加 XXX=XXX 类型的字符串,数组.join("&")连接为一个字符串;
let arr = []; // 定义到函数的里面,for循环的外面
for (var k in obj) {
// 向数组中添加 XXX=XXX 类型的字符串
// k 代表属性 obj[k] 代表属性值
arr.push(`${k}=${obj[k]}`);
}
// 循环外面返回数据
return arr.join('&');
}
// 调用函数,把对象类型转换为字符串类型 a=1&b=2&c=3
let qs = objectToString(params.data);
console.log(qs);
// 特殊处理: 根据请求方法的不同,单独处理 open()和send();
// toUpperCase(); 能够让字符串中的所有字母都大写
if (params.method.toUpperCase() == 'GET') {
// 3.设置请求方式和资源路径 -
// GET注意点:参数与路径之间要有 ?
xhr.open('GET', params.url + '?' + qs);
// 4.发送请求
xhr.send();
} else if (params.method.toUpperCase() == 'POST') {
// 3.设置请求方式和资源路径
xhr.open('POST', params.url);
// POST注意点: 设置头信息;
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 4.发送请求
xhr.send(qs);
}
}