詳解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，異步請求是並行的，執行的快與慢，要看響應的數據量的大小及后台邏輯的復雜程度。而且有一個現象是：最后下拉框顯示的是

　　

　　ajax2請求的下拉列表要選中的某一項的數據沒有展示出來，這說明ajax2對頁面的操作快於ajax1，這時ajax1對頁面的操作還沒開始，所以導致ajax2對頁面的操作沒有效果。

　　要解決這個問題也不難，這里提供兩種解決方案：

　　（1）Ajax2()方法的執行放到Ajax1()的success回調函數的最后一行。

　　（2）Ajax1()的異步請求方法中，增加一個回調函數 ：complete : Ajax2

　　

　　（3）當然針對這個問題而言還有很多解決辦法，比如下拉列表采用同步的方式來畫，而數據的回顯使用異步，或者一個異步請求把所有數據返回，然后按照邏輯順序進行數據展示，這些就不再本文的討論范圍內了。

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

　　最后說一點，我們作為程序員，研究問題還是要仔細深入一點的。當你對原理了解的有夠透徹，開發起來也就得心應手了，很多開發中的問題和疑惑也就迎刃而解了，而且在面對其他問題的時候也可做到觸類旁通。當然在開發中沒有太多的時間讓你去研究原理，開發中要以實現功能為前提，可等項目上線的后，你有大把的時間或者空余的時間，你大可去刨根問底，深入的去研究一項技術，為覺得這對一名程序員的成長是很重要的事情。