在php、ajax或javascript中加载进度？

任何人都知道，当系统仍在服务器端获取数据时，如何在客户端显示已完成%的加载进度

例如，当我在客户端按下“ok”按钮时，它将调用服务器端从数据库收集数据，整个过程可能需要2到3分钟。如何在客户端显示加载进度（大约完成了多少%的加载）

---

如何在php、ajax或javascript中实现这一点？

我通过分页结果来实现这一点

第一个请求是获取计数。然后将请求分成一组。 然后开始一次请求一个组

例如：如果有100条记录要返回，我将它们分成10组。 然后我可以很容易地显示10%。。。20%……等等

---

我不知道该怎么做。

jQuery可以在ajax请求运行时显示初始屏幕（div）。可以使用.ajaxStart和.ajaxEnd（或.ajaxStop）对每个请求执行此操作，或者更复杂的方法是使用Dojo的Dojo.io.bind或遵循下面的定期刷新模式

单击“确定”按钮后，就可以开始从服务器端获取数据，并在会话中保持加载百分比

这样，客户端就可以通过AJAX向另一个php脚本发出请求，返回加载的百分比

您将得到两个服务器端脚本（一个用于获取数据，另一个用于获取百分比）和一个AJAX请求客户端

---

我认为这是一个简单的解决方案，应该做得很好。

没有那么容易。如果ajax调用启动处理，您可以执行分块/多部分响应（这就是大多数dhtml聊天的实现方式）。谷歌搜索“彗星”

基本上它是这样工作的：

客户端：请求启动长时间运行操作的ajax调用

服务器：启动长时间运行的操作，

echo

0%，

flush（）（无脚本终止）

客户端：接收刷新内容的响应（特殊回调），显示值，但连接保持打开状态

服务器：在x操作后计算百分比，

echo

和

flush（）

客户：见#3

服务器：如果脚本已完成，请终止

客户端：脚本结束时的正常事件/回调。显示100%，打开下一页

我曾经（当异步javascript还是新的时候！）编写了一个小演示。。。它现在有点不存在了，但异步部分仍然可以工作。你可以在这里找到它：

使用的javascript客户端代码

function asSendSyncMulti() {
    var httpReq = new XMLHttpRequest();

    showMessage( 'Sending Sync Multipart ' + (++this.reqCount)  );

    // Sync - wait until data arrives
    httpReq.multipart   = true;     
    httpReq.open( 'GET', 'server.php?multipart=true&c=' + (this.reqCount), false );
    httpReq.onload = showReq;
    httpReq.send( null );
}

function showReq( event ) {
    if ( event.target.readyState == 4 ) {
        showMessage( 'Data arrives: ' + event.target.responseText );
    }
    else {
        alert( 'an error occured: ' + event.target.readyState );
    }
}

多部分部分的服务器端php代码：

<?php

    $c = $_GET[ 'c' ];

        header('Content-type: multipart/x-mixed-replace;boundary="rn9012"');

        sleep( 1 );

        print "--rn9012\n";
        print "Content-type: application/xml\n\n";
        print "<?xml version='1.0'?>\n";
        print "<content>Multipart: First Part of Request " . $c . "</content>\n";
        print "--rn9012\n";
        flush();

        sleep( 3 );

        print "Content-type: application/xml\n\n";
        print "<?xml version='1.0'?>\n";
        print "<content>Multipart: Second Part of Request " . $c . "</content>\n";
        print "--rn9012--\n";
?>

这只不过是朝着一个可能的方向轻推而已。不兼容html或跨浏览器。使用json而不是xml

---

在服务器端，必须关闭输出缓存（例如用于压缩），否则

flush（）不会做任何事情。而且，
--rn9012
应该是输出数据中从未出现过的内容（如果只是显示进度，但仍然显示，则不显示）。
multipart/x-mixed-replace；with flush应在无状态负载平衡环境中工作。
依赖周期性GET请求检查进度的方法在后续请求可能转到不同后端的环境中不会成功。
我需要做同样的事情——跟踪Ajax数据下载进度——因此我将发布一个解决方案，以防有人碰到此线程：

var req = new XMLHttpRequest();

req.addEventListener("progress", onUpdateProgress, false);
req.addEventListener("load", onTransferComplete, false);
req.addEventListener("error", onTransferFailed, false);
req.addEventListener("abort", onTransferAborted, false);

req.open("GET", ..., true);

...

req.send()

function onUpdateProgress(e) {
  if (e.lengthComputable) {
    var percent_complete = e.loaded/e.total;
    document.getElementById("progressMessage").value = Math.round(percentComplete*100) +"% [ " + Math.round(e.loaded / 1000) + " KB ]";
    ...
  } else {
    // Length not known, to avoid division by zero
  }
}

function onTransferComplete(e) { ... }

function onTransferFailed(e)   { ... }

function onTransferAborted(e)  { ... }