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

來源:互聯網
上載者:User

標籤: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請求問題

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。