Javascript 通过xhr实现jqueryajax进度

我试图捕获ajax请求的进度。我从这个链接下面的文章

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

在我看来，如果（evt.lengthComputeable）{在

XHR

JSFIDDLE:

HTML:

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

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");
    }
});

---

处理此问题的简单方法如下所示

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

$（文档）
.ajaxStart(
函数（）{
$
布卢库伊先生({
消息：“正在加载…”，
css:{
填充：20，
差额：5，
宽度：“30%”，
前几名：“40%”，
左：35%，
textAlign:'中心'，
颜色：“#000”，
边界：“无”，
背景颜色：“#fff”，
光标：“等待”
}
});
});
$（文档）.ajaxStop（函数（）{
$.unbui（）；
});

只需给出要在图像src中显示的GIF的路径。 在页面或公共布局/jsp或头文件的onload处添加此代码，以便在任何地方为所有ajax调用运行

ProgressEvent.LengthComputeable ProgressEvent.LengthComputeable只读属性是布尔值 指示ProgressEvent所涉及的资源是否具有 可以计算的长度。如果不是，则ProgressEvent.total 财产没有重大价值

因此，在您的情况下，如果稍微调试一下，您将发现

evt.lengthComputeable=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);

---

供参考 如果

XMLHttpRequestProgressEvent

中的

lengthComputeable

为false，则表示服务器在响应中从未发送

内容长度头
如果（evt.lengthComputeable）{在XHR中不起作用，我这样做了，现在它起作用了

PHP:

这是我的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>

尝试在$（documnt.ready（函数（{//yourcode}））中编写代码仍然不起作用。如果您查看文件，则此代码正在工作。您有什么错误类型，您是否查看firebug控制台错误，您是否在文件中添加了jquery库是的，我在标题中有jquery，并且div的id=“progressCounter”完成后，将100%作为文本，但我没有更新此div，因为没有执行XHR操作。没有。我不想加载gif或ui阻止程序或覆盖。我需要XHR事件是的，就是这样。但是你能指定为什么在我的情况下
evt.lengthComputeable
是
false
。如果我使用指向本地json文件的链接，我会得到100%的字符串。如果我使用演示字符串
“https://api.github.com/users/mralexgray/repos"
，它不工作。这是为什么？我有一个服务器可以在请求时返回json。我该怎么做才能确保当我使用ajax调用它时，返回的是lengthComputable json。我在这里感到困惑。因为您的资源没有可计算的长度。您可能还对啊哈感兴趣。好的。内容长度是问题所在。谢谢。@django No..Its在所有浏览器中都不受支持..您可以检查
<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>

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