首页 > 代码库 > 详解Ajax请求（四）——多个异步请求的执行顺序

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

2024-09-03 07:02:12   226人阅读

　　首先提出一个问题：点击页面上一个按钮发送两个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(urlParam){
    $.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=http://www.mamicode.com/‘" + 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

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

 

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


联系
我们