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

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

我正在开发一个经常使用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);

及

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

有人知道这方面的解决方法吗？我对这方面的深入教程也很感兴趣，因为我也找不到任何能通过上面的代码解释xhr对象的内容

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

非常感谢你

$.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!');
                            }
                        },

                    });