带有百分比的 JQuery Ajax 请求

Posted 2023-02-24

【中文标题】带有百分比的 JQuery Ajax 请求

【英文标题】：JQuery Ajax Request with Percentage

【发布时间】：2014-06-30 15:25:32

【问题描述】：

我需要获得 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);
    );
); 

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

my_path 是一个从 mysql 数据库返回记录的 php 页面。有什么方法可以减慢进程/页面渲染以检查功能？

【问题讨论】：

***.com/questions/16690740/… 的可能重复项

@Manibharathi 我已经实现了该功能，需要通过减慢页面渲染或数据库操作来检查 % 功能？

你在本地系统中使用过吗？

什么的百分比？在纯理论层面上考虑它。如果尚未完成接收请求，浏览器应该如何知道请求的大小？如果您让服务器通过 Content-Length 标头宣布大小，那是一回事，但在您流回结果的情况下（我相信这是 php 通常所做的），这是不可能的。

@GeorgeMauer - 上传时，浏览器知道文件大小。下载时，必须在Header信息中设置，这在PHP中是不可能的（见我的回答，下面）。

【参考方案1】：

使用 DB 读取的问题是首先需要知道大小，所以你真的需要一个文件来测试它。

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

试试this script，它设置了正确的内容长度标头，一次只输出 50 个字节，延迟 1 秒（你可以用一个相对较小的文件来测试它，woot）。

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