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

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

  • 相关阅读:
    html5+css3中的background: -moz-linear-gradient 用法 (转载)
    CentOS 安装Apache服务
    Linux 笔记
    CURL 笔记
    Spring Application Context文件没有提示功能解决方法
    LeetCode 389. Find the Difference
    LeetCode 104. Maximum Depth of Binary Tree
    LeetCode 520. Detect Capital
    LeetCode 448. Find All Numbers Disappeared in an Array
    LeetCode 136. Single Number
  • 原文地址:https://www.cnblogs.com/lxwphp/p/10058183.html
Copyright © 2011-2022 走看看