ajax同步与异步的区别
jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个AJAX代码运行中的时候其他代码一样可以运行。
ajax中async这个属性,用于控制请求数据的方式,默认是true,即默认以异步的方式请求数据。
一、async值为true (异步)
当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)
例如
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$.ajax({ type:"POST", url:"Venue.aspx?act=init", dataType:"html", success:function(result){ //function1() f1(); f2(); } failure:function (result) { alert('Failed'); }, } function2(); |
在上例中,当ajax块发出请求后,他将停留function1(),等待server端的返回,但同时(在这个等待过程中),前台会去执行function2()。
二、async值为false (同步)
当执行当前AJAX的时候会停止执行后面的JS代码,直到AJAX执行完毕后时,才能继续执行后面的JS代码。
例如
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$.ajax({ type:"POST", url:"Venue.aspx?act=init", dataType:"html", async: false, success:function(result){ //function1() f1(); f2(); } failure:function (result) { alert('Failed'); }, } function2(); |
当把asyn设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待在function1()这个地方,不会去执行function2(),直到function1()部分执行完毕。
Ajax同步与异步的区别
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var returnValue = null; xmlhttp = createXmlHttp(); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { if (xmlhttp.responseText == "true") { returnValue = "true"; } else { returnValue = "false"; } } }; xmlhttp.open("Post",url,true); //异步传输 xmlhttp.setRequestHeader("If-Modified-Since","0"); //不缓存Ajaxxmlhttp.send(sendStr); return returnValue; |
在异步时才可以用xmlHttpReq.onreadystatechange状态值!下面是异步和同步的不同调用方式:
Java
|
1
2
3
4
5
6
7
8
9
10
|
xmlHttpReq.open("GET",url,true);//异步方式 xmlHttpReq.onreadystatechange = showResult; //showResult是回调函数名 xmlHttpReq.send(null);function showResult(){ if(xmlHttpReq.readyState == 4){ if(xmlHttpReq.status == 200){ ****** } }} |
Java
|
1
2
3
4
5
6
7
8
9
10
11
|
xmlHttpReq.open("GET",url,false);//同步方式 xmlHttpReq.send(null); showResult(); //showResult虽然是回调函数名但是具体用法不一样~ function showResult(){ //if(xmlHttpReq.readyState == 4){ 这里就不用了,直接dosomething吧~ //if(xmlHttpReq.status == 200){ ******//dosomething //} //} }xmlhttp.open("Post",url,true); |
如果是同步(false),返回值是true或false,因为执行完send后,开始执行onreadystatechange,程序会等到onreadystatechange都执行完,取得responseText后才会继续执行下一条语句,所以returnValue一定有值。
如果是异步(true),返回值一定是null,因为程序执行完send后不等xmlhttp的响应,而继续执行下一条语句,所以returnValue还没有来的及变化就已经返回null了。
所有如果想获得xmlhttp返回值必须用同步,异步无法得到返回值。
同步异步使用xmlhttp池时都要注意:取得xmlhttp时只能新建xmlhttp,不能从池中取出已用过的xmlhttp,因为被使用过的xmlhttp的readyState为4,所以同步异步都会send但不执行onreadystatechange。
ajax同步与异步的区别的更多相关文章
- JQ Ajax 同步与异步的区别
$.ajax({ url: xml_addr, type: 'get', dataType: 'xml', timeout: 1000, //设定超时 cache: false, //禁用缓存 asy ...
- Ajax同步和异步的区别?
今天在code review时候看到同事的代码,用了ajax同步,async:false,如果不设置async参数,默认是true,为异步,异步的情况是比较复杂的,看下同步这个例子: function ...
- ajax 同步和异步的区别
举个例子:普通B/S模式(同步)AJAX技术(异步)同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事异步: 请求通过事件触发->服务器处理(这时浏览 ...
- AJAX同步和异步的区别
function paginationGo(page){ sendata = {"page":page}; $.ajax({ type:"POST", url: ...
- Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?以及 HTTP状态码
一.Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作 ...
- Ajax 的概念及过程?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?
Ajax 是什么: 1) 通过异步模式,提升了用户体验 2) 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3) Ajax 在客户端运行,承担了一部分本来由服务器承担的工 ...
- AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?
AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...
- ajax同步与异步的坑
之前工作中一个需求,需要动态的添加一组下拉菜单并为这个菜单绑定一个插件,很明显获取数据用Ajax,这本身是没错的,坑就坑在我用了 同步请求,当服务器端正确返回数据时再去执行下一个方法,这逻辑本身没 ...
- Java常见的同步和异步的区别、特点、联系
Java常见的同步和异步的区别.特点.联系 同步:发送一个请求,等待返回,然后再发送下一个请求 异步:发送一个请求,不等待返回,随时可以再发送下一个请求 同步可以避免出现死锁,读脏数据的发生,一般 ...
随机推荐
- SecureCRT字体、界面优化
SecureCRT字体.界面优化 本文是secureCRT的第三篇博文,也是目前secureCRT优化的最终篇.首次使用该软件时候.应该会设置字体和编码,接下来,将演示如何设置. 1. 字体.编码设置 ...
- Qt信号-槽原理剖析--(2)自己实现信号槽
时间乃是最大的革新家--培根 先了解一下相关宏: qt为c++增加的相关宏:signals, slots,emit 在qt的预编译过程中,这些宏会被替换. 1)#define signals publ ...
- git stash详解
应用场景: 1 当正在dev分支上开发某个项目,这时项目中出现一个bug,需要紧急修复,但是正在开发的内容只是完成一半,还不想提交,这时可以用git stash命令将修改的内容保存至堆栈区,然 ...
- tidb测试环境搭建
tidb ansible 部署方式环境检查过于严格,测试环境往往达不到标准,需调整一些参数才能部署成功. 基于tidb2.0版本需要调整的参数 [tidb@ansible01 tidb-ansible ...
- [LOJ2541] [PKUWC2018] 猎人杀
题目链接 LOJ:https://loj.ac/problem/2541 Solution 很巧妙的思路. 注意到运行的过程中概率的分母在不停的变化,这样会让我们很不好算,我们考虑这样转化:假设所有人 ...
- C# vb .net实现透视反射效果
在.net中,如何简单快捷地实现Photoshop滤镜组中的透视反射效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...
- src属性与浏览器渲染
img标签 只要设置了src属性, 就会开始下载,因此可以使用这个特性,配合display:none,默默的下载一些图片,用的时候直接用,快了那么一丢丢~ 注意:不一定要添加到文档后才会开始下载,是只 ...
- python 数据类型 常用法方
python 数据类型 常用法方 upper() 大写 str lower() 小写 str strip() rstrip() lstrip() 去除字符两边的空格 去右边 左边空白 str repl ...
- 解决问题 inner element must either be a resource reference or empty.
-Q: 错误<item>内部元素必须是资源引用或空 升级Andriod Studio之后编译发现如下错误 Android resource compilation failed ***\a ...
- ArrayList集合实现RandomAccess接口有何作用?为何LinkedList集合却没实现这接口
详见:https://blog.csdn.net/weixin_39148512/article/details/79234817 众所周知,在List集合中,我们经常会用到ArrayList以及Li ...