- 函数能够像jQuery一样,传入自定义配置的ajax参数,函数参数传入参数配置对象
- 函数内部有默认的配置参数,默认get请求,默认表单提交数据格式
- 合并传入的配置参数与默认参数
- 处理传入的数据,拼接成?x=x&y=y形式
- 如果是get方法,数据加到url上
- 初始化xhr对象
- 判断请求方式,如果是post请求,首先设置请求头的媒体类型信息,然后判断其格式,若是json形式则发送转换的json格式数据;get请求直接发送
- 响应监听,获取响应头媒体类型,并判断,如果是返回json则转换成j对象
- 判断响应码,200则调用成功函数,其余调用失败函数
function ajax(options) {
let defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () { },
error: function () { }
};
Object.assign(defaults, options);
let params = '';
for (let i in defaults.data) {
params += i += '=' += defaults.data[i] + '&';
}
params = params.substr(0, params.length - 1);
if (defaults.type == 'get') {
defaults.url = defaults + '?' + 'params';
}
let xhr = new XMLHttpRequest();
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 = function () {
let contentType = xhr.getResponseHeader('Content-Type');
responseText = xhr.responseText;
if (contentType.includes('application/json')) {
responseText = JSON.parse(responseText)
}
if (xhr.status == 200) {
defaults.success(responseText, xhr);
}else {
defaults.error(responseText, xhr);
}
}
}