前序

最近好长时间没写博客了，主要由于前一段时间出差，没啥心思写，今天开始重新继续。进入主题，ajax的同步请求和异步请求，这个在前端面试中经常会出现的问题，在实际开发中也容易，有时候被疏忽了就会照成偶尔出现的问题。我们先来看一下，什么是同步请求，这里主要以jquery的ajax请求为例,后端示例使用的java。

什么是同步请求？

ajax同步请求，是指当前端通过ajax发送一个请求到服务端，JavaScript 会等到服务器响应就绪才继续执行。
jquery中怎么设置同步请求，这个就太简单了，不用啰嗦了吧，把async参数设置为false即可，默认是true

这里看一个例子：
前端代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input id="t1" /><button onclick="asynfalse()">同步请求</button></body><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script type="text/javascript">function asynfalse(){$.ajax({type:"post",url:"http://localhost:8090/t1",async:false,success:function(data){$("#t1").val(data);}});}</script></html>

请求http://localhost:8090/t1这个接口时，我们让后端接口等待20秒钟后返回，我们会看到效果是等待很久才看到输入框赋值hello

什么是异步请求？

异步请求：ajax发送请求后，JavaScript 无需等待服务器的响应，继续执行接下来的代码，等到响应成功以后，执行响应的结果；

还是上面那个例子，我们改成异步，再加一句代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input id="t1" /><button onclick="asynfalse()">异步请求</button></body><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script type="text/javascript">function asynfalse(){$.ajax({type:"post",url:"http://localhost:8090/t1",async:true,success:function(data){$("#t1").val(data);}});$("#t1").val('world！');}</script></html>

执行结果：

此时可以看到，我没有点击异步提交按钮时input没有值，当我点击后变成了world！，然后过了一会变成了hello

比较同步和异步请求

1、异步请求比同步请求性能好；
2、异步请求比同步请求体验好；
3、同步请求，当请求失败时，会导致应用程序会挂起或停止，在web中经常表现为卡死。
4、异步可以同时发多个请求，同步只能等一个请求结束后，才能执行下一个请求。

好了，到这里了，希望各位小伙伴看了这篇文章后，以后写代码一定得注意使用异步和同步。

ajax同步请求和异步请求相关推荐

Servlet学习DAY_02:重定向/ 文件上传/ Cookie和Session/ 导入一个工程 / 配置欢迎页面 / 同步请求和异步请求/JSON和AJax介绍 /过滤器
重定向重定向是服务器告诉客户端往指定的路径再次发出请求的指令执行过程: 当服务器执行重定向方法时会给客户端返回302状态码和一个请求路径,浏览器接收到302后会立即往指定的路径再次发出请求 res ...
同步请求和ajax请求,ajax 同步请求和异步请求的差异分析
ajax 同步请求和异步请求的差异分析发布于 2016-12-27 08:14:26 | 53 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Javascript ...
Ajax——同步请求与异步请求
Ajax--同步请求与异步请求浏览器和服务器之间数据传输方式同步方式异步方式两种方式有什么不同? 同步请求,服务器响应时,页面整体刷新异步请求,服务器响应时,页面局部刷新异步请求有什么优点 ...
ajax同步请求与异步请求
在前后台请求数据交互的时候,我们经常用到ajax来进行数据的请求与返回,ajax请求的async字段是boolean类型,用来标识ajax请求是同步请求或者异步请求.async默认为true,异步请求 ...
第106天：Ajax中同步请求和异步请求
同步请求和异步请求的区别 1.同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 用户填写所有信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的.信息错误又要重新 ...
Http中的同步请求和异步请求
最近在上springmvc的JSON数据交换的时候,老师下课提了一个课后问题:什么是异步请求?什么是同步请求?我想大部分同学听到这个问题的时候应该和我一样不知所云.现在,给大家分享一篇关于同步请求和异 ...
同步请求和异步请求的区别
同步请求和异步请求的区别先解释一下同步和异步的概念同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据 ...
什么是同步请求和异步请求？
一.同步.异步请求浏览器发送请求给服务器,其有同步请求和异步请求两种方式. 1同步请求什么叫同步请求呢? 就是在发送一个请求之后,需要等待服务器响应返回,才能够发送下一个请求. 之前学的请求是通过 ...
java同步异步区别_同步请求和异步请求的区别
同步请求和异步请求的区别先解释一下同步和异步的概念同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的 ...

ajax同步请求和异步请求

ajax同步请求和异步请求

前序

什么是同步请求？

什么是异步请求？

比较同步和异步请求

ajax同步请求和异步请求相关推荐

最新文章

热门文章