发送ajax请求
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
主要内容: - ajax请求的创建 - 回调地狱问题 - promise解决回调地狱问题 - axios请求 - es7中async和await关键字一、创建ajax请求
1.发送ajax请求的步骤
- 创建ajax对象
- 配置链接信息
- 发送ajax请求
2.发送get请求
代码如下(示例):
let xhr = null
// 创建ajax对象,同时处理兼容性问题
if (XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject()
}
// 配置连接
xhr.open(
'get',
' http://jx.xuzhixiang.top/ap/api/checkname.php?username=1'
)
// 发送请求
xhr.send()
xhr.onload = function () {
// 请求成功
if (xhr.status == 200) {
// 服务器返回的数据
let data = JSON.parse(xhr.responseText)
console.log(data)
} else {
console.log('数据请求失败')
}
}
3.发送post请求
代码如下(示例):
let xhr = null
if (XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject()
}
xhr.open('post', 'http://jx.xuzhixiang.top/ap/api/checkname.php')
// 发送post请求需要配置请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
//在发送post请求时,参数放在请求体中
xhr.send('username=1')
// xhr.onload = function () {
// if (xhr.status == 200) {
// // 接受服务器返回数据
// let data = JSON.parse(xhr.responseText)
// console.log(data)
// }
// }
//当ajax状态码发生改变
xhr.onreadystatechange = function () {
// 当ajax的状态吗转变为4,且http状态吗以2开头,则请求成功
if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
// 接收服务器返回数据
let data = JSON.parse(xhr.responseText)
console.log(data)
}
}
4.封装ajax请求
function ajax(obj) {
let { url, type, data, success } = obj
// 对参数进行处理
let arr = []
for (let k in data) {
arr.push(k + '=' + data[k])
}
data = arr.join('&')
console.log(data)
// let emm = new URLSearchParams(data)
// console.log(emm.toString())
//判断请求类型
if (type == 'get') {
// 发送get请求
let xhr = new XMLHttpRequest()
xhr.open(type, url + '?' + data)
xhr.send()
xhr.onload = function () {
let result = JSON.parse(xhr.responseText)
success(result)
}
} else if (type == 'post') {
// 发送post请求
let xhr = new XMLHttpRequest()
xhr.open(type, url)
xhr.setRequestHeader('content-type', 'x-www-form-urlencoded')
xhr.send(data)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && /^2\d{2}/.test(xhr.status)) {
let result = JSON.parse(xhr.responseText)
success(result)
}
}
}
}
二、回调地狱问题
产生原因:在异步请求过程中,本次请求需要上一次请求的结果作为参数,在多次请求过程中则,产生了回调地狱问题。
ajax({
// 请求添加用户接口 先注册-->后登录
url: 'http://jx.xuzhixiang.top/ap/api/reg.php',
type: 'get',
data: {
username: 'lalalal',
password: '12345',
},
success: function (res) {
// 用户注册成功-->然后请求登录接口
console.log('用户注册成功')
ajax({
// 请求登录接口
url: 'http://jx.xuzhixiang.top/ap/api/login.php',
type: 'get',
username: 'lalalal',
password: '12345',
success: function (res) {
console.log('登录成功')
console.log(res)
},
})
},
})
三、promise问题
promise:异步编程的解决方案,旨在解决回调函数的嵌套问题,回调函数嵌套层次过多,会出现回调地狱 嵌套的操作编程链式操作。
1.promise介绍
(1) promise内部是由状态变化的,这种状态变化直接决定应该执行成功的回调还是失败的回调(2) promise内部是有三种状态的,pending resolved rejected,只有两种状态变化 pending->resolved pending->rejected一旦状态改变就不再变化
(3) 异步操作写到 promise 内部, 异步操作成功调用resolve,失败调用reject
2.promise使用
new Promise((resolve, reject) => {
ajax({
url: '接口地址1',
data: {},
type: 'get',
success(res) {
resolve(res)
},
})
})
.then((res) => {
return Promise((resolve, reject) => {
// 第二次发送请求
ajax({
url: '接口地址2',
type: 'get',
data: {},
success(res) {
// 数据请求成功的回调函数
resolve(res)
},
})
})
})
.then((res) => {
// 最后一次发送ajax请求
ajax({
url: '接口地址3',
type: 'get',
data: {},
sucess(res) {
console.log(res)
},
})
})
(1)使用promise完成红绿灯经典案例
let li = document.querySelectorAll('ul li')
let current = 0
// 变色
function changeColor(time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time)
})
}
emm()
function emm() {
changeColor(2000)
.then(() => {
li[current].style.backgroundColor = ''
li[0].style.backgroundColor = 'red'
current = 0
return changeColor(2000)
})
.then(() => {
li[1].style.backgroundColor = 'green'
li[current].style.backgroundColor = ''
current = 1
return changeColor(2000)
})
.then(() => {
li[2].style.backgroundColor = 'yellow'
li[current].style.backgroundColor = ''
current = 2
return changeColor(2000)
})
.then(() => {
emm()
})
(2)Primise.race()和Promise.all()
let p1 = new Promise(function (res, rej) {
setTimeout(() => {
res(1000)
}, 1000);
})
let p2 = new Promise(function (res, rej) {
setTimeout(() => {
res(2000)
}, 2000);
})
let p3 = new Promise(function (res, rej) {
setTimeout(() => {
res(3000)
}, 3000);
})
/* let p0 = Promise.race([p1, p2, p3]);
p0.then(function (r) {
// p1 p2 p3 谁先完成,接下来就会执行p0.then
console.log(r);
}) */
// Promise.all 一起
let p0 = Promise.all([p1, p2, p3]);
p0.then(function (r) {
// p1 p2 p3(同时在执行) 都完成,接下来就会执行p0.then
// r的第一个 元素 就是p1的结果
// [1000, 2000, 3000]
console.log(r);
})
总结:
完结撒花:本文主要介绍ajax的使用方法,和对ajax函数进行封装,
在使用ajax请求的时候经常使用回调函数就会产生回调地狱的问题,可以使用promise进行处理,由于新语法的出现,所以本文介绍内容不被经常使用,但是是在前端面试过程中经常遇到的问题