ajax进度条

在最近的一个项目中，有一个上传功能：上传一个cvs文件，然后解析此文件并写入数据库
由于经常需要传很大的文件，客户完成此功能往往需要40分钟，在这个过程中，页面也没有任何提示，用户体验非常不好？
为何不用ajax作一个进度条呢？
分两步完成此需求：
一：写一个简单的ajax，实现最简单的进度条功能。
二：把此进度条改造为项目可用的进度条。

一：最简单的进度条
1。客户端每2秒发送一个createXMLHttpRequest请求给服务端.并得到服务端返回的进度数据.根据服务端返回的数据,用javascript更新一个table的width,
这样就模拟了一个进度条.
progressBar.html.内容如下：

  
    
    
        var xmlHttp;
        var key;
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();                
            }
        }

        function go() {
            createXMLHttpRequest();
            clearBar();
            var url = "ProgressBarServlet?task=create";
            var button = document.getElementById("go");
            button.disabled = true;
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = goCallback;
            xmlHttp.send(null);
        }

        function goCallback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    setTimeout("pollServer()", 2000);
                }
            }
        }
        
        function pollServer() {
            createXMLHttpRequest();
            var url = "ProgressBarServlet?task=poll&key=" + key;
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = pollCallback;
            xmlHttp.send(null);
        }
        
        function pollCallback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
                    var progress = document.getElementById("progress");
                    var progressPersent = document.getElementById("progressPersent");
     progress.width = percent_complete + "%";
     progressPersent.innerHTML = percent_complete + "%";
                    if (percent_complete < 100) {
                        setTimeout("pollServer()", 2000);
                    } else {
                        document.getElementById("complete").innerHTML = "Complete!";
                        //document.getElementById("go").disabled = false;
                    }
                }
            }
        }        
 function clearBar() {
   var progress_bar = document.getElementById("progressBar");
   var progressPersent = document.getElementById("progressPersent");
   var complete = document.getElementById("complete");
   progress_bar.style.visibility = "visible"
   progressPersent.innerHTML = " ";
   complete.innerHTML = "Begin to upload this file...";
 }
    
  



  
    86%
  
  
    
 
  
    
 
              
                 
              
            
  


  
  
    completed
  

2：一个模拟servlet：ProgressBarServlet1。java，内容如下：
package com.cyberobject.lcl.ajax;

import java.io.*;

import javax.servlet.*;
import javax.servlet.http.*;

/**
 *
 * @author nate
 * @version
 */
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();
 }
    
 /** Handles the HTTP POST method.
  * @param request servlet request
  * @param response servlet response
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
  doGet(request, response);
 }
    
 /** Returns a short description of the servlet.
  */
 public String getServletInfo() {
  return "Short description";
 }
}
3：在web。xml中配置好servlet映射：
  
  
   ProgressBarServlet
   ProgressBarServlet
   com.cyberobject.lcl.ajax.ProgressBarServlet
  

    
   ProgressBarServlet
   /ProgressBarServlet
  

  此时进度条已经可以运行了。接下来的工作就是把它移植到我们的系统。
  二：
  1：在写数据库的class DbOperater中，增加一个progress属性
  private int progress;

  2:在写数据库的class中，增加一个getProgress()方法:
  public int getProgress()
  {
 return progress;
  }
  3: 在写库的for循环中, progress++;
  4:在调用DbOperater的servlet中调用DbOperater的getProgress()方法,这样就为进度条提供了实时数据.
  5:另外:servlet的doGet()用来获得进度数据,doPost()用来上传文件和写库操作.彼此分工明确.
  特此存档.