jsp + servlet简单实现进度条的滚动 -

中华国锋

浏览: 43893 次
性别:
来自: 北京

最近访客更多访客>>

msj_0529

xklc

askzhigang

heysummer

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jsp + servlet简单实现进度条的滚动

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<html>
<head>
<title>进度条</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<script type="text/javascript">
//全局变量
var xmlHttp; //XMLHttpRequest对象
var bar_color = 'green'; //进度条背景颜色
var no_color=""; //解决浏览器兼容设置的无颜色变量
var clear = ""; //清空背景颜色用的变量

//回调函数
function goCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("pollServer()", 1);
}
}
}

function pollServer() {
createXMLHttpRequest();
var url = "modifySessionDate.do?task=poll";
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.responseText;
var index = percent_complete / 2; //100个百分点，显示在50个block上
for (var i = 1; i <= index; i++) {
var elem = document.getElementById("block" + i);
elem.innerHTML = clear; //不设置innerHTML属性，非IE内核浏览器不会显示进度
elem.style.backgroundColor = bar_color; //为block设置背景颜色
document.getElementById("finish").innerHTML = '<font style="font-weight:bold;color:blue" mce_style="font-weight:bold;color:blue">'+percent_complete + '%'+'</font>';
}
//只要进度小于100%继续每隔1000毫秒调用一次pollServer()
if (percent_complete < 100) {
setTimeout("pollServer()",1000);
} else if(percent_complete == 100){
var redirectResultView="requestJSP2.do"; //要跳转的页面可以从servlet中传过来
var urlInfo = '正在加载展示数据,如果没有跳转请点<a href="';
urlInfo += redirectResultView;
urlInfo += '"><font color="red">这里</font></a>';
document.getElementById("complete").innerHTML = urlInfo;
//window.location.href = redirectResultView;
//alert("计算完毕");
}
//定义percent超过100后的错误信息
else if(percent_complete == 102){
alert("处理过程出现XX错误！");
}
}
}
}

//检查processBar所在div，设置其是否显示
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"
}
}

//清空processBar所在div
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 id="go" style="top:200px;hight:800px">

<div style="top:145px;width: expression(body.clientWidth);z-index: 100;border: none;">
<%int i = 1; %>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<br>
<br>
<tr>
<td height="20" colspan="3" valign="top">
<center><h2>数据正在处理中，请稍候……</h2> <a href="javascript:go()">进度条test</a></center>
</td>
</tr>
<tr>
<td colspan="3" valign="top">
<table align="center">
<tr>
<td align="center">
<div id="progressBar" style="padding:2px;border:solid green 1px;visibility:hidden" mce_style="padding:2px;border:solid green 1px;visibility:hidden" align="left">
<div style="width:800px">
<c:forEach begin="1" end="50" step="1" >
<span id="block<%=i++ %>" style="width:2%;"></span>
</c:forEach>
</div>
</div>
</td>
<td align="center" id="finish"></td>
</tr>
<tr>
<td align="center" id="complete">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<java>
String task = request.getParameter("task");
if(task != null){
try {
String res = "1";
String percentStr = "";
PrintWriter out = response.getWriter();
if("first".equals(task)){
request.getSession().setAttribute("percent", "1");

} else if("poll".equals(task)){
//模拟进度条
if(!"100".equals(percentStr)){
String p = request.getSession().getAttribute("percent").toString();
int temp_percent = Integer.parseInt(p) + 4 ;
temp_percent = temp_percent>100?100:temp_percent;
percentStr = String.valueOf(temp_percent);
if(percentStr.equals("100")){
request.getSession().removeAttribute("percent");
}else{
request.getSession().setAttribute("percent", percentStr);
}
}
System.out.println("percentStr:"+percentStr);
res = percentStr;
}

response.setHeader("Cache-Control", "no-cache");
out.println(res);
out.flush();
out.close();
} catch (IOException e) {
// TODO 自动生成 catch 块
e.printStackTrace();
}

}
</body>
</html>