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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
Python中使用SAX解析xml实例
2014/11/21 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python列表的增删改查实例代码
2018/01/30 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python的等深分箱实例
2019/11/22 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
个人整改方案范文
2014/10/25 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
教师节座谈会主持词
2015/07/03 职场文书
2015年库房管理工作总结
2015/10/14 职场文书