Question

我有以下示例，该示例使用XHR2中的progress事件在执行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中淡化加载栏元素。

如何实施回退？因为我不想在成功时淡化加载栏，因为这会与支持它的浏览器的进度事件冲突。

或者更好的是可以通过其他方式取得进展？

Answer 1

如果是下载进度，我们可以在xhr.readyState >= 3时执行此操作。只需阅读xhr.responseText.length，然后将其除以parseInt(xhr.getResponseHeader('Content-Length'))（假设服务器提供此标头，并且它是相同的来源或正确的CORS标头）。

如果它是上传进度，我不知道任何纯粹在客户端内填充它的方法。我们可以为每个上传会话创建一个id，并使用另一个xhr来从服务器获取上传接收进度。但是，这需要在服务器端进行复杂的实现。在通用语言中有许多这样的实现，例如PHP或.NET。您可以查看它们并实现自己的。

Answer 2

尝试将.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并且readyState属性来自2时，它会缩放到100％到4。

这里是小提琴：http://jsfiddle.net/NobleMushtak/QRuU6/

XHR2进展后退

2 个答案: