JavaScript中一个方法同时发送两个ajax请求问题
Posted 总有刁民想害朕&
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
通过这几种方法就能完美解决问题了。
以上是关于JavaScript中一个方法同时发送两个ajax请求问题的主要内容,如果未能解决你的问题,请参考以下文章
jQuery的$.ajax方法支持同时创建多个异步ajax请求吗?而且这些ajax对象必须是并行处理的
JavaScript之Ajax-2 Ajax(使用Ajax发送get请求使用Ajax发送post请求)