Question

我知道在这方面还有其他线索，但我仍然觉得很难理解这个问题的所有方面。

我正在开发一个使用Ajax的Web应用程序（使用jQuery和PHP）。一切都很好，虽然我想在顶部显示一个进度条 - 有点像youtube（加载内容时请参阅窗口顶部的红色加载程序）。我已经看到很多使用xhr对象来处理这个问题的建议 - 但是这要求所请求的页面有一个内容长度的标题。由于我的所有页面都根据url动态加载了不同数量的内容，因此我发现很难适当地设置此标头。

所以，如果我设置这样的代码：

    (function($, window, undefined) {
    //is onprogress supported by browser?
    var hasOnProgress = ("onprogress" in $.ajaxSettings.xhr());

    //If not supported, do nothing
    if (!hasOnProgress) {
        return;
    }

    //patch ajax settings to call a progress callback
    var oldXHR = $.ajaxSettings.xhr;
    $.ajaxSettings.xhr = function() {
        var xhr = oldXHR();
        if(xhr instanceof window.XMLHttpRequest) {
            xhr.addEventListener('progress', this.progress, false);
        }

        if(xhr.upload) {
            xhr.upload.addEventListener('progress', this.progress, false);
        }

        return xhr;
    };
})(jQuery, window);

和

$.ajax({
                        url: url,
                        success: function(result) {

                        },
                        error: function() {
                            alert('ajax failure');
                        },
                         progress: function(e) {
                            if(e.lengthComputable) {
                                var pct = (e.loaded / e.total) * 100;
                                // do something - like change a progressbar
                            } else {
                                console.warn('Content Length not reported!');
                            }
                        },

                    });

这将导致控制台发出警告，因为浏览器在整个事件已经加载之前并不知道文件有多大。

有没有人知道这方面的解决方法？我对这方面的深入教程非常感兴趣，因为我无法通过上面的代码找到解释xhr对象的任何内容。

注意：我对设置微调器并加载正常的ajax事件不感兴趣。我有兴趣能够获得所请求文件的负载百分比。

非常感谢你。

如何获取下载的ajax请求的进度

0 个答案: