📄 processbar.jsp
字号:
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" language="javaScript">
var bgcolor = '#7FFF00'; //全局变量，用于设置进度条的背景色
var number; //全局变量，用于记录当前span序号
var clear = " "; //全局变量，记录清空时的内容
var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象
function createXMLHttpRequest() { //创建XMLHttpRequest对象的方法
if(window.ActiveXObject) { //Inetrnet Explorer时，创建XMLHttpRequest对象的方法
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
//旧版本的Inetrnet Explorer，创建XMLHttpRequest对象
} catch(e) {
window.alert("创建XMLHttpRequest对象错误"+e);
}
}
} else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法
xmlHttp = new XMLHttpRequest();
}
if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象
window.alert("创建XMLHttpRequest对象异常！");
}
}
//启动进度条的方法
function startRun() {
createXMLHttpRequest(); //创建XMLHttpRequest对象
clearBar(); //执行请求前先清除进度条
xmlHttp.onreadystatechange = callBack;
//指定onreadystatechange属性值，用于指定状态正常时的处理函数
xmlHttp.open("GET", "/ajaxmodel/servlet/ProcessServlet?flag=start", true);
xmlHttp.send(null);
}
//开始进行进度条显示的处理函数
function callBack() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) { //status状态正常时
setTimeout("aginRun()",1000);
//每隔1000毫秒（1秒）执行一次“aginRun()”函数
}
}
}
//清除用于显示进度条的span的内容
function clearBar() {
for (var i=0;i<10;i++) { //根据span元素的id，分别清楚其显示内容
var bk = document.getElementById("bk" + i);
bk.innerHTML = clear; //首先清空span元素的内容
bk.style.backgroundColor = "white"; //设置span元素的背景色
}
}
//设置用于显示进度条的span元素的显示内容
function aginRun() {
createXMLHttpRequest(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = aginCallBack;
//指定状态正常时的处理函数为“aginCallBack”
document.getElementById("run").disabled=true; //设置按钮不可用
xmlHttp.open("GET", "/ajaxmodel/servlet/ProcessServlet?flag=run&number="+number, true);
xmlHttp.send(null);
}
//进度条执行时的函数
function aginCallBack() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var percent =
xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
//记录当前完成比例
var index = parseResult(percent); //解析结果集
var nextCell = 1;
for (var i=0; i<index; i++) { //遍历span元素集合，设置其内容（颜色与文字）
var bk = document.getElementById("bk"+i);
//根据每个span元素的id获取span对象
bk.innerHTML= clear; //清空span元素内容
bk.style.backgroundColor = bgcolor; //设置span元素的内容
nextCell = i+1;
if(nextCell>=index && nextCell<10) { //显示当前处理进度的百分比
document.getElementById("bk"+nextCell).innerHTML=percent+"%";
}
}
if(index<10) { //索引小于10，设置setTimeout方法
setTimeout("aginRun()",1000);
} else { //索引大于10，设置进度条成功完成的页面效果
document.getElementById("result").innerHTML = "OK!";
document.getElementById("run").disabled = false;
}
}
}
}
//解析结果集
function parseResult(result) {
if(result.length<1) {
return 1;
} else if(result.length==2) {
return result.substring(0,1);
} else {
return 10;
}
}
</script>
<title>Ajax进度条</title>
</head>
<body>
<table align="center">
<tr>
<td>Ajax进度条示例 <input type="button" value="开始" id="run" onclick="startRun();"/></td>
</tr>
<tr>
<td>
<div id="processBar" style="padding:1px;border:solid black 1px;">
<span id="bk0"> </span>
<span id="bk1"> </span>
<span id="bk2"> </span>
<span id="bk3"> </span>
<span id="bk4"> </span>
<span id="bk5"> </span>
<span id="bk6"> </span>
<span id="bk7"> </span>
<span id="bk8"> </span>
<span id="bk9"> </span>
</div>
</td>
</tr>
<tr><td align="center" id="result"></td> </tr>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -