Ajax_展示进度条
日期：2014-05-16 浏览次数：21033 次
Ajax_显示进度条
JSP部分：
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
?? <title>My JSP 'index.jsp' starting page</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">
?? <meta http-equiv="description" content="This is my page">
?? <script type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'gray';
var span_id = "block";
var clear = " "
??
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;
?? xmlHttp.open("GET", url, true);
?? xmlHttp.onreadystatechange = goCallback;
?? xmlHttp.send(null);
}
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);
???? for (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 + "%";
????? }
???? }
???? if (index < 9) {
???? ?? setTimeout("pollServer()", 2000);
???? } else {
????? document.getElementById("complete").innerHTML = "Complete!";
????? document.getElementById("go").disabled = false;
???? }
??? }
?? }
}
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><
