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

我希望在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(); } 

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

对于进度条,您需要设置百分比或已完成步骤的数量。

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

如果你能猜出它需要多长时间,你可以使用一个计时器让它自动递增到90%,当服务器响应时,将它设置为100%。 当然,这是假装它。

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

如果请求确实需要很长时间,您可以启动对服务器的其他请求以查询进度。 但这可能意味着很多服务器端的工作。

对不起,但进度条很难……

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

我们把它分解成小块。

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

    System.Threading.ThreadPool.QueueUserWorkItem(AddressOf MyProcessRoutine, objectParameter)

  2. 在此“ MyProcessRoutine ”中运行长时间运行的代码,并为要监视的每个步骤更新计数器的静态变量或在数据库中保留。

  3. 创建另一个函数例程,它继续检查此计数器并返回当前值。 例如: Public Shared Function CheckStatus() As Integer

  4. 从您的客户端代码开始,每隔5秒轮询一次此例程(取决于您可以承受多少网络流量以及您需要多少精度。例如: timer = setInterval("MyWebService.CheckStatus();", 500);

  5. 在客户端代码中,使用此返回值(计数器)更新进度条。

除了一个计数器,您还可以返回一个包含相关详细信息(如record-id)的对象,以向用户显示该进程当前所处的位置。

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

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

这是一个带有假回退的动画Ajax进度条。

我只是通过一个假大小知道我的脚本的平均大小

因此,如果我的脚本大约是50-100kb,我将假大小设置为150kb。

如果计算的长度不可用,我使用假大小。

在这个脚本中,我还添加了一个额外的检查,即条形大小始终小于容器。

简单地通过乘以假大小* 2 ..如果它小于加载的数据。

为了让事情看起来不错,我还添加了css3过渡效果,以便延迟700ms。

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

复制并粘贴到html文件中,并使用像chrome这样的现代浏览器进行检查。

用ajax内容网站替换YOURSITE ……或者其他什么。

     Ajax Progress     

你基本上只需要在jquery中使用progress函数,然后在加载脚本时将栏设置为100%。

编辑:对于后代我在下面留下了我之前的答案,但看到它实际上没有回答被问到的问题我提供了一个新的答案。

关于这个问题的一些评论指出了实现这一目标的新方法。 感谢HTML5和更新的XHR2,可以对AJAX请求的进度进行回调。 这涉及到向XHR对象添加事件侦听器并向适当的属性提供回调。 这个页面有很好的上传和下载示例, 这个git repo看起来不错,最近已经更新。

此外,如果你真的有兴趣深入挖掘XHR和覆盖,那么这个Mozilla docpost也应该有很多帮助。 事实上,这篇博文似乎是我提到的git repo所依据的。

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

但是可以说,你要做的就是把你正在上传的文件分成小块,放在客户端。 这有几个潜在的好处,但在这种情况下的主要好处是,它允许您在每次将文件的指定百分比上载到服务器时知道。 显然,每次上传一个块时,您都可以相应地更新进度条。

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

这应该可以用于服务器端事件