Ajax基础教程：显示进度条

 无一例外地，几乎每个应用都会时不时地调用一个长时间运行的事务。如果你关心系统的可用性，就要确保用户能很容易地看到系统的状态。如果是一个胖客户应用，对于长时间运行事务的问题，解决办法很简单：只需显示一个进度条，以便用户知道目前所处状况。不过，在ajax之前，要在web应用中做到这一点很不容易。本节将使你了解如何使用Ajax为Web应用建立进度条。

    在代码清单4-9所示的例子中，再次在pollCallback()方法中使用了setTimeout()，从而每隔2秒调用一次服务器。在processResult()方法中，只是从服务器查找已完成比例（百分数）的第一位数字，从而得出要将进度条中的哪些进度块着色（灰色）。

    代码清单4-9  progressBar.html
    html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     
    
     
       
       
     
     
       

Progress Bar Example

        Launch long-running process:
              
       

       

           
               
               
           
       

                   

                        style="padding:2px;border:solid black 2px;visibility:hidden">
                           
                           
                           
                           
                           
                           
                           
                           
                           
                   

               

     
    

    这个例子的服务器代码“模拟”了一个长时间运行的事务（见代码清单4-10）。在真实环境中，这期间可能还要同时创建多个新实例并注册，之前还需要客户发出请求。为简单起见，我们忽略了这点，也没有编写线程代码。

    代码清单4-10  ProgressBarServlet.java
    package ajaxbook.chap4;
     
    import java.io.*;
     
    import javax.servlet.*;
    import javax.servlet.http.*;
     
    public class ProgressBarServlet extends HttpServlet {
        private int counter = 1;
     
        /** Handles the HTTP GET method.
         * @param request servlet request
         * @param response servlet response
         */

  protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
            String task = request.getParameter("task");
            String res = "";
     
            if (task.equals("create")) {
                res = "1";
                counter = 1;
            }
            else {
                String percent = "";
                switch (counter) {
                    case 1: percent = "10"; break;
                    case 2: percent = "23"; break;
                    case 3: percent = "35"; break;
                    case 4: percent = "51"; break;
                    case 5: percent = "64"; break;
                    case 6: percent = "73"; break;
                    case 7: percent = "89"; break;
                    case 8: percent = "100"; break;
                }
                counter++;
     
                res = "" + percent + "";
            }
            PrintWriter out = response.getWriter();
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            out.println("");
            out.println(res);
            out.println("");
            out.close();
        }
    }

    图4-10显示了实际工作中的进度条，图4-11显示了完成时的情况。

图4-10  进度条示例

图4-11  进度条完成