Question

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

Answer 1

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

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

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

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

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

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

抱歉，进度条很难......

Answer 2

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

我们把它分解成小块。

在服务器端代码上生成一个线程来运行特定进程。对于ASP.Net来说就像这样：

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

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

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

Answer 3

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

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

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

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

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

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

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

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

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

copy＆amp;粘贴到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中使用progress函数，然后在加载脚本时将栏设置为100％。

Answer 4

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

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

此外，如果您真的对挖掘XHR和覆盖感兴趣，this Mozilla doc帖子也应该有很多帮助。事实上，这个文档帖子似乎是我提到的git repo基于。

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

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

像这样分块文件也可以让你有效地“停顿”＃34;或者＆＃34;恢复＆＃34;上传，因为您可以在任何给定时间上传文件的不同部分。

Answer 5

这应该可以通过server side events

来实现

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

5 个答案: