aggiornamento barra di avanzamento utilizzando AJAX richiesta secondi

Question

Basicaly, sto eseguendo una richiesta AJAX per un sistema di accesso esterna, come posso aggiornare la barra di avanzamento in base alla lunghezza della richiesta?

Ad esempio, la richiesta avviene tra 1.30s a 1.40s per completare, come posso aggiornare un barra di avanzamento in base a determinati intervalli, come aggiornarlo il 10% ogni 10ms o qualcosa del genere, ecco il layout HTML per la barra di avanzamento

<div class="progress progress-striped active"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%"> 
     <span class="sr-only">65% Complete</span> 
    </div> 
</div> 

la lunghezza della barra di avanzamento è determinato utilizzando il width: 65% attributo

l'idea è quella di arrivare in fondo a guardare come se fosse l'aggiornamento in base alla richiesta in modo che quando la richiesta è completa la barra percentuale è piena

Answer 1

Penso che questo post è abbastanza chiaro http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

questo distacco per riferimenti futuri (dovrebbe essere rimosso il blog):

$.ajax({ 
    xhr: function(){ 
     var xhr = new window.XMLHttpRequest(); 
     //Upload progress 
     xhr.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with upload progress 
     console.log(percentComplete); 
     } 
     }, false); 
    //Download progress 
     xhr.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
      var percentComplete = evt.loaded/evt.total; 
     //Do something with download progress 
      console.log(percentComplete); 
     } 
     }, false); 
     return xhr; 
    }, 
    type: 'POST', 
    url: "/", 
    data: {}, 
    success: function(data){ 
    //Do something success-ish 
    } 
});