我正在尝试捕获ajax请求的进度。
它没有按预期工作。据我所知,id为 progressProdCounter的 Div 应该在其中包含%的内容,但在我的情况下什么也没有发生。有帮助吗? __
在我看来,这if (evt.lengthComputable) {是行不通的XHR
if (evt.lengthComputable) {
XHR
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"); } });
ProgressEvent.lengthComputable只读属性是一个布尔型标志,指示ProgressEvent相关的资源是否具有可以计算的长度。如果不是,则ProgressEvent.total属性没有重大价值。
因此,在您的情况下,如果您进行一点调试,您将发现evt.lengthComputable = false;您无法跟踪进度;
evt.lengthComputable = false;
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);
如果lengthComputable中的false为XMLHttpRequestProgressEvent,则表示服务器从不发送Content- Length header响应。
lengthComputable
XMLHttpRequestProgressEvent
Content- Length header