JavaScript中一個(gè)方法同時(shí)發(fā)送兩個(gè)ajax請(qǐng)求問題
今天在做項(xiàng)目中遇到一個(gè)問題,大概是在一個(gè)jsp頁(yè)面同時(shí)有一個(gè)select下拉搜索條件框和一個(gè)Bootstrap表格展示列表。這兩個(gè)都要通過ajax向后臺(tái)拿數(shù)據(jù),而且要在頁(yè)面加載時(shí)完成。
當(dāng)時(shí)的做法是:
$(function() { // 加載下拉菜單 selectMenu(); /** 加載頁(yè)面表格 */ 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="">請(qǐng)選擇</option>'; for ( var i in data) { sel += '<option value="' + data[i].menuname + '">' + data[i].menuname + '</option>'; } $("#sel_menuname").html(sel); } }); }
這樣做完導(dǎo)致的結(jié)果是:在谷歌瀏覽器頁(yè)面正常顯示,在火狐瀏覽器會(huì)不定期出現(xiàn)系統(tǒng)異常錯(cuò)誤提示!
最后分析原因是:
從異步請(qǐng)求的執(zhí)行原理來(lái)看,我們知道當(dāng)一個(gè)異步請(qǐng)求發(fā)送時(shí),瀏覽器不會(huì)處于鎖死、等待的狀態(tài),從一個(gè)異步請(qǐng)求發(fā)送到獲取響應(yīng)結(jié)果的期間,瀏覽器還可以進(jìn)行其它的操作。這就意味著多個(gè)異步請(qǐng)求的執(zhí)行時(shí)并行的。
兩個(gè)ajax異步請(qǐng)求(Bootstrap表格在加載時(shí)也是ajx異步請(qǐng)求)沖突,因?yàn)楫惒絾栴},在onload方法中調(diào)用兩個(gè)ajax異步,其實(shí)相當(dāng)于同時(shí)發(fā)送兩個(gè)請(qǐng)求。執(zhí)行的快與慢,要看響應(yīng)的數(shù)據(jù)量的大小及后臺(tái)邏輯的復(fù)雜程度。selectMenu()請(qǐng)求的下拉列表數(shù)據(jù)沒有展示出來(lái),這說(shuō)明Bootstrap的tableInit方法 對(duì)頁(yè)面的操作快于selectMenu,所以導(dǎo)致頁(yè)面出錯(cuò)。
解決辦法:
當(dāng)然針對(duì)這個(gè)問題而言還有很多解決辦法,這里提供三種解決方案:
(1)Ajax2()方法的執(zhí)行放到Ajax1()的success回調(diào)函數(shù)的最后一行。
(2)Ajax1()的異步請(qǐng)求方法中,增加一個(gè)回調(diào)函數(shù) :complete : Ajax2
(3)把Ajax1()的異步設(shè)為同步:async : false
通過這幾種方法就能完美解決問題了。
浙公網(wǎng)安備 33010602011771號(hào)