【转】JavaScript中一个方法同时发送两个ajax请求问题

原文链接：https://www.cnblogs.com/wangshuaiandroid/p/6703188.html

今天在做项目中遇到一个问题，大概是在一个jsp页面同时有一个select下拉搜索条件框和一个Bootstrap表格展示列表。这两个都要通过ajax向后台拿数据，而且要在页面加载时完成。
当时的做法是：

$(function() {
    // 加载下拉菜单
    selectMenu();
</span><span style="color: #008000;">/*</span><span style="color: #008000;">* 加载页面表格 </span><span style="color: #008000;">*/</span>
<span style="color: #0000ff;">var</span> url = 'xxxx.do'<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> col =<span style="color: #000000;"> [ {
    checkbox : </span><span style="color: #0000ff;">true</span><span style="color: #000000;">
}, {
    field : </span>'operlogid'<span style="color: #000000;">,
    title : </span>'xxx'<span style="color: #000000;">,
    formatter : </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(value, row, index) {
        </span><span style="color: #0000ff;">return</span> index + 1<span style="color: #000000;">;
    }
}, {
    field : </span>'empuserid'<span style="color: #000000;">,
    title : </span>'xxx'<span style="color: #000000;">,
    sortable : </span><span style="color: #0000ff;">true</span><span style="color: #000000;">
}, {
    field : </span>'makedate'<span style="color: #000000;">,
    title : </span>'xx'<span style="color: #000000;">,
    sortable : </span><span style="color: #0000ff;">true</span><span style="color: #000000;">
}, {
    field : </span>'menuname'<span style="color: #000000;">,
    title : </span>'xx'<span style="color: #000000;">,
    sortable : </span><span style="color: #0000ff;">true</span><span style="color: #000000;">
}, {
    field : </span>'designation'<span style="color: #000000;">,
    title : </span>'xx'<span style="color: #000000;">,
    sortable : </span><span style="color: #0000ff;">true</span><span style="color: #000000;">
},
</span><span style="color: #008000;">//</span><span style="color: #008000;"> {field: 'content',title: 'xx'},</span>

    {

field : 'result',

title : 'xx',

sortable : true

} ];
</span><span style="color: #008000;">//</span><span style="color: #008000;"> 初始化加载表格</span>
tableInit(url, $('#tb'<span style="color: #000000;">), 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
通过这几种方法就能完美解决问题了。