ajax, axios, 同步和异步

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请求的响应顺序。这种套娃现象就是回调地狱

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/781592.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kafka学习笔记02(小滴课堂)

Kafka命令行生产者发送消息和消费者消费消息实战 已存在的kafka不能重复创建。 broker设置的是1&#xff0c;factor大于broker了&#xff0c;所以报错。 生产者发送消息&#xff1a; kafka列表出现了新的kafka。 我们使用这个kafka。 我们启动消费者&#xff1a; 我们现在不从…

PYTHON调离线语音合成并实时播放

1、资源下载&#xff08;可以去讯飞官网控制台下载&#xff09; 2、实现代码 # Python调普通离线合成并实时播放 import wave from ctypes import * import pyaudio""" 1、 在Python中某些时候需要C做效率上的补充&#xff0c;Python中的ctypes模块可以很方便…

csv文件转换成list 代码

hb [] h open("your_file.csv","r",encoding "utf-8") data h.read() #print(type(data)) rows data.split("\n") # 数据切分&#xff0c;以换行&#xff08;“\n”&#xff09;为基准&#xff0c;形成一个list&#xff0c;每一行…

【Qt 学习笔记】Day1 | Qt 背景介绍

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Day1 | Qt 背景介绍 文章编号&#xff1a;Qt 学习笔记 / 01 文章目录…

C/C++语言实现简易通讯录 [含文件操作,循环双链表]

文章目录 C/C语言实现简易通讯录概要基本功能运行截图展示主要代码展示 &#x1f396; 博主的CSDN主页&#xff1a;Ryan.Alaskan Malamute &#x1f4dc; 博主的代码仓库主页 [ Gitee ]&#xff1a;ryanala [GitHub]&#xff1a; Ryan-Ala C/C语言实现简易通讯录 ⚠⚠⚠ …

话题通信的python实现

一、发布者Publisher的python实现 step1&#xff1a;在scripts文件夹中创建py节点 step2&#xff1a;第一行是为了指定解释器&#xff0c;Ubuntu20.04是python3&#xff0c;比他低的版本是python。第二行是为了指定编码方式。第五行中&#xff0c;引用index.ros.org中数据类型…

RVM安装ruby笔记

环境 硬件&#xff1a;Macbook Pro 系统&#xff1a;macOS 14.1 安装公钥 通过gpg安装公钥失败&#xff0c;报错如下&#xff1a; 换了几个公钥地址&#xff08;hkp://subkeys.pgp.net&#xff0c;hkp://keys.gnupg.net&#xff0c;hkp://pgp.mit.edu&#xff09;&#xff0c;…

论文笔记:Retrieval-Augmented Generation forAI-Generated Content: A Survey

北大202402的RAG综述 1 intro 1.1 AICG 近年来&#xff0c;人们对人工智能生成内容&#xff08;AIGC&#xff09;的兴趣激增。各种内容生成工具已经精心设计&#xff0c;用于生产各种模态下的多样化对象 文本&代码&#xff1a;大型语言模型&#xff08;LLM&#xff09;…

MySQL分表后,如何做分页查询?

参考: https://blog.csdn.net/qq_44732146/article/details/127616258 user.sql 完整的执行一遍&#xff0c;可以做到分表和分页 数据是实时的&#xff0c;往一张子表里插入之后&#xff0c;all表就能立刻查询到 在这里实现分页查询的是MyIsam引擎&#xff0c;这个引擎不支持…

Java:链表

一、链表简介 1、链表与顺序表的区别 上一篇博客我介绍了顺序表&#xff0c;这次我们来认识认识链表&#xff01;先来看看二者的区别&#xff1a; 顺序表&#xff1a;由于顺序表实际上是一个数组&#xff0c;因此它在物理上是连续的&#xff0c;逻辑上也是连续的&#xff01; …

HJ5 进制转换

目录 问题描述 输入描述&#xff1a; 输出描述&#xff1a; 示例 解释 思路 代码实现 问题描述 写出一个程序&#xff0c;接受一个十六进制的数&#xff0c;输出该数值的十进制表示。 输入描述&#xff1a; 输入一个十六进制的数值字符串 输出描述&#xff1a; 输出该数…

