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状态码等于200
- if(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状态码等于200
- if(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状态码等于200
- if(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请求的响应顺序。这种套娃现象就是回调地狱
复制代码 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |