关于多个Ajax请求执行返回先后的问题示例探讨

有时候在一个业务事件处理流程上,可能会遇到点击了一个按钮或者其他事件触发了一个动作

需要执行两个以上的Ajax请求,但是可能要顾虑到Ajax请求执行的先后顺序,有时候Ajax请求顺序出问题,会导致各种问题

例如现在有两个ajax事件,分别为ajax1 ,ajax2

一个叫做main的方法调用执行入口

1.

function main(){ ajax1(data,callback); ajax2(data,callback); }

如果我们按照上面的方法去执行,表面上看似乎是让ajax1先执行,ajax2后执行。如果不仔细想,有些人会认为ajax1先执行完,之后才会执行ajax2.事实上真的会如此吗?

答案是 不一定 。当然对于有多个ajax请求对执行返回顺序没要求的情况,我们不需要过多考虑谁先执行,谁先返回的
那要是考虑ajax事件执行先后顺序以及返回顺序呢

要是这样那怎么解决ajax事件的执行返回先后顺序呢

当然现在你应该会想到ajax回调函数,Good,这是一个好主意
现在按这种思路改变一下方法,方法如下

function main(){ ajax1( data , ajax2( ) ); }

这样看起来,你是不是觉得Very Good呢?真的吗?真的是Very Good吗?

Maybe,But in some case ,这样写可能有些不方便,当然也许你可能不会遇到,但是我遇到了一种比较特殊的情况
比如下面这种可能

