基於服務器端進程的AJAX進度條

Question

我最初的想法是創建會話變量，並在服務器端進程完成所有計算時進行更新。例如，如果它完成了1/10的主要任務，則將會話變量更新爲10％...同時，我有第二個AJAX請求繼續檢查此Session變量，直到服務器端處理完成爲止。不過，我現在正在閱讀的是，在我的服務器端處理頁面完成之前，Session變量不可用。

我也注意到，使用這種方法，我的第二個aspx會在服務器端處理完成後加載，這是無用的，因爲它將不會提供任何加載信息，直到處理全部完成。

現在我有一個動畫加載圖標，但我需要某種指示器來指示服務器在哪個步驟上。

當前設置

function getComparison(result) { 
    //grabs content from comparisons.aspx to show results 
    $("#differenceSummary").html(result); 
    //hide loading overlay image 
    $("#loading").removeClass("visible"); 

} 

基本上我只轉儲comparisons.aspx的內容到一個div。我查看了UpdatePanel服務器控件，但這些示例似乎並沒有使它在這種情況下看起來很有用。他們都使用按鈕，我需要一個正在發生的事情。

如果我可以給客戶返回任何東西（比較喜歡1-100或某種類型），那麼這對我來說是非常有用的。

Answer 1

對於那些想知道我是如何完成這個的，我最終做了幾個AJAX請求。

我的第一個AJAX請求確定需要做多少個請求（我有700,000個數據庫記錄，我一次做了30,000個），並設置了加載欄。一旦加載欄被設置，我打到相同的ASPX文件「X」次數，對於每次調用，我都會更新進度條（需要一些數學計算）。一旦進度條達到100％，我會做另一個AJAX請求來獲取我所做的服務器端處理的結果。

我最初的代碼調用compare.aspx，並將它附加到div。

$.ajax({ 
     url: "comparisons.aspx", 
     type: "GET", 
     success: getComparison, 
     error: showErrors 
    }); 

//On Success, show results 
function getComparison(result) { 
    //grabs content from comparisons.aspx to show results 
    $("#differenceSummary").html(result); 

} 

當comparisons.aspx第一次加載時，它加載一個空的進度條，也基於我已經上傳的文件信息（這是針對我的應用程序）。當這個頁面被加載時，AJAX請求的數量被放入JavaScript中。

 //how many records to check at a time 
     var numOfRecordsAtATime = 30000; 

     //number of original/modified records 

     var origNumOfRecords = parseInt($("#origNumOfRecords").text()); 
     var modNumOfRecords = parseInt($("#modNumOfRecords").text()); 
     var highestNum; 
     //arithmetic to see how many AJAX calls are necessary 
     if (origNumOfRecords > modNumOfRecords) { 
      highestNum = origNumOfRecords; 
     } else { 
      highestNum = modNumOfRecords; 
     } 

     var numberofCallsToMake = parseInt(Math.floor(highestNum/numOfRecordsAtATime)) + 1; 
     //How much the progress meter should increase at a time 
     var increments = (100/numberofCallsToMake); 

     //number of records in total we've completed 
     var numRecordsCompleted = 0; 
     //number of times we've incremented 
     var numIncrementsCompleted = 0;   


function startAjax() { 
    $("#progressbar").progressbar({ 
     value: 1 
    }); 
    if (!halt) { 
     while (true) { 
      if (numRecordsCompleted < origNumOfRecords) { 
       $.ajax({ 
        url: "ajaxCall.aspx?randNo=" + Math.random(), 
        type: "GET", 
        success: doAjaxCall, 
        error: showTheError 
       }); 
       numRecordsCompleted = numRecordsCompleted + numOfRecordsAtATime; 

      } else { 
       break; 
      } 

     } 

    } 

} 

function doAjaxCall(result) { 
    numIncrementsCompleted++; 
    console.log(result); 
    var progress = (parseInt(numIncrementsCompleted * increments)); 
    $("#progressbar").progressbar({ 
     value: progress 
    }); 
    console.log(progress); 
    if (progress == 100) { 

     getResults(); 

    } 
}