function ajax(options) {
//储存的是默认值
let defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {
},
error: function () {
}
};
//使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults, options);
//创建ajax对象
let xhr = new XMLHttpRequest();
//拼接请求参数的变量
let params = '';
//循环用户传递进来的对象格式参数
for (let attr in defaults.data) {
//将参数转换成字符串格式
params += attr + '=' + defaults.data[attr] + '&'
}
//将最后的&截取掉
params = params.slice(0, params.length - 1);
//判断请求方式
if (defaults.type === 'get') {
defaults.url = defaults.url + '?' + params;
}
//配置ajax对象
xhr.open(defaults.type, defaults.url);
if (defaults.type === 'post') {
//用户希望的向服务器端传递的请求参数的类型
let contentType = defaults.header['Content-Type'];
//设置请求参数格式的类型
xhr.setRequestHeader('Content-Type', contentType);
if (contentType === 'application/json') {
xhr.send(JSON.stringify(defaults.data))
} else {
xhr.send(params)
}
} else {
//发送请求
xhr.send()
}
//监听xhr对象下面的onload事件
//当xhr对象接收完响应数据后触发
xhr.onload = function () {
//获取响应头中的数据(获取服务器返回的数据类型)
let contentType = xhr.getAllResponseHeaders('Content-Type');
//服务器端返回的数据
let responseText = xhr.responseText;
// 如果响应类型中包含application/json
if (contentType.includes('application/json')) {
//将json字符串转换为json对象
responseText = JSON.parse(responseText)
}
//当http状态码等于200的时候
if (xhr.status === 200) {
//请求成功 调用处理成功情况的函数
defaults.success(responseText, xhr)
} else {
//请求失败 调用失败情况的函数
defaults.error(responseText, xhr)
}
}
}
ajax函数调用(例子):
ajax({
//请求地址
url: 'http://localhost:3000/readystate',
success: function (res) {
console.log(res);
}
}
)