ajax 同步请求和异步请求的差异分析


Posted in Javascript onJuly 04, 2011

ajax同步和异步的差异, 先看2段代码:
代码一:

Synchronize = function(url,param) { 
function createXhrObject() { 
var http; 
var activeX = [ "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; 
try { 
http = new XMLHttpRequest; 
} catch (e) { 
for (var i = 0; i < activeX.length; ++i) { 
try { 
http = new ActiveXObject(activeX[i]); 
break; 
} catch (e) {} 
} 
} finally { 
return http; 
} 
} 
var conn = createXhrObject(); 
conn.open("POST", url, false);//ajax同步 
conn.send(param); 
var strReturn = conn.responseText; 
alert("1"); 
if (strReturn != "") { 
return Ext.decode(conn.responseText); 
} else { 
return null; 
} 
alert("2"); 
};

代码二:
Ajax 同步请求方式:
Synchronize = function(url,param) { 
function createXhrObject() { 
var http; 
var activeX = [ "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; 
try { 
http = new XMLHttpRequest; 
} catch (e) { 
for (var i = 0; i < activeX.length; ++i) { 
try { 
http = new ActiveXObject(activeX[i]); 
break; 
} catch (e) {} 
} 
} finally { 
return http; 
} 
} 
var conn = createXhrObject(); 
conn.open("POST", url, true);//ajax异步 
conn.send(param); 
var strReturn = conn.responseText; 
alert("1"); 
if (strReturn != "") { 
return Ext.decode(conn.responseText); 
} else { 
return null; 
} 
alert("2"); 
};

同步和异步的差异如下:

conn.open('POST',Url,true); // ajax异步
conn.open('POST',Url,false); // ajax同步

对于代码二,为异步的ajax请求,执行结果为:先执行alert(2)再执行alert(1), 异步的意思就是说一旦conn.open请求一发出,前端不去等待它的响应便执行后面的代码,所以alert(2)先执行了,然后当响应response到达以后才执行alert(1);

对于代码一,为同步的ajax请求,执行结果为:先执行alert(1)再执行alert(2), 同步的意思就是说一旦conn.open请求一发出,前端就去等待它的响应,响应完成以后,alert(1)先执行了,然后alert(2);

Javascript 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
vue通过点击事件读取音频文件的方法
May 30 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 #Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 #Javascript
JS分割字符串并放入数组的函数
Jul 04 #Javascript
js列举css中所有图标的实现代码
Jul 04 #Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 #Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 #Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 #Javascript
You might like
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
原始的js代码和jquery对比体会
2013/09/10 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
js实现图片轮播效果
2015/12/19 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python列表解析配合if else的方法
2018/06/23 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
党员大会主持词
2014/04/02 职场文书
家庭贫困证明
2015/06/16 职场文书
新闻报道稿范文
2015/07/23 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
导游词之凤凰古城
2019/10/22 职场文书