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