function ajax({
// 这里我用到是es6的默认参数,也可以在函数内部创建一个default对象,
里面是各种默认值,在函数定义时使用default里的数据,然后使用Object.assign方法,
使用时传入一个options对象,然后覆盖default.
type = 'get',
url = '',
data={},
// content-type的类型不要写错啊
header = { 'content-type': 'application/x-www-form-urlencoded' },
success = function() {},
error = function() {}
}) {
// 创建ajax,不要忘了new
const xhr = new XMLHttpRequest();
// 将传入的参数data,拼接成xxx=yy& 的形式
let params = '';
for (attr in data) {
params += `${attr}=${data[attr]}&`
}
// 使用字符串的slice方法,去掉末尾的&
//注意 slice(a,b) 截取的字符不包括b位置
params = params.slice(0, -1)
// 如果是get请求,就把参数拼到路径上
if (type === 'get') {
url = url + '?' + params
}
xhr.open(type, url)
// 如果是post请求,则通过xhr.send()发送参数,并且根据请求头的不同,发送不一样的参数形式.
if (type === post) {
// 将content-type存到一个变量中
let contentType = header['content-type'];
xhr.setRequestHeader('content-type', contentType);
// 如果发送的是json格式的数据,记得将其转化为json字符串,
因为无论响应和请求传输的都是字符串.
if (contentType === 'application/json') {
xhr.send(JSON.stringify(data))
} else {
// post请求,但参数是xxx==yy&的格式,content-type是
x-www-form-urlencoded
xhr.send(params)
}
} else {
xhr.send()
}
// 请求完毕调用xhr.onload事件,而不是onreadystatechange,
不用判断状态码,更方便但低版本ie不支持.
xhr.onload = function() {
let responseText = xhr.responseText;
// 通过getResponseHeader方法,返回响应头的content-type,
注意是服务器返回的,不要和客户端的弄混了
let contentType = xhr.getResponseHeader('content-type');
// 判断返回的content-type,是否是json字符串,可以转化为json对象
if (contentType.includes('application/json')) {
responseText = JSON.parse(responseText)
}
if (xhr.status === 200) {
// 成功则调用success函数,记得把xhr也穿进去,方便调用者查看
success(responseText, xhr)
} else {
error(responseText, xhr)
}
}
}
// 开头说的,来使用Object.assign的方法
function ajax(options){
const defualt={
type = 'get',
url = '',
data={},
header = { 'content-type': 'x-www-form-urlencoded' },
success = function() {},
error = function() {}
}
Object.assign(default,options)
const xhr = new XMLHttpRequest();
xhr.open(default.type,default.url)
xhr.send()
ToBeContinued=>---
}