Come avere una barra di avanzamento in jQuery.get()

Question

è possibile avere una barra di avanzamento che misura l'avanzamento di jQuery.get()?

Answer 1

Questo non viene fornito immediatamente nella versione corrente di jQuery, ma è comunque possibile con un piccolo sforzo.

È necessario ascoltare l'evento progress dello XMLHttpRequest a cui jQuery consente l'accesso. Un esempio 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 
    } 
}); 

Qui il link al docs on XMLHttpRequest's progress event.

Si potrebbe anche voler dare un'occhiata al jquery.ajax-progress plugin per evitare di farlo da soli.

---

Note:

• Alcuni browser più vecchi potrebbero non supportare l'evento progress.

• Per calcolare l'avanzamento del download, è necessario conoscere la dimensione della risorsa da scaricare, ovvero il server deve inviare l'intestazione HTTP Content-length. Se la dimensione non è nota, non è possibile calcolare il progresso. Questo è ciò che è la proprietà dell'evento progress.

Answer 2

Se è possibile suddividere l'attività che il server sta gestendo in blocchi di elaborazione, è possibile effettuare una risposta server chiamando un altro $.get() e aggiornare una barra di avanzamento in questo modo.

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

In caso contrario, si dovrà guardare in un modello di applicazione web come Comet che utilizza lato server spingendo in cui il cliente non deve fare una richiesta in modo che i dati da inviare al client