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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
JS闭包经典实例详解
Dec 20 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 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中的strpos使用示例
2014/02/27 PHP
php实现天干地支计算器示例
2014/03/14 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
python从入门到精通(DAY 1)
2015/12/20 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
python自动发微信监控报警
2019/09/06 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
Python中的流程控制详解
2021/02/18 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
演讲主持词
2014/03/18 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
三八节活动主持词
2015/07/04 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis