ajax进度条

最新推荐文章于 2021-08-06 17:50:08 发布

最新推荐文章于 2021-08-06 17:50:08 发布 · 174 阅读

文章标签：

#Ajax #Servlet #Go #JavaScript #CVS #ViewUI

本文介绍如何利用Ajax技术实现实时显示文件上传进度的功能。通过客户端定时向服务器发送请求获取上传进度，并通过更新HTML元素模拟进度条效果。

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

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

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<title>AjaxProgressBar</title>

<scripttype="text/javascript">...

varxmlHttp;

varkey;

functioncreateXMLHttpRequest()...{

if(window.ActiveXObject)...{

xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

}

elseif(window.XMLHttpRequest)...{

xmlHttp=newXMLHttpRequest();

}

functiongo()...{

createXMLHttpRequest();

clearBar();

varurl="ProgressBarServlet?task=create";

varbutton=document.getElementById("go");

button.disabled=true;

xmlHttp.open("GET",url,true);

xmlHttp.onreadystatechange=goCallback;

xmlHttp.send(null);

}

functiongoCallback()...{

if(xmlHttp.readyState==4)...{

if(xmlHttp.status==200)...{

setTimeout("pollServer()",2000);

}

functionpollServer()...{

createXMLHttpRequest();

varurl="ProgressBarServlet?task=poll&key="+key;

xmlHttp.open("GET",url,true);

xmlHttp.onreadystatechange=pollCallback;

xmlHttp.send(null);

}

functionpollCallback()...{

if(xmlHttp.readyState==4)...{

if(xmlHttp.status==200)...{

varpercent_complete=xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;

varprogress=document.getElementById("progress");

varprogressPersent=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;

}

functionclearBar()...{

varprogress_bar=document.getElementById("progressBar");

varprogressPersent=document.getElementById("progressPersent");

varcomplete=document.getElementById("complete");

progress_bar.style.visibility="visible"

progressPersent.innerHTML=" ";

complete.innerHTML="Begintouploadthisfile...";

}

</script>

</head>

<body>

<divid="progressBar"style="padding:0px;border:solidblack0px;visibility:hidden">

<tablewidth="300"border="0"cellspacing="0"cellpadding="0"align="center">

<tr>

<tdalign="center"id="progressPersent">86%</td>

</tr>

<tr>

<td>

<tablewidth="100%"border="1"cellspacing="0"cellpadding="0"bordercolor="#000000">

<tr>

<td>

<tablewidth="1%"border="0"cellspacing="0"cellpadding="0"bgcolor="#FF0000"id="progress">

<tr>

</tr>

</table></td>

</tr>

</table>

</td>

</tr>

<tr>

<tdalign="center"id="complete">completed</td>

</tr>

</table>

</div>

<inputid="go"name="run"type="button"value="run"onClick="go();">

</body>

</html>

2：一个模拟servlet：ProgressBarServlet1。java，内容如下：

packagecom.cyberobject.lcl.ajax;

importjava.io.*;

importjavax.servlet.*;
importjavax.servlet.http.*;

/**
*
*@authornate
*@version
*/
publicclassProgressBarServletextendsHttpServlet{
privateintcounter=1;

/**HandlestheHTTP<code>GET</code>method.
*@paramrequestservletrequest
*@paramresponseservletresponse
*/
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
Stringtask=request.getParameter("task");
Stringres="";

if(task.equals("create")){
res="<key>1</key>";
counter=1;
}
else{
Stringpercent="";
switch(counter){
case1:percent="10";break;
case2:percent="23";break;
case3:percent="35";break;
case4:percent="51";break;
case5:percent="64";break;
case6:percent="73";break;
case7:percent="89";break;
case8:percent="100";break;
}
counter++;

res="<percent>"+percent+"</percent>";
}

PrintWriterout=response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}

/**HandlestheHTTP<code>POST</code>method.
*@paramrequestservletrequest
*@paramresponseservletresponse
*/
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
doGet(request,response);
}

/**Returnsashortdescriptionoftheservlet.
*/
publicStringgetServletInfo(){
return"Shortdescription";
}
}
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：在写数据库的classDbOperater中，增加一个progress属性
privateintprogress;

2:在写数据库的class中，增加一个getProgress()方法:
publicintgetProgress()
{
returnprogress;
}
3:在写库的for循环中,progress++;
4:在调用DbOperater的servlet中调用DbOperater的getProgress()方法,这样就为进度条提供了实时数据.
5:另外:servlet的doGet()用来获得进度数据,doPost()用来上传文件和写库操作.彼此分工明确.
特此存档.

来自:http://blog.youkuaiyun.com/javatwt/archive/2007/03/02/1519117.aspx