<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
Ajax进度条
</title>
<script type="text/javascript">
//xmlHttpRequest对象
var xmlHttp;
var key;
//进度条颜色
var bar_color='gray';
var span_id='block';
var clear=" "
//创建xmlHttpRequest对象
function createXMLHttpRequest(){
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
//执行方法
function go(){
createXMLHttpRequest();
checkDiv();
var url = "ProgressBarServlet?task=create";
//隐藏按钮
var button = document.getElementById("go");
button.disabled = true;
//回调方法
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 index = processResult(percent_complete);
var (var i = 1; i <= index;i++){
var elem = document.getElementById("block" + i);
elem.innerHTML = clear;
elem.style.backgroundColor = bar_color;
var next_cell = i + 1;
if (next_cell > index && next_cell < = 9){
document.getElementById("block" + next_cell).innerHTML = percent_complete + "%";
}
}
//解析结果
function processResult(){
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";
}
}
public class ProgressBarServlet
extends HttpServlet {
private static final String CONTENT_TYPE = "text/html; charset=GBK";
//计数器
private int counter = 1;
//Initialize global variables
public void init() throws ServletException {
}
//第一次,创建进度条
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++;