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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
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
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
Node 代理访问的实现
2019/09/19 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python字符串的方法与操作大全
2018/01/30 Python
查看Django和flask版本的方法
2018/05/14 Python
python 生成图形验证码的方法示例
2018/11/11 Python
python3.5安装python3-tk详解
2019/04/26 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
django之自定义软删除Model的方法
2019/08/14 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
应届生的求职推荐信范文
2013/11/30 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python