设置AJAX进度条 [英] Setting up AJAX progress bar

问题描述

玉任新的AJAX。那种知道请求的生命周期中，IE使用的ActiveXObject类的东西。

Ok im new to AJAX. Kind of know about the lifecycle of a request, IE uses ActiveXObject stuff like that.

但现在即时通讯面临着一个现实的问题。我有一个servlet运行在执行多项任务的背景下，我想显示一个进度条显示，其中的过程是可达并且也表明，事情是实际发生的事情。

However now im faced with a real world problem. I have a servlet running in the background that performs a number of tasks and i would like to display a progress bar to show where the process is up to and to also show that something is actually happening.

到目前为止，在服务器端，我可以计算出，将采取地方开始之前他们，轻松地够添加一个计数器来增加每个进程完成后，进程数 - 。因此，让我找到我希望显示的比例

So far in the server side i can calculate the number of processes that will take place before they begin, and easily enough add a counter to increment after each process completes - therefore enabling me to find the percentage i wish to show.

在哪里我应该输出递增等收集的数据我不知道术语到目前为止，它处于休眠状态的2个整数，在处理Java类。

In terms of where i should output the data gathered from incrementing etc i'm not sure so far it is dormant as 2 integers in the processing java class.

任何帮助将是非常美联社preciated。

Any help would be much appreciated.

到目前为止，我已经看到了在这我猜多数民众赞成在什么样的即时通讯瞄准。

So far i've taken a look at this and i guess thats kind of what im aiming for.

干杯。

推荐答案

基本上，你想存储的引用，任务，本质上也是其进步的HTTP会话（或servlet上下文，如果它涉及一个应用程序范围内的任务）。通过这种方式，你必须能够检索每个HTTP请求关于它的信息。

Basically, you'd like to store a reference to the task and inherently also its progress in the HTTP session (or in the Servlet context if it concerns an application wide task). This way you must be able to retrieve information about it on every HTTP request.

在JavaScript中，你可以使用的setTimeout（）或的setInterval（）一定超时后执行的函数或以一定间隔。您可以使用此反复火Ajax请求，请求的进展现状。一旦状态被检索，例如在100（百分比），一个最大的整数的味道，只是更新了一些股利再$ P $的HTML DOM树相应psenting一个进度条和/或百分比文本。

In JavaScript, you can use setTimeout() or setInterval() to execute a function after a certain timeout or at certain intervals. You can use this to repeatedly fire Ajax requests to request current status of the progress. Once the status is retrieved, e.g. in flavor of an integer with a max value of 100 (the percentage), just update some div representing a progressbar and/or the percentage text accordingly in the HTML DOM tree.

jQuery的是在射击ajaxical请求，并遍历/操纵HTML DOM树一样，非常有帮助。它最大限度地减少了code冗长和crossbrowser相容性头痛。

jQuery is very helpful in firing ajaxical requests and traversing/manipulating the HTML DOM tree like that. It minimizes the code verbosity and crossbrowser compatibility headaches.

想象的doGet（）的servlet是这样的：

Imagine that the doGet() of the servlet look like this:

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

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

Then you can use it like follows:

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

这篇关于设置AJAX进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！