javascript - 通过XHR的jQuery Ajax进度

我正在尝试捕获ajax请求的进度。我正在关注此链接http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/上的文章。

它没有按预期工作。据我所知，具有id progressCounter的Div应该在其中包含％的内容，但在我的情况下什么也没有发生。有帮助吗？

在我看来if (evt.lengthComputable) {在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");
    }
});

最佳答案

ProgressEvent.lengthComputable



因此，如果您进行一些调试，您会发现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);

DEMO

费耶

如果lengthComputable中的XMLHttpRequestProgressEvent为false，则表示服务器从不在响应中发送Content-Length header。