在最近的一个项目中,有一个上传功能:上传一个cvs文件,然后解析此文件并写入数据库
由于经常需要传很大的文件,客户完成此功能往往需要40分钟,在这个过程中,页面也没有任何提示,用户体验非常不好?
为何不用ajax作一个进度条呢?
分两步完成此需求:
一:写一个简单的ajax,实现最简单的进度条功能。
二:把此进度条改造为项目可用的进度条。
一:最简单的进度条
1。客户端每2秒发送一个createXMLHttpRequest请求给服务端.并得到服务端返回的进度数据.根据服务端返回的数据,用javascript更新一个table的width,
这样就模拟了一个进度条.
progressBar.html.内容如下:
< 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 = " ";
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,内容如下:
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