- ajax调用参数解释：
ajax({
url:"http://localhost:3000/users",
method:"POST",
data:"username=lala&password=111",
headers:{
"content-type":"application/x-www-form-urlencoded"
},
success:function(res){
console.log("success:",res)
},
error:function(err){
console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
}
})- ajax：这里的ajax是封装的函数名，这个函数名随便起，函数定义是在js代码中；
- url：数据请求的链接url一定要有；
- method：为了让这种封装方式适用于各种请求方式，要在调用的时候有一个method参数来接收请求方式；
- method:接收各种请求方式：get、post、put、patch、delete；
- data：post方式等不同方式要传输的数据，放在data里；
- async：是否异步，参数可传可不传，不传默认是true：异步；false：同步；
- headers：因为我们在用post方式时，传给后端的信息有两种方式：一种是表单格式，一种是json格式，所以要有这个headers参数，放信息格式；
- success和error是回调函数，一个成功的回调，一个失败的回调，函数调用会在js代码中实现；
- 最后因为参数多，我们可以用对象的方式将它们放在一起，传进ajax这个函数里；
- ajax封装代码：
- js代码：
//因为data有可能会传进来的是一个对象，但post传的信息格式只有两种，一个是json对象，一个是表单
//这个函数是为了将对象转换为表单的格式
//函数调用在下面
function queryStringify(obj) {
let str = ''
for (let k in obj) str += `${k}=${obj[k]}&`
//这个for循环执行后的结果是这样子的格式：
//username=yiyi&password=123&
//然后下面再用slice从0位置截取到最后一个位置的字符，但不包括最后一个字符
//也就是截取下来的信息是这样的：username=yiyi&password=123
return str.slice(0, -1)
}
// 封装 ajax
//options是一个大对象，接收的形参；
//因为到时候会从这个大对象了解构出来下面的url、method、async、data、headers等
function ajax(options) {
//定义一个defaultoptions默认对象，全部参数都定义了，防止options的实参有些参数没定义，就可以使用这里的默认值；
let defaultoptions = {
url: "",
method: "GET",
async: true,
data: {},
headers: {},
success: function () { },
error: function () { }
}
let { url, method, async, data, headers, success, error } = {
...defaultoptions,
...options
}
console.log(url, method, async, data, headers, success, error)
if (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {
data = JSON.stringify(data)
}
else {
//queryStringify函数在最上面定义了
data = queryStringify(data)
}
// 如果是 get 请求, 并且有参数, 那么直接组装一下 url 信息
if (/^get$/i.test(method) && data) url += '?' + data
// 4. 发送请求
const xhr = new XMLHttpRequest()
xhr.open(method, url, async)
xhr.onload = function () {
if (!/^2\d{2}$/.test(xhr.status)) {
// console.log(error)
error(`错误状态码:${xhr.status}`) //回调,执行error的回调函数，括号里是实参，
return
}
// 执行解析
//写try{}catch{}的作用是：可能后端传过来的数据解析错误，那success就执行不了，
//下面的代码也都执行不了了，就卡在那里了，为了即使上面出错了，下面代码也能执行所以用了这样一个结构
//如果发生try里面的代码发生错误，就执行catch的代码，不会因为错误代码就停了，出错了还会继续执行，但是会给你打印一个错误信息
try {
let result = JSON.parse(xhr.responseText)
success(result)
} catch (err) {
error('解析失败 ! 因为后端返回的结果不是 json 格式字符串')
}
}
// console.log(22222)
// 设置请求头内的信息
//请求头信息可能有多个，所以这里用for循环把它们遍历出来
//将content-type设置在headers中
for (let k in headers) xhr.setRequestHeader(k, headers[k])
//设置一个既适用于get方式又适用于post方式的方法：
if (/^get$/i.test(method)) {
xhr.send()
} else {
xhr.send(data)
}
// xhr.send(data)
}- html代码：
- get方式调用ajax函数：
<body>
<script src="./util.js"></script>
<script>
//method:在get方式时不用传参数，因为后面我们定义的默认对象就是get，不传后面覆盖时默认是get
//async、data、headers也不用传，因为get方式没有，就让他默认就行了；
ajax({
url:"http://localhost:3000/users",
success:function(res){
console.log("success:",res)
},
error:function(err){
console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
}
})
</script>
</body>- post方式调用ajax函数：
<body>
<script src="./util.js"></script>
<script>
//method:在get方式时不用传参数，因为后面我们定义的默认对象就是get，不传后面覆盖时默认是get
//async、data、headers也不用传，因为get方式没有，就让他默认就行了；
ajax({
url:"http://localhost:3000/users",
method:"POST",
data:"username=lala&password=111",
headers:{
"content-type":"application/x-www-form-urlencoded"
},
success:function(res){
console.log("success:",res)
},
error:function(err){
console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
}
})
</script>
</body>
- 代码解释：
if (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {
data = JSON.stringify(data)
}
else {
//queryStringify函数在最上面定义了
data = queryStringify(data)
}这个headers["content-type"]后面的问号的含义是：
- 如果前面为假，就不执行后面这个“.”的方法；
- 所以这句代码的含义是：如果headers["content-type"]为假，那么就不调用这个indexOf（“json”）这个方法，代码继续执行；
- 这样保证即使前面为假，代码也可以往下执行，只是不调用这个方法了而已；
