jquery ajax属性async(同步异步)示例


Posted in Javascript onNovember 05, 2013

例1、jquery+ajax/" target="_blank">jquery ajax同步方式

$.ajax({
url : 'test.php',
type : 'post',
async: false,//使用同步的方式,true为异步方式
data : {'act':'addvideo', 'videoname':videoname},//这里使用json对象
success : function(data){
//code here...
},
fail:function(){
//code here...
}
});

例2
//javascript
function test()
{
 var a= 1;
 $.ajax({
  type   : 'GET',
  url    : 'test.php',
  data   : 'page=112',
  success:function(msg)
  {
   alert(msg);
   a= msg;
  }
 })
 alert(a);
}
//test.php
sleef('5'); //休息五分钟
echo 'in';
/*
 这个程序运行情况是  先打印1(a=1) 然后五秒过后 打印 in
 根据这个情况就可以知道 jquery 的ajax的执行流程 
 因为是异步调用
 以前就是这样给一个变量赋值  不管怎么弄都是不对的。最后就发现这个问题
 参数async改为false就为同步调用 当ajax返回结果后程序才继续执行
*/
 

在这里,async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)例:
例3
$.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(),也就是说,在这个时候出现两个线程,我们这里暂且说为function1() 和function2()。
当把asyn设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待在function1()这个地方,不会去执行function2(),知道function1()部分执行完毕。
注意
同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。
而异步则这个AJAX代码运行中的时候其他代码一样可以运行。
jquery的async:false,这个属性
Javascript 相关文章推荐
jQuery 使用手册(七)
Sep 23 Javascript
jquery.ui.progressbar 中文文档
Nov 26 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
firefox下input type="file"的size是多大
Oct 24 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
jquery中radio checked问题
Mar 16 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 #Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 #Javascript
客户端js性能优化小技巧整理
Nov 05 #Javascript
js倒计时小程序
Nov 05 #Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 #Javascript
javascript使用location.search的示例
Nov 05 #Javascript
jquery按回车提交数据的代码示例
Nov 05 #Javascript
You might like
PHP网站基础优化方法小结
2008/09/29 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
python实现从web抓取文档的方法
2014/09/26 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
节能宣传周活动总结
2014/05/08 职场文书
2014年售票员工作总结
2014/11/19 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA