aktualizacja paska postępu przy użyciu żądania ajax sekund

Question

Generalnie, wykonuję żądanie AJAX dla zewnętrznego systemu logowania, w jaki sposób mogę zaktualizować pasek postępu na podstawie długości żądania?

Na przykład, żądanie trwa od 1.30s do 1.40s do wypełnienia, w jaki sposób mogę zaktualizować pasek postępu na podstawie pewnych odstępach czasu, jak aktualizować to 10% co 10 ms lub coś, oto układ HTML pasek postępu

<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> 

długość paska postępu jest określana przy użyciu atrybutu

Chodzi o to, aby po prostu dostać to wyglądać to aktualizowanie na podstawie wniosku tak, gdy wniosek jest kompletny width: 65% pasek odsetek jest pełna

Answer 1

myślę, że ten post jest zupełnie jasne http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

Delegowanie to na przyszłość (blog powinien być usunięty):

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