如何在jQuery.get（）中創建進度條

Question

是否有可能使用進度條來測量jQuery.get（）的進度？

Answer 1

這並不是在當前版本的jQuery中開箱即用的，但仍然可能不費吹灰之力。

您應該聽取XMLHttpRequest的progress事件，jQuery允許您訪問該事件。一個例子from Dave Bond's blog：

$.ajax(
{ 
    type: 'POST', // 'POST' here so that _upload_ progress _also_ makes sense; 
       // Change to 'GET' if you need. 
    url: "/", data: {}, 
    beforeSend: function(XMLHttpRequest) 
    { 
    //Upload progress 
    XMLHttpRequest.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with upload progress 
     } 
    }, false); 

    //Download progress 
    XMLHttpRequest.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with download progress 
     } 
    }, false); 
    }, 

    success: function(data){ 
    // successful completion handler 
    } 
}); 

下面的鏈接docs on XMLHttpRequest's progress event。

您可能還想看看jquery.ajax-progress plugin，以避免自己做。

---

注：

• 一些舊的瀏覽器可能不支持progress事件。

• 要計算下載進度，您必須知道要下載的資源大小，即服務器必須發送Content-length HTTP標頭。如果不知道規模，則無法計算進度。這是progress事件的lengthComputable屬性的用途。

Answer 2

如果您能夠將服務器正在處理的任務劃分爲多個處理塊，則可以使服務器響應調用另一個$.get()，並以此方式更新進度欄。

function get_chunk(chunk_number, max_chunks){ 
    $.get('eg.php?chunk=' + chunk_number, function(){ 
     chunk_number++; 
     if(chunk_number < max_chunks){ 
      get_chunk(chunk_number, max_chunks) 
     } 
     update_status_bar(chunk_number, max_chunks); 
    } 
} 

否則，你將不得不考慮像Comet Web應用程序模型，使用服務器端推在客戶端不必提出請求，以便數據被髮送到客戶端