详解Ajax请求(四)——多个异步请求的执行顺序

详解Ajax请求(四)——多个异步请求的执行顺序

  首先提出一个问题:点击页面上一个按钮发送两个ajax请求,其中一个请求会不会等待另一个请求执行完毕之后再执行?

  答案是:不会,这两个异步请求会同时发送,至于执行的快与慢,要看响应的数据量的大小及后台逻辑的复杂程度。

  从异步请求的执行原理来看,我们知道当一个异步请求发送时,浏览器不会处于锁死、等待的状态,从一个异步请求发送到获取响应结果的期间,浏览器还可以进行其它的操作。这就意味着多个异步请求的执行时并行的。

  下面我们还是从一个例子来看一下这个问题。

  要求:ajax1从后台请求下拉列表的数据,ajax2从后台请求下拉列表要选中的某一项的数据。

<input type="button" value="测试按钮" onclick="sentAjax();"/><br> <select id="selectClassify" style="width: 100px;"></select>

js代码:

 
<script type="text/javascript">
function sentAjax(){ Ajax1();  Ajax2(); } function Ajax1(){ $.ajax({ cache : false, url:"<%=basePath%>/manager/test/ajax1", success: function(result){ alert("Ajax1"); $("#selectClassify").html(""); var html = ""; var selectJson = result.downList; $.each(selectJson, function(i, item) { html = html+"<option value='" + item + "'>" + item + "</option>"; }); $("#selectClassify").append(html);  }  }); } function Ajax2(){ $.ajax({ cache : false, url:"<%=basePath%>/manager/test/ajax2", success: function(result){ alert("Ajax2"); $("#selectClassify").val(result.kind); } }); } </script>
 

java代码:

 
@Controller
@RequestMapping("/manager/test") public class TestAjax { @ResponseBody @RequestMapping("/ajax1") public Map<String ,String[]> ajax1(){ Map<String ,String[]> jsonMap = new HashMap<String, String[]>(); String[] downList = new String[2000]; //这里为了说明ajax2不会等待ajax1执行完之后再执行,让ajax1响应的数据量较大。 for(int i = 0;i < 2000;i++){ downList[i] = "<---"+ (i+1) + "--->"; } jsonMap.put("downList", downList); return jsonMap; } @ResponseBody @RequestMapping("/ajax2") public Map<String ,String> ajax2(){ Map<String ,String> jsonMap = new HashMap<String, String>(); jsonMap.put("kind", "<---7--->"); return jsonMap; } }
 

  点击测试按钮我们发现alert(“Ajax2”)先于alert(“Ajax1”)弹出,说明Ajax2没有等待Ajax1,异步请求是并行的,执行的快与慢,要看响应的数据量的大小及后台逻辑的复杂程度。而且有一个现象是:最后下拉框显示的是

  详解Ajax请求(四)——多个异步请求的执行顺序

  ajax2请求的下拉列表要选中的某一项的数据没有展示出来,这说明ajax2对页面的操作快于ajax1,这时ajax1对页面的操作还没开始,所以导致ajax2对页面的操作没有效果。

  要解决这个问题也不难,这里提供两种解决方案:

  (1)Ajax2()方法的执行放到Ajax1()的success回调函数的最后一行。

  (2)Ajax1()的异步请求方法中,增加一个回调函数 :complete : Ajax2    亲测可行

  详解Ajax请求(四)——多个异步请求的执行顺序

  (3)当然针对这个问题而言还有很多解决办法,比如下拉列表采用同步的方式来画,而数据的回显使用异步,或者一个异步请求把所有数据返回,然后按照逻辑顺序进行数据展示,这些就不再本文的讨论范围内了。

  参考文章:http://www.w3school.com.cn/jquery/ajax_ajax.asp

  最后说一点,我们作为程序员,研究问题还是要仔细深入一点的。当你对原理了解的有够透彻,开发起来也就得心应手了,很多开发中的问题和疑惑也就迎刃而解了,而且在面对其他问题的时候也可做到触类旁通。当然在开发中没有太多的时间让你去研究原理,开发中要以实现功能为前提,可等项目上线的后,你有大把的时间或者空余的时间,你大可去刨根问底,深入的去研究一项技术,为觉得这对一名程序员的成长是很重要的事情。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/112651.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • icem合并面网格_icem 混合网格 流沙

    icem合并面网格_icem 混合网格 流沙ICEMCFD中处理interface面_计算机软件及应用_IT/计算机_专业资料。Interface在CFD中应用得非常多,比如常见的应用MRF,SRF,MP以及滑移网格。其实在有限元计算……oaoaoaMMM使用ICEMCFD建立二维翼型流场网格rewrewrewAndrewMoandndndICEMCFD是一款专业的CFD前处…

    2022年5月26日
    74
  • MATLAB画折线图时自定义颜色

    MATLAB画折线图时自定义颜色有很多种数据的时候,MATLAB提供的颜色不够用,这里有一个可以自定义线条颜色并配置不同图例的MATLAB示例clear;clc;closeall;x=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21];y1=rand(1,21);y2=rand(1,21);y3=rand(1,21);y4=rand(1,21);y5=rand(1,21);y6=rand(1,21);y7=

    2022年6月8日
    157
  • 进程管理之进程调度「建议收藏」

    进程管理之进程调度「建议收藏」文章目录一、进程调度基础1、进程调度定义2、进程调度目标二、基本调度算法1、先来先服务算法2、时间片轮转算法3、短任务优先算法4、优先级调度算法5、混合调度算法  在多进程并发的环境里,虽然从概念上看,有多个进程在同时执行,但在单个CPU下,在任何时刻只能有一个进程处于执行状态,而其他进程则处于非执行状态。那么问题来了,我们是如何确定在任意时刻到底由哪个进程执行,哪些不执行呢?这就涉及到进程管理…

    2022年9月29日
    2
  • sklearn.metrics.auc_auc值计算公式

    sklearn.metrics.auc_auc值计算公式fromsklearnimportcross_validation,metricsfromsklearnimportsvmtrain_data,train_target=load(filename)#自定义加载数据函数,返回的是训练数据的数据项和标签项train_x,test_x,train_y,test_y=cross_validation.train_test_split

    2022年10月7日
    2
  • 软件测试笔记总结(探灵笔记手机版下载教程)

    软件测试复习(部分)概述程序+文档+数据=软件狭义的软件测试定义:为发现软件缺陷而执行程序或系统的过程广义的软件测试定义:人工或自动地运行或测定某系统的过程,目的在于检验它是否满足规定的需求或弄清预期结果和实际结果间的差别为什么要做软件测试发现软件缺陷功能错功能遗漏超出需求部分(画蛇添足)性能不符合要求软件质量高低:是否符合用户习惯、符合用户需求测试…

    2022年4月15日
    101
  • setproperty java_Java中System.setProperty()的用法

    setproperty java_Java中System.setProperty()的用法该方法的作用是:设置指定键指示的系统属性在实际项目中发现,如果一个服务器下放置了多个web项目的话,在一个项目中通过调用System.setProperty设置了某个值,再另一个项目中也能获取到该值,所以如果想在一个项目中设置全局变量时尽量避免使用这个方法,应该调用相应的appContext。/**设置指定键对值的系统属性*setProperty(Stringprop,Stringva…

    2022年7月12日
    14

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号