JQuery ajax progress via xhr

问题:

I am trying to capture ajax request`s progress. I am following article from this link http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/.

It is not working as expected. Div with id progressCounter should have something in it with % as far as i understand it but nothing happens in my case. Any Help ?

It seems to me like if (evt.lengthComputable) { is not working in XHR

JSFIDDLE: http://jsfiddle.net/bababalcksheep/r86gM/

HTML:

<div id="progressCounter"></div><br> <div id="loading">Loading</div><br> <div id="data"></div> 

JS:

var progressElem = $('#progressCounter'); var URL = "https://api.github.com/users/mralexgray/repos"; $("#loading").hide(); // write something in #progressCounter , later will be changed to percentage progressElem.text(URL);  $.ajax({     type: 'GET',     dataType: 'json',     url: URL,     cache: false,     error: function (xhr, ajaxOptions, thrownError) {         alert(xhr.responseText);         alert(thrownError);     },     xhr: function () {         var xhr = new window.XMLHttpRequest();         //Download progress         xhr.addEventListener("progress", function (evt) {             if (evt.lengthComputable) {                 var percentComplete = evt.loaded / evt.total;                 progressElem.html(Math.round(percentComplete * 100) + "%");             }         }, false);         return xhr;     },     beforeSend: function () {         $('#loading').show();     },     complete: function () {         $("#loading").hide();     },     success: function (json) {         $("#data").html("data receieved");     } }); 

回答1:

ProgressEvent.lengthComputable

The ProgressEvent.lengthComputable read-only property is a Boolean flag indicating if the resource concerned by the ProgressEvent has a length that can be calculated. If not, the ProgressEvent.total property has no significant value.

So in your case if you debug a little , you will find evt.lengthComputable = false; so you can not trace the progress;

    xhr.addEventListener("progress", function (evt) {         console.log(evt.lengthComputable); // false         if (evt.lengthComputable) {             var percentComplete = evt.loaded / evt.total;             progressElem.html(Math.round(percentComplete * 100) + "%");         }     }, false); 

DEMO

---

FYI

If lengthComputable is false within the XMLHttpRequestProgressEvent, that means the server never sent a Content-Length header in the response.

回答2:

FOR PHP

if (evt.lengthComputable) { is not working in XHR, I did this and now it is working.

PHP:

$startTime = time();  //your code or  sleep(10);  $endTime = time() - $startTime;  header('Content-Length: '.strlen($endTime)); $response['success'] = true; echo json_encode($response); 

Here is my HTML:

<div class="progress"> <div id="bulk-action-progbar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width:1%">                  </div> </div> 

Ajax:

var percentComplete = 1; $.ajax({     method: 'post',     url: 'test.php',     data:{'actionPerform':'actionPerform'},     xhr: function(){           var xhr = new window.XMLHttpRequest();           //Upload progress, request sending to server           xhr.upload.addEventListener("progress", function(evt){             console.log("in Upload progress");             console.log("Upload Done");           }, false);           //Download progress, waiting for response from server           xhr.addEventListener("progress", function(e){             console.log("in Download progress");             if (e.lengthComputable) {               //percentComplete = (e.loaded / e.total) * 100;               percentComplete = parseInt( (e.loaded / e.total * 100), 10);               console.log(percentComplete);               $('#bulk-action-progbar').data("aria-valuenow",percentComplete);               $('#bulk-action-progbar').css("width",percentComplete+'%');              }             else{                  console.log("Length not computable.");             }           }, false);           return xhr;     },     success: function (res) {         //...     } }); 

回答3:

A simple roundabout of handling this could be the following.

$(document)     .ajaxStart(         function() {              $                 .blockUI({                     message : '<img src="img/loadajax.gif" title="Loading..">Loading...',                     css : {                         padding : 20,                         margin : 5,                         width : '30%',                         top : '40%',                         left : '35%',                         textAlign : 'center',                         color : '#000',                         border : 'none',                         backgroundColor : '#fff',                         cursor : 'wait'                     }                 });             });  $(document).ajaxStop(function() {     $.unblockUI(); }); 

Just give the path of the GIF that you want to show in the image src. Add this code at the onload of your page or common layout/jsp or header file to run everywhere for all ajax calls

文章来源: JQuery ajax progress via xhr