设置 AJAX 进度条

Question

好的，我是 AJAX 新手。有点了解请求的生命周期，IE 使用 ActiveXObject 之类的东西。

但是现在我面临一个现实世界的问题。我有一个在后台运行的 servlet，它执行许多任务，我想显示一个进度条来显示进程的进度以及实际发生的事情。

到目前为止，在服务器端，我可以计算在它们开始之前将发生的进程数，并且很容易添加一个计数器以在每个进程完成后递增 - 因此使我能够找到我希望显示的百分比。

就我应该在哪里输出从递增等收集的数据而言，我不确定到目前为止它在处理 java 类中作为 2 个整数处于休眠状态。

任何帮助将不胜感激。

到目前为止，我已经查看了this，我想这就是我的目标。

干杯。

Answer 1

基本上，您希望在 HTTP 会话中（或者如果涉及应用程序范围的任务，则在 Servlet 上下文中）存储对任务的引用以及它的进度。这样，您必须能够在每个 HTTP 请求上检索有关它的信息。

在 JavaScript 中，您可以使用 setTimeout() 或 setInterval() 在特定超时后或以特定间隔执行函数。您可以使用它来重复触发 Ajax 请求以请求当前的进度状态。一旦检索到状态，例如类似于最大值为 100（百分比）的整数，只需在 HTML DOM 树中相应地更新一些表示进度条的 div 和/或百分比文本。

jQuery 在触发 ajaxical 请求和像这样遍历/操作 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.
        }
    });
}