用弹出div方式做一个进度条
用老版本方式做的：
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Progress Bar</title>
<style type="text/css">
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#f5f5f5;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#light {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
border: 12px solid #D6E9F1;
z-index:1002;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'blue';//进度条的颜色
var span_id = "block";
var clear = " ";
function show(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='block';
fade.style.display='block';
go();
}
function hide(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='none';
fade.style.display='none';
}
function SetProgress(progress) {
if (progress) {
$("#block1").css("width", String(progress) + "%"); //控制#loading div宽度
$("#block10").html(String(progress) + "%"); //显示百分比
}
}
function createXMLHttpRequest()//创建XMLHttpRequest对象
{
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function go() {
createXMLHttpRequest();//创建XMLHttpRequest对象
checkDiv();//显示滚动条
xmlHttp.onreadystatechange = callBack;//设置回调函数
var url = "http://localhost:7879/dss/ProgressBarServlet?task=create";//请求的地址
xmlHttp.open("get",url,true);//打开对服务器的连接
xmlHttp.send();//发送请求
}
function callBack() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
setTimeout("pollServer()",500);//定时调用
}
}
}
function pollServer() {
createXMLHttpRequest();
var url="http://localhost:7879/baosteel_dss/ProgressBarServlet?task=poll&key="+key;
xmlHttp.onreadystatechange = pollCallBack;
xmlHttp.open("GET",url,true);
xmlHttp.send();
}
function pollCallBack() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0] .firstChild.data;//从服务器端获得响应信息
var index = processResult(percent_complete);
for(var i = 1; i<=index; i++) {
var elem = document.getElementById("block1");
elem.style.backgroundColor = bar_color;
var next_cell = i+1;
if(next_cell > index && next_cell <= 9) {
SetProgress(percent_complete);
}
}
if(index <9 ) {
setTimeout("pollServer()",500);
document.getElementById("close").disabled = true;
} else {
SetProgress(percent_complete);
document.getElementById("complete").innerHTML = "Complete!";
document.getElementById("close").disabled = false;
setTimeout("hide('light')",3000);//定时调用
}
}
}
}
function processResult(percent_complete) {
var ind;
if(percent_complete.length == 1) {
ind = 1;
} else if(percent_complete.length == 2) {
ind = percent_complete.substring(0,1);
} else {
ind = 9;
}
return ind;
}
function checkDiv() {
var progress_bar = document.getElementById("progressBar");
if(progress_bar.style.visibility == "visible") {
clearBar();
document.getElementById("complete").innerHTML = "";
} else {
progress_bar.style.visibility = "visible";
}
}
function clearBar() {
for(var i =1; i<10; i++) {
var elem = document.getElementById("block"+i);
elem.innerHTML = clear;
elem.style.backgroundColor = "white";
}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1>
<input type="button" value="Open" id="go" onclick="show('light')"/>
<p>
<div id="light" >
<table align="center">
<tbody>
<tr style="width:251px;border:solid black 1px;">
<td>
<div id="progressBar" style="width:208px;padding:0px;border:solid black 1px;visibility:hidden">
<span id="block1"> </span>
</div>
</td>
<td><div id="block10" /></td>
</tr>
<tr>
<td align="center" id="complete"></td>
</tr>
</tbody>
</table>
<div align="center">
<input type="button" id="close" value="Close" onclick="hide('light')"/>
</div>
</div>
<div id="fade" class="black_overlay"/>
</body>
</html>
web.xml:
<!-- Action Servlet Mapping
<servlet>
<servlet-name>ProgressBarServlet</servlet-name>
<display-name>ProgressBarServlet</display-name>
<servlet-class>com.baosight.dss.d1.ts.ProgressBarServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProgressBarServlet</servlet-name>
<url-pattern>/ProgressBarServlet</url-pattern>
</servlet-mapping>
-->
Action:
excute方法中调用业务service接口在dao层与数据库交互，得到进度数，用response返回percent_complete = xx (0<xx<=100)，即可。代码略去