Jak uzyskać pasek postępu w jQuery.get()

Question

Czy jest możliwe, aby pasek postępu mierzył postęp jQuery.get()?

Answer 1

ten nie jest dostarczany od razu po zainstalowaniu w bieżącej wersji jQuery, ale nadal jest możliwy przy niewielkim wysiłku.

Powinieneś posłuchać zdarzenia progress z XMLHttpRequest, do którego jQuery zapewnia dostęp. Przykładem 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 
    } 
}); 

Tutaj link do docs on XMLHttpRequest's progress event.

Możesz również chcieć rzucić okiem na jquery.ajax-progress plugin, aby tego uniknąć.

---

Uwagi:

• Niektóre starsze przeglądarki mogą nie obsługiwać zdarzenie progress.

• Aby obliczyć postęp pobierania, należy znać rozmiar pobieranego zasobu, tj. Serwer musi wysłać nagłówek HTTP Content-length. Jeśli rozmiar nie jest znany, nie można obliczyć postępu. Właśnie do tego służy właściwość lengthComputable zdarzenia progress.

Answer 2

Jeśli możesz podzielić zadanie, które serwer obsługuje na fragmenty przetwarzania, możesz utworzyć odpowiedź serwera dzwoniąc na inną $.get() i zaktualizować pasek postępu w ten sposób.

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); 
    } 
} 

W przeciwnym razie trzeba będzie spojrzeć na model aplikacji internetowych, takich jak Comet który wykorzystuje po stronie serwera popychanie, gdy klient nie musi złożyć wniosek, aby do danych, które będą wysyłane do klienta