如何在 jQuery 中显示服务器脚本的进度?

Posted

技术标签:

【中文标题】如何在 jQuery 中显示服务器脚本的进度?【英文标题】:How to display the progress of a server script in jQuery? 【发布时间】:2010-09-09 10:51:57 【问题描述】:

使用此代码,我可以在服务器脚本运行时显示动画 gif:

function calculateTotals() 
    $('#results').load('getResults.php', null, showStatusFinished);
    showLoadStatus();


function showLoadStatus() 
    $('#status').html('');



function showStatusFinished() 
    $('#status').html('Finished.');

但是,我想显示脚本有多远的状态,例如“正在处理 20000 的第 342 行...”并一直计数直到完成。

我该怎么做?我可以制作一个服务器脚本,它不断包含更新的信息,但是我在哪里放置命令来读取这个,比如说,每秒?

【问题讨论】:

【参考方案1】:

在阅读了你对 Andrew 的回答之后。

你会读到这样的状态:

function getStatus() 
    $.getJSON("/status.php","session":0, "requestID":12345, 
    function(data)  //data is the returned JSON object from the server name:"value"
          setStatus(data.status);
          window.setTimeout("getStatus()",intervalInMS)
    );

使用这种方法你可以在服务器上同时打开多个 XHR 请求。

关于输出的所有 status.php 是:

"status":"We are done row 1040/45983459"

但是,您可以在响应中输出所需的尽可能多的信息并进行相应的处理(例如,提供进度条或执行动画......)

有关 $.getJSON 的更多信息,请参阅http://docs.jquery.com/Ajax/jQuery.getJSON

【讨论】:

【参考方案2】:

我不同意 jQuery 的具体细节,但不涉及轮询的一般答案是:使用 forever frame 技术的变体。基本上,创建一个隐藏的 iframe,并将其 src 设置为“getresults.php”。在 getresults 中,您“流式传输”返回脚本块,这些脚本块是对父文档中的 javascrpt 函数的调用,该函数实际上更新了进度。这是an example,它展示了永久框架背后的基本思想。 (不过我不建议使用他的实际 JS 或 HTML,它是相当平均的)

【讨论】:

【参考方案3】:

您的服务器端脚本应该以某种方式将其进度保持在服务器上的某个位置(文件、数据库中的字段、memcached 等)。

您应该有返回当前进度的 AJAX 函数。每秒轮询一次此函数并相应地呈现结果。

【讨论】:

【参考方案4】:

如果不知道您的服务器端代码是如何工作的,就很难说。但是,该过程分为三个阶段。首先,您需要调用一个工作创建脚本。这将返回一个 ID 号并设置服务器工作。接下来,每隔一秒左右,您需要调用一个状态脚本,该脚本会返回您想要显示的状态消息。该状态脚本还需要返回一个值,指示作业是否已完成。当状态脚本显示作业已完成时,您将停止轮询。

如何获得此状态脚本是了解作业的状态很大程度上取决于服务器的设置方式,但可能涉及在作业期间的不同时间点将消息写入数据库表。然后状态脚本从数据库中读取此消息。

【讨论】:

对,但是我应该把读取状态脚本的行放在哪里?这就是我不明白的。我不能在我的 showLoadStatus() 函数中执行此操作,因为它只执行一次。

以上是关于如何在 jQuery 中显示服务器脚本的进度?的主要内容,如果未能解决你的问题,请参考以下文章

使用jquery给网站添加下载进度显示

获取由 jQuery post 调用的 PHP 脚本的进度

怎么样在jQuery progressbar中通过Ajax请求实现后台进度实时功能

如何使用jquery监控ajax请求的进度响应

jquery ajax交互 进度条显示

异步上传文件(jquery.form)+进度条+上传到ftp服务器