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

Question

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

例如，当我按下在客户端侧“确定”按钮，它将调用到服务器侧从数据库收集数据，整个过程可能需要2至3分钟。如何显示客户端的加载进度（关于已完成多少％的加载）？

我怎样才能做到这一点在PHP中，阿贾克斯或JavaScript？

Answer 1

一旦你点击了“确定”按钮，你可以开始获取数据的服务器端，并保持在会话中加载的百分比。

这样一来，客户端，你可以让通过AJAX到另一个PHP脚本返回加载的百分比的请求。

你最终会得到2服务器端脚本（一个获取数据和其他获取的百分比）和一个Ajax请求的客户端。

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

Answer 2

我通过分页结果来做到这一点。

首先要求是获得计数。然后将请求分解为一组组。 然后开始一次请求一个组。

例如：如果有100条记录返回，我将它们分开成的10 组，那么我可以很容易地显示10％... 20％...等

我不知道无论如何要做到这一点。

Answer 3

Ajax请求运行时的jQuery可以显示一个初始屏幕（DIV）。这可以通过.ajaxStart和.ajaxEnd（或.ajaxStop）为每个请求完成，或者更复杂的方法是使用Dojo的dojo.io.bind或遵循下面的定期刷新模式。

Periodic Refresh

Answer 4

它不是那么容易的。如果Ajax调用开始处理，你可以做一个分块/多响应（这是大多数DHTML的聊天记录是如何实现的）。谷歌为“COMET”。

基本上它的工作方式是：

1. 客户端：AJAX调用请求的长时间运行动作
2. 服务器的启动：启动长时间运行的动作，echo 0％，flush();（无脚本终止）
3. 客户端：通过刷新内容（特殊回调）接收响应，显示值，但连接保持打开状态！
4. 服务器：在x动作计算百分比，echo和flush();
5. 客户端：见＃3
6. 服务器：如果剧本完成后，终止
7. 客户端：脚本结束正常事件/回调。显示100％，开放式翻页

我一次（当异步JavaScript的还是新！）编码有点演示......这是一个有点倒闭了，但异步部分仍然有效。你可以在这里找到：http://wehrlos.strain.at/httpreq/client.html

的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应该是你的输出数据中永远不会发生的事情（如果你只是显示进度，但仍然是不明智的）。

Answer 5

的multipart/X - 混合取代;与冲洗应该在无状态的负载平衡环境中工作。 依赖定期GET请求来检查进度的方法在后续请求可能转到不同后端的环境中不会成功。

Answer 6

我需要做同样的事情 - 跟踪阿贾克斯数据下载进度 - 所以我会后，我万一有人使用的溶液碰到这个线程：

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) { ... }