ajax进度条

　2007-03-07 11:16:52　来源：WEB开发网　　　

核心提示：在最近的一个项目中，有一个上传功能：上传一个cvs文件，ajax进度条，然后解析此文件并写入数据库由于经常需要传很大的文件，客户完成此功能往往需要40分钟，接下来的工作就是把它移植到我们的系统，二： 1：在写数据库的class DbOperater中，在这个过程中，页面也没有任何提示

在最近的一个项目中，有一个上传功能：上传一个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);
　　　 }

</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映射：

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