ajax进度条

技术2022-05-11 63

在最近的一个项目中，有一个上传功能：上传一个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()用来上传文件和写库操作.彼此分工明确. 特此存档.

专利

最新回复(0)