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中的异常处理try...catch使用介绍
Sep 21 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 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中的integer类型使用分析
2010/07/27 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
php实现购物车功能(上)
2020/07/23 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
iscroll.js滚动加载实例详解
2017/07/18 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
python创建进程fork用法
2015/06/04 Python
python 系统调用的实例详解
2017/07/11 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
物业经理求职自我评价
2013/09/22 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
师范生小学见习总结
2015/06/23 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis