javascript - 带百分比的 JQuery Ajax 请求

Question

我需要获取 ajax 请求的完成百分比。

我尝试了以下方法:

$(document).ready(function() {
    $.ajax({
        xhr : function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                    //Do something with upload progress here
                }
            }, false);

            xhr.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                    //Do something with download progress
                    console.log(percentComplete);       
                }
            }, false);

            return xhr;
        },
        url : my_path
    }).done(function(data) {

        console.log(data);
    });
}); 

问题是我如何检查上面的代码是否有效。我总是在 firebug 控制台中得到 100，我怀疑控制台中应该有多个 % 条目而不是 100。

my_path 是一个从 MySQL DB 返回记录的 PHP 页面。有什么方法可以减慢进程/页面呈现以检查功能吗？

Answer 1

使用 DB 读取的问题是首先需要知道大小，因此您确实需要一个文件来测试它。

对于下载(客户端从服务器下载)，你需要引入延迟，否则你唯一的办法就是下载一个巨大的文件。

尝试 this script , 它设置了正确的内容长度 header 并且一次只输出 50 个字节，延迟 1 秒(你可以用一个相对较小的文件来测试它，woot)。

至于上传(发布到服务器)，在这方面你唯一的选择是把它做成一个大文件，完成后丢弃它。