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);
}
});
}
这样做完导致的结果是：在⾕歌浏览器页⾯正常显⽰，在⽕狐浏览器会不定期出现系统异常错误提⽰！
最后分析原因是：
  从异步请求的执⾏原理来看，我们知道当⼀个异步请求发送时，浏览器不会处于锁死、等待的状态，从⼀个异步请求发送到获取响应结果的期间，浏览器还可以进⾏其它的操作。这就意味着多个异步请求的执⾏时并⾏的。bootstrap项目
两个ajax异步请求（Bootstrap表格在加载时也是ajx异步请求）冲突，因为异步问题，在onload⽅法中调⽤两个ajax异步，其实相当于同时发送两个请求。执⾏的快与慢，要看响应的数据量的⼤⼩及后台逻辑的复杂程度。selectMenu()请求的下拉列表数据没有展⽰出来，这说明Bootstrap的tableInit⽅法对页⾯的操作快于selectMenu，所以导致页⾯出错。
解决办法：
  当然针对这个问题⽽⾔还有很多解决办法，这⾥提供三种解决⽅案：
  （1）Ajax2()⽅法的执⾏放到Ajax1()的success回调函数的最后⼀⾏。  （2）Ajax1()的异步请求⽅法中，增加⼀个回调函数：complete : Ajax2  （3）把Ajax1()的异步设为同步：async : false
通过这⼏种⽅法就能完美解决问题了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。