設置AJAX進度條

Question

Ok im新增AJAX。有一種知道請求的生命週期的方式，IE使用ActiveXObject類似的東西。

但是現在我正面臨現實世界的問題。我有一個運行在後臺的servlet執行許多任務，我想顯示一個進度條來顯示進程所處的位置，並顯示實際發生的事情。

到目前爲止，在服務器端，我可以計算在開始之前會發生的進程數，並且很容易在每個進程完成後添加一個計數器以增加 - 因此可以找到我希望顯示的百分比。

在哪裏我應該輸出從增量等收集的數據我不知道迄今爲止它是處於休眠狀態，因爲在處理java類中的2個整數。

任何幫助將不勝感激。

到目前爲止，我已看過this，我想這就是我想要的。

乾杯。

Answer 1

基本上，您希望存儲對任務的引用，並且本身也會在HTTP會話中（或者在涉及應用程序範圍任務的Servlet上下文中）存儲它的進度。這樣，您必須能夠在每個HTTP請求中檢索有關它的信息。

在JavaScript中，您可以使用setTimeout()或setInterval()在特定超時或特定間隔後執行函數。您可以使用它來重複觸發Ajax請求以請求進度的當前狀態。一旦檢索到狀態，例如在最大值爲100（百分比）的整數的味道中，只需更新表示進度條的一些div和/或相應HTML DOM樹中的百分比文本。

jQuery在解決Ajax請求和遍歷/操縱HTML DOM樹時非常有用。它最大限度地減少了代碼冗長和交叉瀏覽器兼容性問題。

試想一下，該servlet看起來像這樣的doGet()：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    String processId = "longProcess_" + request.getParameter("processId"); 
    LongProcess longProcess = (LongProcess) request.getSession().getAttribute(processId); 
    int progress = longProcess.getProgress(); 

    response.setContentType("application/json"); 
    response.setCharacterEncoding("UTF-8"); 
    response.getWriter().write(String.valueOf(progress)); 
} 

然後你可以使用它像如下：

function checkProgress() { 
    $.getJSON('progressServlet?processId=someid', function(progress) { 
     $('#progress').text(progress + "%"); 
     $('#progress .bar').width(progress); 

     if (parseInt(progress) < 100) { 
      setTimeout(checkProgress, 1000); // Checks again after one second. 
     } 
    }); 
}