Ajax和同步与异步
今日目标:
1.利用原生ajax发送get和post请求
2.利用axios发送get和post请求
3.同步和异步
01-Ajax概述【了解】
`概念`: async javascript and xml: 异步的js和xml`优点`: 无刷新提交数据,用户体验好`缺点`: 对网络SEO支持不友好`工作原理【重点】`: 利用js一个的内置对象'XMLHttpRequest',来实现对服务器端`发起异步请求`并`接收响应回来的数据`
02-ajax发送get请求
`步骤`:
1. 通过XMLHttpRequest这个构造函数创建实例对象
// 注意:这个实例对象负责发起请求,并接收数据
let xhr = new XMLHttpRequest() 2. 通过xhr实例对象配置请求方式和请求地址
// 请求地址是由后端提供
xhr.open('请求方式', '请求地址?键名=键值&键名=键值...')//token:::
// 携带这个请求头的目的是告诉服务器咱们已经登录了
//xhr.setRequestHeader('Authorization': localStorage.getItem('token'))3. 发起请求
xhr.send()4. 监听请求状态
xhr.onreadystatechange = function() {// 请求的状态如果等于4, 并且http状态码等于200if(xhr.readyState === 4 && xhr.status === 200) {// 数据响应成功,可以接收// 注意: 后端响应的数据是以字符串形式返回的,需要转换为对象格式let res = JSON.parse(xhr.responseText)}
}
03-ajax发送post请求:onreadystatechange事件
`步骤`:
1. 创建实例对象。 负责发送请求和接收数据
let xhr = new XMLHttpRequest()2. 通过xhr实例对象配置请求方式和请求地址
xhr.open('请求方式', '请求地址')3. 配置请求头
// 调整发送给后端的参数的数据格式
// 以表单数据的格式来提交参数
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 以json字符串的形式提交数据
// xhr.setRequestHeader('Content-Type', 'application/json')
// 默认值:不对参数格式进行处理,默认以是普通字符串
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.setRequestHeader('Content-Type', '提交给后端的数据格式')4. 发送请求
xhr.send('键名=值&键名=值...')5. 监听请求状态
xhr.onreadystatechange = function() {// 如果请求的状态等于4, 并且http状态码等于200if(xhr.readyState === 4 && xhr.status === 200) {// 数据响应成功// 注意:后端响应的数据是以字符串形式返回的,需要先转换成对象let res = JSON.parse(xhr.responseText)}
}
03-ajax发送post请求:onload事件
`步骤`:
1. 创建实例对象。 负责发送请求和接收数据
let xhr = new XMLHttpRequest()2. 通过xhr实例对象配置请求方式和请求地址
xhr.open('请求方式', '请求地址')3. 配置请求头
// 调整发送给后端的参数的数据格式
// 以表单数据的格式来提交参数
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 以json字符串的形式提交数据
// xhr.setRequestHeader('Content-Type', 'application/json')
// 默认值:不对参数格式进行处理,默认以是普通字符串
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.setRequestHeader('Content-Type', '提交给后端的数据格式')4. 发送请求
xhr.send('键名=值&键名=值...')5. 监听请求状态
xhr.onload = function() {// 如果请求的状态等于4, 并且http状态码等于200if(xhr.status === 200) {// 数据响应成功// 注意:后端响应的数据是以字符串形式返回的,需要先转换成对象let res = JSON.parse(xhr.responseText)}
}
(封装ajax)
04-发送请求时的请求状态【了解】
0: 请求未初始化
1: 请求已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成
05-常见的http的状态码【了解】
网络传输协议规定的网络通信的码值:200: 服务器数据响应成功304: Not Modified 未修改. 本次请求的数据和上一次的一样。就直接从浏览器获取数据400: Bad Request 错误的请求。请求参数错误 本次的请求没有被服务器正确的解析401: Unauthorized 未授权。 没有权限访问这个接口。 一般用于登录验证403: Forbidden 拒绝访问。 不能访问这个接口404: Not Found 没有找到。 服务器地址,请求方式,参数没有写正确5XX/6XX; 服务器错误
05-http传输协议【了解】
1. 建立连接
2. 发送请求
3. 接收数据
4. 断开连接
06-axios
`概念`:基于Promise的一个http的网络通信的库`引入axios库`: <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>`axios发送get请求的语法`
'方式一':
axios.get('服务器地址?键名=键值&键名=键值...').then(function(res){// res: 成功后后端响应的内容
}).catch(function(err){// err: 请求失败后的错误信息// 前后端通信没有成功
}) '方式二':
axios.get('服务器地址', {params: {属性名: 值,属性名: 值}
}).then(function(res){// res: 成功后后端响应的内容
}).catch(function(err){// err: 请求失败后的错误信息
}) `axios发送post请求的语法`
axios.post('服务器地址', {属性名: 值,属性名: 值
}).then(function(res){// res就是通信成功后响应的内容
}).catch(function(err){// err: 通信失败后额错误信息
})'注意:axios发送的post请求,默认是以json格式来提交参数'
'如果需要以表单数据格式来提交参数,需要使用qs库'
'使用':
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
axios.post('服务器地址', Qs.stringify({属性名: 值,属性名: 值
})).then(function(res){// res就是通信成功后响应的内容
}).catch(function(err){// err: 通信失败后额错误信息
})
06-token:
`含义`:
每一个接口都是无状态的,接口之间是没有关系的。=> 问题: 当成功发起了登录请求后,登录成功后,登录成功的状态是不能影响到其他接口的=> 解决思路: 让登录状态通知给所有的其他接口=> 解决方案: 登录成功后,生一个具有唯一性,不可伪造的,具有有效期的特殊字符。将这个字符带给所有其他接口+ 这个特殊字符就是token`使用`:发送请求时,需要将token作为请求头信息,添加到请求报文里面
// 利用请求头携带token数据
```js
xhr.setRequestHeader('Authorization',localStorage.getItem('token'))
```
07-同步和异步
`同步`: 代码从上往下依次执行,上面的没有执行完成,下面的不会执行。'会造成代码阻塞'`异步`: 代码从上往下依次执行,遇到了异步,异步就会被跳过,等到所有的同步都执行完成之后,再依次执行异步。`异步的3种情况`:
1. 定时器
2. 事件
3. ajax请求:'实际开发中,我们需要关注ajax请求的响应顺序,但是ajax请求的响应顺序是不可控的'`注意`:以上三种情况,本身是同步的,只有里面对应的回调函数才是异步`规律`:有人的地方,就有江湖; 有异步的地方,就有回调函数
`回调函数`: 现在不调,回头调。满足了特定条件之后才会触发的函数。
08-回调地狱
`问题`: '实际开发中,我们需要关注ajax请求的响应顺序,但是ajax请求的响应顺序是不可控的'`解决`: 回调地狱=> 回调地狱:如果接口之间有相互依赖的关系,可以将后面的接口写入前面接口的回调函数中,实现控制ajax请求的响应顺序。这种套娃现象就是回调地狱