【IDEA】使用debug方式去运行java程序

什么是debug工具&#xff1f; 调试工具&#xff08;debug工具&#xff09;是一种用于帮助程序员识别和修复程序中的错误的工具。它们提供了一系列的功能&#xff0c;帮助程序员在代码执行的过程中跟踪和检测问题&#xff0c;例如查看变量的值、检查函数的调用栈、设置断点来停…

Spring学习——什么是循环依赖及其解决方式

文章目录 前言一、什么是循环依赖二、解决思路1、循环依赖分类2、对象初始化步骤及对象分类3、spring是如何解决的4、图解5、三级缓存1、区别2、ObjectFactory是什么 三、源码debug1、spring创建对象过程1、dubug第一步——找到getBean2、dubug第二步——getBean与doGetBean3、…

腾讯 tendis 替代 redis linux安装使用

下载地址 Tendis存储版 点击下载 linux 解压 tar -zxvf 安装包.tgz cd 解压安装包/scripts 启动 ./start.sh 停止 ./stop.sh 详细配置 修改 /scripts tendisplus.conf # tendisplus configuration for testing # 绑定本机IIP bind 192.168.31.112 port 51002 #设…

MySQL的安装配置 及 MySQL配置,服务管理,基本使用,性能优化,安全性,监控与日志管理,扩展与高可用,备份与恢复,版本升级与迁移注意事项

MySQL的安装配置可以分为几个主要步骤&#xff0c;包括安装MySQL、验证安装是否成功、配置环境变量以及进行MySQL的配置。以下是详细的教程&#xff1a; 一、安装MySQL 首先&#xff0c;从MySQL官网下载MySQL安装包。进入官网后&#xff0c;找到“DOWNLOADS”部分&#xff0c…

海格里斯助推实体制造业转型升级 “算法定义硬件”解题AIoT市场

随着自动化的发展&#xff0c;电子商务和智能制造推动了自动化立体仓库的快速发展与创新&#xff0c;产生了“密集仓储”的概念。对于一个实体企业来讲&#xff0c;其数智物流转型正在趋向于“去伪存真”&#xff0c;企业追求高ROI与真实经济价值&#xff0c;具有降本增效的业务…

代码随想录算法训练营第三十三天|leetcode70、509、746题

一、leetcode第509题 本题要求斐波那契数列的通式&#xff0c;通过定义dp数组&#xff0c;确定dp[i]dp[i-1]dp[i-2]的递推式&#xff0c;从而确定dp数组的含义为第i个数的大小。 具体代码如下&#xff1a; class Solution { public:int fib(int n) {if(n0){return 0;}if(n1)…

JavaEE 初阶篇-深入了解多线程安全问题(出现线程不安全的原因与解决线程不安全的方法)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 多线程安全问题概述 1.1 线程不安全的实际例子 2.0 出现线程不安全的原因 2.1 线程在系统中是随机调度且抢占式执行的模式 2.2 多个线程同时修改同一个变量 2.3 线…

游戏行业行业竞争越来越激烈,遇到DDoS攻击遭受严重损失该如何解决

近年来&#xff0c;我们见证了数字化的快速发展&#xff0c;随着这样的发展&#xff0c;网络的威胁也逐渐增多&#xff0c;在网络攻击门槛不断降低&#xff0c;行业竞争越来越激烈&#xff0c;游戏行业的DDoS攻击如雨点般密集&#xff0c;在整个DDoS攻击的份额中&#xff0c;游…

SpringAMQP-Exchange交换机

1、Fanout-Exchange的特点是&#xff1a;和它绑定的消费者都会收到信息 交换机的作用是什么? 接收publisher发送的消息将消息按照规则路由到与之绑定的队列不能缓存消息&#xff0c;路由失败&#xff0c;消息丢失FanoutExchange的会将消息路由到每个绑定的队列 声明队列、交…