要想封装ajax，我们要先了解ajax四部曲
第一步：创建ajax对象
第二步：打开接口---ajax.open（）
第三步：发送解析过程---ajax.send()
第四部：响应完成，可以获取并使用服务器的响应
接下来按照步骤一步一步去写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//对象转字符串
function objtostring(obj) {
if (Object.prototype.toString.call(obj).slice(8, -1) === 'Object') {//判断数据类型
let objarr = [];//对象数组
for (let attr in obj) {
objarr.push(attr + '=' + obj[attr]);
}
return objarr.join('&');
} else {
throw new Erroe('请输入对象');
}
}
function $ajax(option) {//对象
let promise = new XMLHttpRequest((resolve, reject) => {
let ajax = new XMLHttpRequest();//第一步
//为第二步做准备
option.type = option.type || 'get';
//判断接口不能为空
if (!option.url) {
throw new Error('请输入接口地址');
}
//判断接口数据是否存在，数据类型，数据转换（objtoString）
if (option.data && Object.prototype.toString.call(option.data).slice(8, -1) === 'object') {
option.data = objtostring(option.data);//对象转字符串。
}
//判断请求的方式--get（因为ajax的get方式要写在第二步里面所以在第二步之前判断）
if (option.data && option.type == 'get') {
option.url += '?' + option.data;//后端地址用？和&拼接要传到后端的数据
}
//判断是否异步
if (option.asnyc === 'false' || option.asnyc === false) {
option.asnyc = false;//同步
} else {
option.asnyc = true;//异步
}
ajax.open(option.type, option.data, option.asnyc);
//判断请求的方式---post
if (option.data && option.type == 'post') {
ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//请求头
//第三步
ajax.send(option.data);//将要传输的数据写在ajax.send里面
} else {
ajax.send();//如果数据类型为get，这里就不写。
}
//第四步
//判断是否异步
//异步
if (option.asnyc) {//异步
ajax.onreadystatechange = function () {//监听事件状态码（事件处理函数）
if (onreadystate === 4) {//如果事件状态码为4(表示发送到后端成功)
if (ajax.status === 200) {//http状态码为200（后端响应成功）
let data = ajax.responseText;//后端返回的值
if (option.dataType === 'json') {//如果传入的参数的数据类型是json格式
data = JSON.parse(data);//就将json格式的字符串转成对象。
}
resolve(data);
} else {
reject('接口地址不存在')
}
}
}
} else {
//同步()
if (ajax.status === 200) {
let data = ajax.responseText;//后端返回的值赋值给data
if (option.datatype === 'json') {
data = JSON.parse(data);
}
resolve(data);
} else {
reject('接口地址不存在');
}
}
});
return promiise;
}
</script>
</body>
</html>