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

標籤：base   uname   blog   function   gif   鎖死   回呼函數   異常   value   

今天在做項目中遇到一個問題，大概是在一個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);        }    });}

 

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

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