使用 ajax 请求显示进度条进度答案

【问题标题】：showing progressbar progress with ajax request使用 ajax 请求显示进度条进度
【发布时间】：2010-03-19 01:52:53
【问题描述】：

我想在 ajax 请求触发和完成时使用 jquery ui 进度条显示进度。问题是我不知道如何根据 ajax 请求的进度设置进度条的值。这是一个开始的代码：

function ajaxnews()
    {
        $('.newstabs a').click(function(e){
            var section = $(this).attr('id');
            var url = base + 'news/section/' + section;

            $.ajax({
                url : url,
                dataTye : 'html',
                start : loadNews,
                success : fillNews
            });
        });
    }



// start callback functions
   function loadNews()
   {

       $('#progressbar').fadeIn();
       $('#progressbar').progressbar({ //how shoud I set the values here});
   }

   function fillNews()
   {
    $('#progressbar').progressbar('option', 'value', ?? /* how do I find this?*/);   
    $('#progressbar').fadeOut();
   }

【问题讨论】：

可以通过绑定进度事件来获取下载状态。查看此示例 - gist.github.com/nebirhos/3892018
还有 - github.com/kpozin/jquery-ajaxprogress
这里我实现了 proggressbar(js-control-files-uploader.itweb-projects.com)，但我使用 xhr.upload.addEventListener('progress', ... Github : github.com/dimitardanailov/js-control-files-uploader/blob/…

标签： javascript jquery-ui jquery

【解决方案1】：

根本问题是您不知道请求需要多长时间。

对于进度条，您需要设置一个百分比，或完成的步骤数。

如果您不希望进度条只是从 0 跳到 100，则需要在请求完成之前测量完成率。

如果您能猜到需要多长时间，您可以使用计时器让它自动递增到 90%，当服务器响应时，将其设置为 100%。当然，这有点假。

如果您有多个请求，您可以使用已完成请求的数量作为百分比。如果有意义，您可以将单个请求分解为多个，但请仔细考虑这对网络流量和响应时间的影响。不要只是为了进度条而这样做。

如果请求确实需要很长时间，您可以向服务器发出额外的请求以查询进度。但这可能意味着服务器端的大量工作。

抱歉，进度条很难...

【讨论】：

...还是坚持使用经典的预加载器 gif 吧？

【解决方案2】：

我在我们公司的内部应用程序中遇到了这种情况。这是一个关键的应用程序，我们需要向用户展示进度。因此，尽管@Thilo 提到了网络流量，但我们必须实施它，以便在长时间运行的过程完成时通知用户以及它如何随着时间的推移而进展。

我们把它分解成小块。

在服务器端代码上生成一个线程以运行特定进程。对于 ASP.Net，它是这样的：

System.Threading.ThreadPool.QueueUserWorkItem(AddressOf MyProcessRoutine, objectParameter)
在此“MyProcessRoutine”中运行您长时间运行的代码，并为您要监控的每个步骤更新计数器的静态变量或持久化数据库。
李>
创建另一个函数例程，不断检查此计数器并返回当前值。例如：Public Shared Function CheckStatus() As Integer
从您的客户端代码持续轮询此例程，例如每 5 秒一次（取决于您可以承受多少网络流量以及您想要多少精度。例如：timer = setInterval("MyWebService.CheckStatus();", 500);
在您的客户端代码中，使用此返回值（计数器）来更新您的进度条。

除了一个计数器之外，您还可以返回一个包含相关详细信息的对象，例如记录 ID，以向用户显示进程当前所在的位置。

确保您非常小心地处理线程，处理所有可能的异常并进行适当的清理。

【讨论】：

【解决方案3】：

我不使用 jquery，但这可能对你有帮助。

这是一个带有假后备的动画 Ajax 进度条。

我只是传递了一个虚假的大小，知道我的脚本的平均大小

所以如果我的脚本大小约为 50-100kb，我将假大小设置为 150kb。

如果计算出的长度不可用，我会使用假尺寸。

在这个脚本中，我还添加了一个额外的检查，以确保条形尺寸始终小于容器。

只需乘以 fake-size *2 .. 如果它小于加载的数据。

为了让事情看起来更漂亮，我还添加了一个 css3 过渡效果，使其延迟 700 毫秒。

此动画延迟添加了使进度条看起来真实所需的一切。

复制并粘贴到 html 文件中，然后使用现代浏览器（如 chrome）进行检查。

将 YOURSITE 替换为 ajax 内容站点...或其他任何内容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Progress</title>
<style>
#progress{
 width:300px;
 height:20px;
 border:1px solid rgba(0,0,0,0.5);
}
#bar{
 width:0%;
 height:20px;
 background-color:green;
 -webkit-transition:width 700ms ease;   
}
</style>
<script>
var
pb,
fakeSize=100000,//~100kb
progress=function(e){
 fakeSize=(e.loaded>fakeSize?(fakeSize*2):fakeSize);//Bonus
 var tot=(e.lengthComputable?e.total:fakeSize);
 pb.style.width=(100/tot*e.loaded)+'%';
},
onloaded=function(e){
 pb.style.width='100%';
},
ajax=function(a,c){
 c=new XMLHttpRequest;
 c.open('GET',a);
 c.onprogress=progress;
 c.onload=onloaded;
 c.send()
};
window.onload=function(){
 pb=document.getElementById('bar');
 ajax('YOURSITE');
}
</script>
</head>
<body>
<div id="progress"><div id="bar"></div></div>
</body>
</html>

你基本上只需要在 jquery 中使用进度功能，然后在脚本加载后将栏设置为 100%。

【讨论】：

【解决方案4】：

编辑：为了后代，我在下面留下了我以前的答案，但鉴于它实际上并没有回答所提出的问题，我正在提供一个新的答案。

有关该问题的一些 cmets 指出了完成此任务的新方法。感谢 HTML5 和较新的 XHR2，可以对 AJAX 请求的进度进行回调。这涉及您向 XHR 对象添加事件侦听器并为适当的属性提供回调。 This 页面有很好的上传和下载示例，this git repo 看起来不错，最近更新了。

另外，如果您真的有兴趣深入研究 XHR 和覆盖，this Mozilla doc 帖子也应该会有所帮助。事实上，这篇文档似乎就是我提到的 git repo 的基础。

旧答案：对于编写 Web 应用程序的人来说，这是一个古老的问题，虽然 Thilo 是对的，但这已不再像以前那样困难。当前最好的（imo）解决方案是“分块”您正在上传的文件并在每次上传块时更新进度条。 This SO question 它的答案是开始理解这个概念甚至如何将其应用于您的情况的好地方。

但我只想说，您要做的就是获取您正在上传的文件并在客户端将其拆分为更小的部分。这样做有几个潜在的好处，但在这种情况下，主要的好处是它可以让您知道每次指定百分比的文件已上传到服务器。显然，每次上传块时，您都可以相应地更新进度条。

像这样对文件进行分块还可以让您有效地“暂停”或“恢复”上传，因为您可以在任何给定时间上传文件的不同部分。

【讨论】：

我不确定我是否理解您的问题。用户上传了一个由您的前端代码抓取的文件。然后，您将文件拆分为多个块，并一次将其发送到您的服务器端代码。您可以在任何类型的文件上使用它，它可以让您知道在任何给定时间已上传文件的百分比。
OP中没有提到上传文件。
哇，我刚刚重新阅读了这个问题，你是对的。失败。我将编辑/修改我的答案。

【解决方案5】：

server side events 应该可以做到这一点

【讨论】：