jQuery：跟蹤加載請求進度

Question

我一直在尋找一種方法來跟蹤jQuery​​請求中加載的數據量。我想要的是當加載的數據量增加時進行擴展的條形圖 - 進度條。而且這個進度條應該聽取​​請求。

在我的2個小時的研究中，我一直在尋找長時間的池，JSON等，但我無法弄清楚我是否在正確的軌道上。

如何讓進度條收聽jQuery​​請求並根據加載的數據量按比例增加？

Answer 1

您可以將您的​​調用分解爲幾個較小的AJAX請求，並在完成每個請求時更新進度條並啓動下一個AJAX請求。沒有任何事件可以綁定到，例如ajax-progress，服務器響應會一直髮送，並且一旦瀏覽器收到所有響應，就會調用AJAX請求的回調函數。

$(function() { 
    var total = 5, 
     current = 1, 
     response = []; 
    function do_ajax() { 
     $.ajax({ 
      url : 'server-side.php?page=' + current 
      success : function (serverResponse) { 
       response[response.length] = serverResponse; 
       $('#progress-bar').text(current + ' of ' + total + ' are done'); 
       current++; 
       if (current <= total) { 
        do_ajax(); 
       } 
      } 
     }); 
    } 
}); 

Answer 2

當我們有這樣一個任務來跟蹤長ajax進程的狀態。
我們有什麼 - 請求另一個頁面統計在服務器上存儲或處理的實際數據，用百分比值來回應以完成。 所以

var stillLoading = true; 
$.get('long-process-url', function(data){ 
    stillLoading = false; 
    //code on success 
}); 

checkStatus()  

function checkStatus() { 
    if(stillLoading) { 
     setTimeout(function(){ 
      $.get('get-stats-of-process-url', function(data){ 
       $('#percent').val(data); 
       checkStatus(); 
      } 
     }, 1000); 
    } 
}