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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
vue中的计算属性和侦听属性
Nov 06 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP实现添加购物车功能
2017/03/06 PHP
php中如何执行linux命令详解
2018/11/06 PHP
javascript比较文档位置
2008/04/08 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
python能在浏览器能运行吗
2020/06/17 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
八一建军节部队活动方案
2014/02/04 职场文书
个人简历中自我评价
2014/02/11 职场文书
卖房授权委托书样本
2014/10/05 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
立项申请报告范本
2015/05/15 职场文书
广播体操比赛主持词
2015/06/29 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
微信小程序实现聊天室功能
2021/06/14 Javascript
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android