Ajax:进度条

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var xmlHttp;
        var key;
        var bar_color = 'gray';
        var span_id = "Span";
        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 button = document.getElementById("go");
            button.disabled = true;
            var queryString = "WS.asmx/ProgressBar?task=create";
            xmlHttp.onreadystatechange = handleStateChange;
            xmlHttp.open("GET", queryString, true);
            xmlHttp.send(null);
        }
        function handleStateChange() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {

                    setTimeout("pollServer()", 2000);
                }
            }
        }
        function pollServer() {
            createXMLHttpRequest();
            var queryString = "WS.asmx/ProgressBar?task=poll";
            xmlHttp.onreadystatechange = pollCallback;
            xmlHttp.open("GET", queryString, true);
            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 = progressResult(percent_complete);
                    for (var i = 1; i <= index; i++) {
                        var elem = document.getElementById("Span" + i);

                        elem.innerHTML = clear;

                        elem.style.backgroundColor = bar_color;
                        var next_cell = i + 1;
                        if (next_cell > index && next_cell <= 9) {
                            document.getElementById("Span" + next_cell).innerHTML = percent_complete + "%";

                        }
                    }
                    if (index < 9) {
                        setTimeout("pollServer()", 2000);

                    }
                    else {
                        document.getElementById("complete").innerHTML = "Complete!";
                        document.getElementById("go").disabled = false;
                    }
                }
            }
        }
        function progressResult(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("Span" + i);
                elem.innerHTML = clear;
                elem.style.backgroundColor = "white";
            }
        }
    </script>
</head>
<body>
    <h1>
        Ajax进度条</h1>
    <input type="button" value="Go" id="go" onclick="go();" />
    <table align="center">
        <tbody>
            <tr>
                <td>
                    <div id="progressBar" style="padding: 2px; border: solid back 2px; visibility: hidden">
                        <span id="Span1">&nbsp;&nbsp;&nbsp;</span> <span id="Span2">&nbsp;&nbsp;&nbsp;</span>
                        <span id="Span3">&nbsp;&nbsp;&nbsp;</span> <span id="Span4">&nbsp;&nbsp;&nbsp;</span>
                        <span id="Span5">&nbsp;&nbsp;&nbsp;</span> <span id="Span6">&nbsp;&nbsp;&nbsp;</span>
                        <span id="Span7">&nbsp;&nbsp;&nbsp;</span> <span id="Span8">&nbsp;&nbsp;&nbsp;</span><span
                            id="Span9">&nbsp;&nbsp;&nbsp;</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td align="center" id="complete">
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

后台代码：





  private static int counter = 1;//书中没有static，但是显示结果一直我10%,加上static就可以了
  [WebMethod]
        public void ProgressBar()
        {
            var task = Context.Request.QueryString["task"];
            string res = "";
            if (task.Equals("create"))
            {
                res = "<key>1</key>";
                counter = 1;
            }
            else
            {
                string precent = "";
                switch (counter)
                {
                    case 1:
                        precent = "10";
                        break;
                    case 2:
                        precent = "23";
                        break;
                    case 3: precent = "35";
                        break;
                    case 4: precent = "51";
                        break;
                    case 5: precent = "64";
                        break;
                    case 6: precent = "73";
                        break;
                    case 7: precent = "89";
                        break;
                    case 8: precent = "100";
                        break;
                    default:
                        break;
                }
                counter++;
                res = "<percent>" + precent + "</percent>";
            }

            Context.Response.ContentType = "text/xml";
            Context.Response.Write("<response>");
            Context.Response.Write(res);
            Context.Response.Write("</response>");
        }











运行结果如下：









        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/lufangtao/p/2717354.html