ajax进度条

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

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

< html >
   < head >
     < title > Ajax Progress Bar </ title >
     < script  type ="text/javascript" > ...
        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 = "&nbsp;";
   complete.innerHTML = "Begin to upload this file...";
 }
     </ script >
   </ head >
< body >
< div  id ="progressBar"  style ="padding:0px;border:solid black 0px;visibility:hidden" >
< table  width ="300"  border ="0"  cellspacing ="0"  cellpadding ="0"   align ="center" >
   < tr >
     < td  align ="center"  id ="progressPersent" > 86% </ td >
   </ tr >
   < tr  >
     < td >
  < table  width ="100%"  border ="1"  cellspacing ="0"  cellpadding ="0"  bordercolor ="#000000" >
   < tr >
     < td >
  < table  width ="1%"  border ="0"  cellspacing ="0"  cellpadding ="0"  bgcolor ="#FF0000"  id ="progress" >
               < tr >
                 < td > &nbsp; </ td >
               </ tr >
             </ table ></ td >
   </ tr >
</ table >
</ td >
   </ tr >
   < tr >
     < td  align ="center"  id ="complete" > completed </ td >
   </ tr >
</ table >
</ div >
< input  id  = "go"  name ="run"  type ="button"  value ="run"  onClick ="go();" >

</ body >
</ html >

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 <code>GET</code> 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  =   " <key>1</key> " ;
   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> "   +  percent  +   " </percent> " ;
  }
        
  PrintWriter out  =  response.getWriter();
  response.setContentType( " text/xml " );
  response.setHeader( " Cache-Control " ,  " no-cache " );
  out.println( " <response> " );
  out.println(res);
  out.println( " </response> " );
  out.close();
 }
    
  /**  Handles the HTTP <code>POST</code> 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映射：
   <!--  Action Servlet Mapping  -->
   < servlet >
    < servlet - name > ProgressBarServlet </ servlet - name >
    < display - name > ProgressBarServlet </ display - name >
    < servlet - class > com.cyberobject.lcl.ajax.ProgressBarServlet </ servlet - class >
   </ servlet >

     < servlet - mapping >
    < servlet - name > ProgressBarServlet </ servlet - name >
    < url - pattern >/ ProgressBarServlet </ url - pattern >
   </ servlet - mapping >

此时进度条已经可以运行了。接下来的工作就是把它移植到我们的系统。
  二：
  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()用来上传文件和写库操作.彼此分工明确.
  特此存档.

 

来自:http://blog.csdn.net/javatwt/archive/2007/03/02/1519117.aspx