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
js获取select标签选中值的两种方式
Jan 09 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
模块化react-router配置方法详解
Jun 03 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 数组实例说明
2008/08/18 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
lib.utf.js
2007/08/21 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
python机器学习库常用汇总
2017/11/15 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
django2.0扩展用户字段示例
2019/02/13 Python
python开发游戏的前期准备
2019/05/05 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
Java面试题及答案
2012/09/08 面试题
四风问题自查报告剖析材料
2014/02/08 职场文书
庆元旦广播稿
2014/02/10 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
光荣之路观后感
2015/06/12 职场文书
高一军训口号
2015/12/25 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang