修改网上的JSP+Ajax 进度条中的错误-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_19410/article/details/81800387
对网上的错误代码进行修改

一、 jsp文件progressBarJsp.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%  
int counter = 1;
Object obj=session.getAttribute("counter");
if(obj!=null)counter=Integer.parseInt(obj.toString());

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

	

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">  
  
  var xmlHttp;  
        var bar_color = 'blue';  
        var span_id = "block";  
        var clear = "&nbsp;&nbsp;&nbsp;"  
            
        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()", 1000);  
                }  
            }  
        }  
          
        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.style.value="background-color:blue;"; 
                        elem.innerHTML = clear;  
                        elem.style.background = 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()", 1000);  
                    } 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" οnclick="go();" />

<p>
<table align="center">
	<tbody>
		<tr>
			<td>
			<div id="progressBar"
				style="cpadding: 2px; border: solid black 2px; visibility: hidden">
			<span id="block1" >&nbsp;&nbsp;&nbsp;</span> <span id="block2">&nbsp;&nbsp;&nbsp;</span>
			<span id="block3" >&nbsp;&nbsp;&nbsp;</span> <span id="block4">&nbsp;&nbsp;&nbsp;</span>
			<span id="block5">&nbsp;&nbsp;&nbsp;</span> <span id="block6">&nbsp;&nbsp;&nbsp;</span>
			<span id="block7">&nbsp;&nbsp;&nbsp;</span> <span id="block8">&nbsp;&nbsp;&nbsp;</span>
			<span id="block9">&nbsp;&nbsp;&nbsp;</span></div>
			</td>
		</tr>
		<tr>
			<td align="center" id="complete"></td>
		</tr>
	</tbody>
</table>
</body>
</html>