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>
??? Ajax Progress Bar Example
?? </h1>
?? Launch long-running process:
?? <input type="button" value="Launch" id="go" onclick="go();" />
?? <p>
?? <table align="center">
??? <tbody>
???? <tr>
????? <td>
?????? <div id="progressBar"
??????? style="padding:2px;border:solid black 2px;visibility:hidden">
??????? <span id="block1"> </span>
??????? <span id="block2"> </span>
??????? <span id="block3"> </span>
??????? <span id="block4"> </span>
??????? <span id="block5"> </span>
??????? <span id="block6"> </span>
??????? <span id="block7"> </span>
??????? <span id="block8"> </span>
??????? <span id="block9"> </span>
?????? </div>
????? </td>
???? </tr>
???? <tr>
????? <td align="center" id="complete"></td>
???? </tr>
??? </tbody>
?? </table>
</body>
</html>
Servlet部分：
public class ProgressBarServlet extends HttpServlet {
private int counter = 1;
public void doGet(HttpServletRequest request, HttpServletResponse response)
??? throws ServletException, IOException {
?? this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
??? throws ServletException, IOException {
?? String task = request.getParameter("task");
?? String res = "";
?? 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++;
??? res = "<percent>" + percent + "</percent>";
?? }
?? PrintWriter out = response.getWriter();
?? response.setContentType("text/xml");
?? response.setHeader("Cache-Control", "no-cache");
?? out.println("<response>");
?? out.println(res);
?? out.println("</response>");
?? out.close();
}
}