ajax进度条

【 tulaoshi.com - Web开发 】

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

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

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

　　html
　　  head
　　    titleAjax 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 = " ";
　　   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 /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 codeGET/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 = "key1/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 codePOST/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-nameProgressBarServlet/servlet-name
　　   display-nameProgressBarServlet/display-name
　　   servlet-classcom.cyberobject.lcl.ajax.ProgressBarServlet/servlet-class
　　  /servlet

　　    servlet-mapping
　　   servlet-nameProgressBarServlet/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()用来上传文件和写库操作.彼此分工明确.
　　  特此存档.