JavaScript中一個方法同時發送兩個ajax請求問題

今天在做項目中遇到一個問題，大概是在一個jsp頁面同時有一個select下拉搜索條件框和一個Bootstrap表格展示列表。這兩個都要通過ajax向后台拿數據，而且要在頁面加載時完成。
當時的做法是：

$(function() {
    // 加載下拉菜單
    selectMenu();

    /** 加載頁面表格 */
    var url = 'xxxx.do';
    var col = [ {
        checkbox : true
    }, {
        field : 'operlogid',
        title : 'xxx',
        formatter : function(value, row, index) {
            return index + 1;
        }
    }, {
        field : 'empuserid',
        title : 'xxx',
        sortable : true
    }, {
        field : 'makedate',
        title : 'xx',
        sortable : true
    }, {
        field : 'menuname',
        title : 'xx',
        sortable : true
    }, {
        field : 'designation',
        title : 'xx',
        sortable : true
    },
    // {field: 'content',title: 'xx'},
    {
        field : 'result',
        title : 'xx',
        sortable : true
    } ];

    // 初始化加載表格
    tableInit(url, $('#tb'), col);
});

/**
 * 加載菜單下拉
 */
function selectMenu() {
$.ajax({
        url : dataBase + "xxx.do",
        type : 'post',
        data : {},
        success : function(data) {
            // alert(JSON.stringify(data));
            var sel = '<option value="">請選擇</option>';
            for ( var i in data) {
                sel += '<option value="' + data[i].menuname + '">'
                        + data[i].menuname + '</option>';
            }
            $("#sel_menuname").html(sel);
        }

    });
}

 

這樣做完導致的結果是：在谷歌瀏覽器頁面正常顯示，在火狐瀏覽器會不定期出現系統異常錯誤提示！
最后分析原因是：
　　從異步請求的執行原理來看，我們知道當一個異步請求發送時，瀏覽器不會處於鎖死、等待的狀態，從一個異步請求發送到獲取響應結果的期間，瀏覽器還可以進行其它的操作。這就意味着多個異步請求的執行時並行的。
兩個ajax異步請求（Bootstrap表格在加載時也是ajx異步請求）沖突，因為異步問題，在onload方法中調用兩個ajax異步，其實相當於同時發送兩個請求。執行的快與慢，要看響應的數據量的大小及后台邏輯的復雜程度。selectMenu()請求的下拉列表數據沒有展示出來，這說明Bootstrap的tableInit方法 對頁面的操作快於selectMenu，所以導致頁面出錯。
解決辦法：
　　當然針對這個問題而言還有很多解決辦法,這里提供三種解決方案：
　　（1）Ajax2()方法的執行放到Ajax1()的success回調函數的最后一行。
　　（2）Ajax1()的異步請求方法中，增加一個回調函數 ：complete : Ajax2
　　（3）把Ajax1()的異步設為同步：async : false
通過這幾種方法就能完美解決問題了。