JQuery通过xhr实现ajax进度

10 浏览
0 Comments

JQuery通过xhr实现ajax进度

我正在尝试捕获ajax请求的进度。 我正在遵循这个链接中的文章：http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/。

但是结果不如预期。根据我的理解，id为progressCounter的div应该显示一个百分比，但在我的情况下没有任何变化。有什么帮助吗？

我觉得在XHR中，if (evt.lengthComputable) { 这一段没有起作用。

JSFIDDLE链接：http://jsfiddle.net/bababalcksheep/r86gM/

HTML代码：

加载中

JS代码：

var progressElem = $('#progressCounter');
var URL = "https://api.github.com/users/mralexgray/repos";
$("#loading").hide();
// 在 #progressCounter 中写入一些内容，稍后将更改为百分比
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();
        // 下载进度
        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("数据已接收");
    }
});

0