Come mostrare lo stato di caricamento in percentuale per la risposta ajax?

Question

Voglio mostrare la percentuale utente della risposta ajax caricata con una barra di avanzamento. C'è un modo per raggiungerlo? In questo momento sto mostrando solo un'immagine.

Ecco il mio codice di esempio:

$('#loadingDiv').show(); 

$.ajax({ 
     type : 'Get', 
     url : myUrl, 
     success : function(response) { 
      $('#loadingDiv').hide(); 
      populateData(response); 
     }, 
     error: function(x, e) { 
        $('#loadingDiv').hide(); 
      if (x.status == 500 || x.status == 404) { 
        alert("no data found"); 
       } 
     } 
    }); 

codice HTML:

<div id="loadingDiv"> 
    <img src="loading-img.png"/> 
</div> 

Answer 1

Ci sono due modi per mostrare la percentuale reale. Brevemente ...

Uno - JavaScript nativo di una vecchia scuola o jQuery ajax, per il quale è necessario anche il supporto del server, un URL diverso che può fornire aggiornamenti. E continui a colpire quell'URL in un intervallo.

Due - moderna JavaScript nativo nativo nei browser HTML5, supporto XMLHTTPRequest2, noto anche come AJAX 2, definito dal nuovo standard HTML5 Web e.

Se due, benvenuto nel nuovo sito !!
Più funzionalità sono state aggiunte ai browser che migliorano la connettività, parte delle funzionalità HTML5.

XMLHTTPRequest2 abilita gli eventi in AJAX che aiutano il monitoraggio del progresso, nonché molte altre cose, dallo stesso JavaScript. È possibile visualizzare il percentuale reale monitorando lo stato di avanzamento attuale:

var oReq = new XMLHttpRequest(); 

oReq.addEventListener("progress", updateProgress, false); 
oReq.addEventListener("load", transferComplete, false); 
oReq.addEventListener("error", transferFailed, false); 
oReq.addEventListener("abort", transferCanceled, false); 

oReq.open(); 

Quindi è possibile definire i gestori attaccati sopra (progresso nel tuo caso):

function updateProgress (oEvent) { 
    if (oEvent.lengthComputable) { 
    var percentComplete = oEvent.loaded/oEvent.total; 
    // ... 
    } else { 
    // Unable to compute progress information since the total size is unknown 
    } 
} 

jQuery può essere utilizzato in anche il secondo caso. Dopotutto, jQuery ti aiuta con meno codice, più cose da fare!

Sperando che si stanno concentrando su HTML5 e la nuova soluzione web, vorrei ricordare a Mozilla DOC-Monitoring Progress in AJAX da dove ho preso questa soluzione.

Ogni browser ha ora una documentazione per il web (come quella qui sopra da Mozilla) e, inoltre, tutti loro stanno contribuendo ad una joint venture comune denominata Web Platform, insieme ad altri giganti Internet e di Web influenti - per un Web aggiornato comune Documentazione. È un lavoro in corso, quindi non completo.

Inoltre, non esiste alcuna funzionalità nativa nel vecchio AJAX, per monitorare i progressi.

Nel vecchio modo, è necessario creare una funzione di intervallo che continui a colpire un URL separato per ottenere l'aggiornamento di avanzamento. Il tuo server deve anche aggiornare l'avanzamento e inviarlo come risposta da quell'URL disponibile da una porta diversa.