Javascript XHR2进度回退

下面的示例使用XHR2中的进度事件在执行AJAX请求时向用户显示进度条：

$.ajax({
    xhr: function() {

        var xhr = new window.XMLHttpRequest();

        xhr.upload.addEventListener('progress', function(evt){

            if (evt.lengthComputable) {

                var percentComplete = (evt.loaded / evt.total) * 100;

                if(percentComplete >= 100){
                    $('#loading-bar').find('.bar').css({'width': percentComplete + '%'});
                    $('#loading-bar')
                    .find('.bar')
                    .on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
                        $('#loading-bar').fadeOut(function(){
                            $('#loading-bar').find('.bar').css({'width': ''});
                        });
                    });
                } else {
                    $('#loading-bar').find('.bar').css({'width': percentComplete + '%'});
                }
            }                               

        }, false);

        return xhr;

    },
    type: 'GET',
    url: 'Test.html',
    success: function (response) {


    },
    error: function (jqXHR, textStatus, errorThrown) {


    }
});

但是，对于不支持XHR2的浏览器，该条不会设置动画，加载条元素也不会从DOM中淡出

如何实现回退？因为我不想在成功时淡出加载栏，因为这将与支持它的浏览器的进度事件发生冲突

---

或者更好的是，是否可以通过其他方式获得进度？

尝试将

.onreadystatechange（）

与

一起使用。readyState

：

getter.onreadystatechange = function() {
    if (loading) { //If the loading element has been loaded...
        if (this.status === 200) { //If this.status is already 200...
            loading.style.width = this.readyState*25+"%"; //This sets the width of loading according to this.readyState
            if (this.readyState === 4) {
                //We hide loadingBar and do stuff when we're done.
                loadingBar.style.display = "none";
               [do stuff]
            }
        }
    }
};

如果您正在接受

100 Continue

状态，您可能还希望在加载栏中说明这一点。现在的情况是，它暂停了一段时间，但当它达到状态

200 OK

时，它会缩放到100%，并且

readyState

属性从

2

变为

4

---

这里是小提琴：

如果是下载进度，我们可以在

xhr.readyState>=3

时进行。只需读取

xhr.responseText.length

，然后将其除以

parseInt（xhr.getResponseHeader（'Content-length'））

（假设服务器提供此标头且其来源相同或具有正确的CORS标头）

---

如果它是上传进度，我不知道有什么方法可以在客户端内完全填充它。我们可以为每个上传会话创建一个id，并使用另一个

xhr

从服务器获取上传进度。然而，这需要在服务器端进行复杂的实现。在公共语言中有许多这样的实现，例如PHP或.NET。您可以查看它们并实现自己的。

一些未实现progress api的浏览器仍然允许您在收到标题后访问

.response.length

和

content length

标题。对于上传，您运气不好。如果支持xhr2并且它不仅仅是淡出，为什么不签入您的成功函数呢。@Bergi我不关心上传进度。。。只是我在问题中展示的下载版本。你有一些我如何使用替代API的例子吗。谢谢。如果我误解了情况，很抱歉，

.readyState

会有帮助吗？也许您可以使用

.readyState

@NobleMushtak简化XHR的加载栏，请随意展示一个示例。谢谢。只对下载进度感兴趣。你能举个简单的例子说明我如何根据你的解决方案更新进度条的宽度吗？谢谢。@Cameron:

xhr.onreadystatechange=function（）{if（xhr.readyState>=3）{var progress=xhr.responseText.length/parseInt（xhr.getResponseHeader（'Content-length'）；}