zoukankan      html  css  js  c++  java
  • 详解Ajax请求(四)——多个异步请求的执行顺序

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

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

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

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

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

    <input type="button" value="测试按钮" onclick="sentAjax();"/><br>
     <select id="selectClassify" style=" 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,异步请求是并行的,执行的快与慢,要看响应的数据量的大小及后台逻辑的复杂程度。而且有一个现象是:最后下拉框显示的是

      

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

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

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

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

      

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

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

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

  • 相关阅读:
    多线程:C#.NET中使用BackgroundWorker在模态对话框中显示进度条
    通过外接程序将Outlook邮件导出成Word文档
    [轉]FusionChartsFree参数说明
    MSIL学习资源
    FastCGI Error 2147467259 (0x80004005)
    编程实现双击某个文件用指定程序打开
    Excel api Enumerations 常量
    [轉]全面认识页面设置之PageSetup 对象
    AjaxFileUploaderV2.1增加可上传多个文件
    [轉]VB.NET and C# Comparison
  • 原文地址:https://www.cnblogs.com/lxwphp/p/10058183.html
Copyright © 2011-2022 走看看