如何在Ajax和Perl中创建Web进度条？

Question

我们使用ajax调用将数据发送到服务器。服务器端编程使用Perl将数据保存到数据库中。

由于我们有大尺寸的文件，我们希望显示一个进度条，告诉用户发布到服务器的百分比数据。如何使用Ajax和Perl实现这一目标？

先谢谢。

Answer 1

在较高的层面上，我可能会通过在页面上放置一个宽度为零的带有彩色背景（或图像）的空display: block元素来执行此操作，然后对服务器运行定期的AJAX回调获取进度更新并相应地增加元素的宽度。 （我怀疑COMET将是一种更有效的方式来处理这类事情，因为我读过的描述表明它是一个服务器推送版本的AJAX，所以它会消除轮询开销，但我还没有真正看着COMET所以我可能会误解它。）

在较低的层面上，实现这一点的实际代码在很大程度上取决于你如何使用AJAX。您使用的是JQuery，CGI::Ajax，不同的模块（CPAN或其他），还是您自己的手动AJAX处理代码？

Answer 2

有几个预先编写的脚本可以实现这一目标：

• http://www.sibsoft.net/xupload.html
• http://www.webdice.org/uber_uploader/

Answer 3

使用Comet：推送更新页面中进度条元素的定期Javascript标记。你还需要发送额外的空格，以便浏览器更新页面（在Perl中找到相当于PHP的flush（））。

例如，每上传10％的数据，请按

<script type="text/javascript">progressBar(10)</script>
<script type="text/javascript">progressBar(20)</script>
...
<script type="text/javascript">progressBar(100)</script>

其中progressBar(percentage)是一个更新进度条宽度的函数（我假设你在页面上有jQuery）：

function progressBar(percentage) {
    $('#progressbardiv').css('width', percentage + 'px');
}