JSP+Ajax 进度条

注：代码由《Ajax基础教程》中的例题改写
一、 jsp文件ProgressBarJsp.jsp
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%!
int counter = 1;//注意：多用户将共享此变量，此进度条只适合单用户
%>
<%

 String task = request.getParameter("task");
        String res = "";
        
        if (task.equals("create")) {
            res = "1";
            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 + "";
        }
        
       // PrintWriter out = response.getWriter();
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        out.println("");
        out.println(res);
        out.println("");
        out.close();
    
    %>

二、发出Ajax请求的html文件JspprogressBar.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  var xmlHttp;
        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 = "ProgressBarJsp.jsp?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 = "ProgressBarJsp.jsp?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.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>JSP+Ajax 进度条实例2</h1>
开始一个长时间运行的任务: <input type="button" value="开始" 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>