设置AJAX进度条

Question

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

但是现在我面临着一个现实世界的问题.我有一个在后台运行的servlet执行许多任务,我想显示一个进度条来显示进程的位置,并显示实际发生的事情.

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

在我应该输出从递增等收集的数据的方面我到目前为止还不确定它在处理java类中是2个整数.

任何帮助将非常感激.

到目前为止,我已经看过这个,我想这就是我的目标.

干杯.

Answer 1

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

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

jQuery非常有助于触发ajaxical请求并遍历/操作HTML DOM树.它最大限度地减少了代码冗长和交叉浏览器兼容性问题.

想象一下,doGet()servlet的外观如下:

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