ajax 同步请求和异步请求的差异分析

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);

(0)

相关推荐

  • dojo学习第二天 ajax异步请求之绑定列表

    用户不喜欢滚动条,于是我们做成了选项卡切换,用户不喜欢刷新页面,于是我们就要使用ajax了,前些年,几乎每个web端开发人员,都以懂得一点点ajax而自豪,但知道使用ajax是远远不够的,因为技术是为人而服务的,不能滥用技术,你总不能为了验证一个文本框textbox而去异步请求一次.我还遇到过有人,更新用户信息的时候,使用ajax更新,用户信息中的图片,又使用回发来更新,一个更新中,先ajax卡在那,然后再回发,你说这是多么2的行为?这种人还不少,我还遇到过有人用ajax更新后再location

  • ajax异步请求详解

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.com学习,教程完善,适合初学者快速入门. jQuery的引用,可以通过下载js文件导入,或通过外部导入 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"

  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

  • 四步轻松实现ajax发送异步请求

    ajax发送异步请求,供大家参考,具体内容如下 第一步(得到XMLHttpRequest) ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!!! 1.得到XMLHttpRequest 大多数浏览器都支持:var xmlHttp=new XMLHttpRequest(); IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); IE5.0以更早版本的IE:var xmlHttp=new A

  • SpringMVC环境下实现的Ajax异步请求JSON格式数据

    一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

  • 基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

  • ajax的工作原理以及异步请求的封装介绍

    Ajax原理: 客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求,当服务器返回响应时,会调用先前注册的回调函数,在回调函数中可以使用javascript操作DOM来更新页面,异步请求不会阻塞客户端的操作,达到页面无法刷新就可以更新数据的效果. 异步请求的封装: 复制代码 代码如下: var xhr=false; //step1:创建一个兼容浏览器各个版本的XMLHttpRequest对象 if (window.XMLHttpRequest) { //IE7+, Firefox

  • Ajax异步请求JSon数据(图文详解)

    上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 我们友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图

  • AJAX实现简单的注册页面异步请求实例代码

    AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. (4)传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面.  简单布局 JS先判断,把前端可以的判断做,减少服务器的交互 $('button').on('click',function(){; var boolu

  • Vue form 表单提交+ajax异步请求+分页效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-

随机推荐