遞增加載網頁

Question

是否可以使用AJAX和JQuery來使用ASP.NET遞增加載網頁。

我有一個網頁，它運行30個查詢;每個都針對不同的數據庫（我的組織有大約30個數據庫）。不幸的是，每個查詢需要大約7秒的時間才能運行（平均）。我花了一些時間優化查詢（他們最初平均花費大約30秒來運行）。我想讓網頁運行查詢一併顯示輸出（網格視圖），然後運行查詢二並顯示查詢一和二的輸出（網格視圖），然後運行查詢三並顯示查詢一的輸出，兩個和三個等。最初我想過使用Response.Flush（請參閱此問題：Response.write and ASP.NET controls），但Guffa說，使用Web控件時這是不可能的。我怎樣才能使用AJAX，JQuery等增量加載網頁？

Answer 1

是的，這是可能的。查詢是否必須連續執行？如果不是，則可以並行運行所有查詢。

每個AJAX調用都可以在成功完成後調用一個函數。當每個AJAX調用完成時，通過在該代碼底部的後續AJAX調用指定返回數據格式和表示代碼函數。

以下代碼示例是一個廣義的jQuery AJAX數據庫調用，可用於串行執行任意數量的數據庫調用。它假設數據庫有一個HTTP POST API，它用JSON響應，因爲你沒有指定數據庫使用的數據訪問方法。

myfunction參數指定將在數據庫響應後調用的函數。 myerrorfunction參數指定錯誤處理程序。 myquery參數指定API調用。 myparams參數是要提供給HTTP POST作爲URL中參數的任意數量的逗號分隔參數的列表。他們的格式爲& P0 = .. & PN =

function apitofunction6(myfunction,myerrorfunction,myquery,myparams) { 
    var datstr = ""; 
    var indx = 0; 
    var ajaxHandle; 

    if (myparams != null) { 
    for (indx = 0; indx < (arguments.length-3); indx++) { 
     datstr = datstr + "&p" + indx + "=" + encodeURIComponent(arguments[indx+3]); 
    } 
    } 

    ajaxHandle = $.ajax({ 
    type: "POST", 
    url: "aqapi", 
    data: "howsmyapiq=" + myquery + datstr, 
    dataType: "json", 
    tryCount: 0, 
    retryLimit: 3, 
    complete: function sortdata() {}, 
    success: function(myJSON,textStatus,jqXHR) { 
     myfunction(myJSON,textStatus,jqXHR); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
     if (textStatus == 'timeout') { 
     this.tryCount++; 
     if (this.tryCount <= this.retryLimit) { 
      var retryHandle = $.ajax(this); 
      pendingFunction.push(retryHandle); 
      return retryHandle; 
     } 
     } 

     if (errorThrown == 'Authorization Required') { 
     window.location = "/login"; 
     } 
     myerrorfunction(jqXHR, textStatus, errorThrown); 
    } 
    }); 
    pendingFunction.push(ajaxHandle); 

    return ajaxHandle; 
} 

該功能可以在一個序列中這樣調用：

arResultIndex = apitofunction6(pc_myOnGet,pc_myOnFail,"ShowIncident3",SortOrder,Count,Offset); 

function pc_myOnGet (myData,myTS,myJqXHR,datstr,myparams) { 
    //format and display data 
    //... 
    arResultIndex2 = apitofunction6(pc_myOnGet2,pc_myOnFail2,"ShowIncident4",SortOrder,Count,Offset); 
} 

function pc_myOnGet2 (myData,myTS,myJqXHR,datstr,myparams) { 
    //format and display data 
    //... 
    arResultIndex3 = apitofunction6(pc_myOnGet3,pc_myOnFail3,"ShowIncident5",SortOrder,Count,Offset); 
} 

Answer 2

This example使用C＃，但它可以很容易地適應你的目的。

基本上，您需要將頁面拆分爲幾個部分。每個部分都會發出自己的請求，所以它會異步加載每個部分，而不是按順序加載每個部分，然後顯示它。

所以在主視圖中，可以有幾個

<div class ="partialContents" data-url="/Controller/getData_1"></div> 
<div class ="partialContents" data-url="/Controller/getData_2"></div> 
<div class ="partialContents" data-url="/Controller/getData_3"></div> 
<div class ="partialContents" data-url="/Controller/getData_4"></div> 

和客戶端腳本將會像

$(document).ready(function(e){ 
    $(".partialContents").each(function(index,item){ 
     var url = $(item).data("url"); 
     if(url && url.length > 0){ 
     $(item).load(url); 
     } 
    }); 
    });