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中绑定事件的命名空间详解
Apr 05 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
vue组件生命周期详解
Nov 07 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
php实现源代码加密的方法
2015/07/11 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
react路由配置方式详解
2017/08/07 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python多线程编程简单介绍
2015/04/13 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
值得收藏的10道python 面试题
2019/04/15 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
python模拟斗地主发牌
2020/04/22 Python
会计专业毕业自荐书范文
2014/02/08 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
优秀学生评语大全
2014/04/25 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
幼儿园开学通知
2015/04/24 职场文书
在校生证明
2015/06/17 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技