function main(){ aa(data); ajax1(data,callback); } function aa(val){ var data=val+"";//这里是对传入数据进行修改,封装,当然这里是随便写的 ajax2(data,ajax2Callback); } function ajax2Callback(){ console.log("=====回调函数ajax2Callback()执行========"); console.log("=====这里正在执行ajax执行完毕后必须执行的操作========"); }

你认为这种情况可以满足ajax2在ajax1先执行并且先执行完毕吗

仔细想想你会发现得到答案

No!
Now ,How to solve this proplem . How to make sure ajax2 finished before ajax1 .

当然,你可能会说,这不简单,把ajax1的调用放进ajax2方法回调方法ajax2Callback的最后面

不得不承认这是一种解决方案,但是如果是一个很古老的项目,已经做了好几年的项目了。里面调用复杂,要尽量去避免修改以前的底层方法,也许你为了修改这个bug,就这样简单解决了,你可能又会创造多个bug.

那到底还有没有好的方法去解决了?

Sure,solve it easy .但是工作经验不足的人很少会一下想到,只会用前面的办法草草解决问题,不管三七二十一。

而我采用了一种比较笨的方法,而且还存在一定问题,使用了setTimeOut定时器执行一次,但是问题想必大家都知道,谁知道这个Ajax会执行多久了,还好有大神指导了下我,
还记得对数组排序吗,说道这个,也许你会好奇,这与数组排序有啥关系。下面会告诉你答案

代码说明一切:

function main(){ var temp=ajax2Callback; ajax2Callback=function(){ temp(); ajax1(data,callback); } aa(data); ajax2Callback=temp; } function aa(val){ var data=val+"";//这里是对传入数据进行修改,封装,当然这里是随便写的 ajax2(data,ajax2Callback); } function ajax2Callback(){ console.log("=====回调函数ajax2Callback()执行========"); console.log("=====这里正在执行ajax执行完毕后必须执行的操作========"); }

看出来没,是不是很有趣,没有修改最低层的方法,仅仅修改了main方法,是不是很像数组排序里的当我们比较两个值大小时,不管你用冒泡排序,还是快速排序,是不是都设置了一个临时变量去存储值。当然排序比较大小时,你可以没必要设置临时变量,仅仅用一个^运算符去做赋值比大小,甚至你可以偷懒到直接调用系统的Arrays.sort()方法,当然这都可以

function changeSearchContactType(obj) { if (!obj) { return; } var contactType = obj.value; var origRenderTemplate = renderTemplate; renderTemplate = function(data) { origRenderTemplate(data); ajaxAnywhere.submitAJAX('setSearchContactType'); } var result = TemplateHelper.changeSearchContactTemplate(contactType, contactUIUID); renderTemplate = origRenderTemplate; return result; }

时间: 2024-09-25 13:20:08

关于多个Ajax请求执行返回先后的问题示例探讨的相关文章

关于多个Ajax请求执行返回先后的问题示例探讨_AJAX相关

有时候在一个业务事件处理流程上,可能会遇到点击了一个按钮或者其他事件触发了一个动作 需要执行两个以上的Ajax请求,但是可能要顾虑到Ajax请求执行的先后顺序,有时候Ajax请求顺序出问题,会导致各种问题 例如现在有两个ajax事件,分别为ajax1 ,ajax2 一个叫做main的方法调用执行入口 1. function main(){ ajax1(data,callback); ajax2(data,callback); } 如果我们按照上面的方法去执行,表面上看似乎是让ajax1先执行,a

jquery ajax 请求一直返回当前页面HTML代码

问题描述 jquery ajax 请求一直返回当前页面HTML代码 前端JS var names =$(""#names"").val(); if(isNull(names)){ alertMsg({'msg':'请输入姓名!'}); return; } var job_number =$(""#job_number"").val(); if(isNull(job_number)){ alertMsg({'msg':'请输入工

ajax请求之返回数据的顺序问题分析_AJAX相关

本文实例分析了ajax请求之返回数据的顺序问题.分享给大家供大家参考,具体如下: ajax请求一个url,php后端处理后,数组为如下格式: 复制代码 代码如下: $a = array( '-1'=> 10 ,'-3' => 2, '0' => '5' ,'-2' => 4); 然后使用php的asort函数对数组按照value进行升序排序后,如下: 复制代码 代码如下: $a = array('-3' => 2, '-2' => 4,'0' => '5', '-

xmlhttprequest-多个ajax请求,返回值后覆盖掉之前的请求结果,求各位解答!万分感谢!

问题描述 多个ajax请求,返回值后覆盖掉之前的请求结果,求各位解答!万分感谢! 需求:下拉框选择完演出,自动显示对应时间.地点.票价等信息(是想自动改变对应select下拉框的值) 问题: 目前是单个ajax都能显示(是在同一个div), 多个就不行了,只显示最后一个(也是同一个位置,应该是被覆盖了), 看了一些文章也找不到合适的解决方法,求各位前辈指点! 我使用的实例是这个http://www.w3school.com.cn/php/php_ajax_database.asp 具体代码可见:

Jquery通过ajax请求NodeJS返回json数据实例_jquery

最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便. 2.通过HTML的ajax请求,可以实现在不同的服务器上,可跨域获取数据. 3.通信数据格式灵活,可以是xml.json.binary等,数据适合任何平台. 在说说我的环境,我使用的是公司提供的电脑,有很多限制,比如是域中电脑,操作权限低,无法安装任何软件,无法修改计算机配置,无法使用U盘等等.

浅析ajax请求json数据并用js解析(示例分析)_jquery

自从接触了jquery就喜欢上了前端开发,而且深深感受到了前端开发的强大与重要之处.同时也想为asp.net鸣不平,事实上asp.net并没有臃肿,说它臃肿的人无非是那些不了解它的人,可能他们看见过一些asp.net低级程序员在不断往页面里拖控件,然后发现生成的页面中含有大量的垃圾代码,而且几乎把所有的逻辑处理都写在了服务器端,觉得服务器压力太大了.事实上,刚入门asp.net的人会有拖控件的习惯,但是当你再深入你会发现,最终asp.net的开发模式还是跟PHP.jsp等其它web开发模式是一样

jquey的ajax请求返回json问题

如果使用jquery的ajax请求,返回json格式的数据,json的键必须使用双引号,否则无法执行回调方法.

关于ajax以及struts2返回数据的问题

问题描述 关于ajax以及struts2返回数据的问题 在struts2框架下,可以向前台直接返回数据(感觉上是这样的), 但是在使用ajax技术中,为什么不能直接返回数据(对象)呢? 例如:从后台传一个list集合 2016/05/24 我已经成功使用struts2框架使用ajax从后端向前台传递了一个集合,直接将集合对象放在 "result type='json' name='shift' param name='root' pssList param result" 这样就可以了

谈谈IE针对Ajax请求结果的缓存

在默认情况下,IE会针对请求地址缓存Ajax请求的结果.换句话说,在缓存过期之前,针对相同地址发起的多个Ajax请求,只有第一次会真正发送到服务端.在某些情况下,这种默认的缓存机制并不是我们希望的(比如获取实时数据),这篇文章就来简单地讨论这个问题,以及介绍几种解决方案. 目录 一.问题重现 二.通过为URL地址添加后缀的方式解决问题 三.通过JQuery的Ajax设置解决问题 四.通过定制响应解决问题 一.问题重现 我们通过一个ASP.NET MVC应用来重现IE针对Ajax请求结果的缓存.在