什么是AJAX？
AJAX =Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建快速动态网页的技术。
封装ajax请求
function http({
url,
method='GET',
params={},
data={}
}) {
// 将method值转为大写
method = method.toUpperCase();
// 将参数拼接到url上
if(params) {
let jointString = null;
// id=xxx&name=xxx&
Object.keys(params).forEach(key=> {
jointString += `${key}=params[key]&`
})
// 将最后的&去掉
jointString = jointString.subString(0,jointString.length - 1);
url += url + '?' + jointString;
}
// 创建xhr实例
const request = new XMLHttpRequest();
request.open(method,url,true);//规定请求类型、url、是否异步请求
if(method == 'GET' || method == 'DELETE') {
request.send(); //将请求发送到服务器
} else if(method == 'POST' || method == 'PUT') {
request.setRequestHeader('content-type','application/json;charset=utf-8'); //设置请求头
request.send(JSON.stringify(data)); //将请求发送到服务器，携带参数仅用于POST请求
}
//每当 readyState 改变时，就会触发 onreadystatechange 事件
request.onreadystatechange = function() {
// readyState存着XMLHttpRequest的状态
// 0：请求未初始化
// 1：服务器连接已建立
// 2：请求已接收
// 3：请求处理中
// 4：请求已完成，且响应已就绪
if(request.readyState != 4) return;
// 请求完成返回promise对象
return new Promise((resolve,reject)=> {
const {status, statusText} = request;
// 状态码200~299之间都是请求成功
if(status>=200 && status <=299) {
const response = {
status,
statusText,
data: JSON.stringify(request.response)
};
resolve(data);
} else {
const response = {
status,
statusText,
};
reject(response);
}
})
}
}
