Ajax基礎教程學習(2)

Ajax基礎教程學習(2)_顯示進度條

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

<html> <head>    <title>Ajax Progress Bar</title>
<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 = "Handler.ashx?task=create";
    var button = document.getElementByIdx_x("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 checkDiv() {
    var progress_bar = document.getElementByIdx_x("progressBar");
     if (progress_bar.style.visibility == "visible") {
        clearBar();
        document.getElementByIdx_x("complete").innerHTML = "";
     } else {
        progress_bar.style.visibility = "visible"
    }
}

function clearBar() {
   for (var i = 1; i < 10; i++) {
      var elem = document.getElementByIdx_x("block" + i);
      elem.innerHTML = clear;
      elem.style.backgroundColor = "white";
   }
}

function pollServer() {
createXMLHttpRequest();
var url = "Handler.ashx?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_r("percent")[0].firstChild.data;
            var index = processResult(percent_complete);
            for (var i = 1; i <= index; i++) {
                var elem = document.getElementByIdx_x("block" + i);
                elem.innerHTML = clear;
                elem.style.backgroundColor = bar_color;
                var next_cell = i + 1;
                if (next_cell > index && next_cell <= 9) {
                    document.getElementByIdx_x("block" + next_cell).innerHTML =percent_complete + "%";
                }
             }
             if (index < 9) {
                    setTimeout("pollServer()", 2000);
             } else {
                 document.getElementByIdx_x("complete").innerHTML = "Complete!";
                 document.getElementByIdx_x("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;
}


</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>

服務端代碼

<%@ WebHandler Language="C#" class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {
    private static int counter = 1;
    public void ProcessRequest (HttpContext context) {

        string task = context.Request.QueryString["task"].ToString();
        string res = "";
        if (task == "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>";
        }
        context.Response.ContentType = "text/xml";
        context.Response.AddHeader("Cache-Control", "no-cache");
        context.Response.Write("<response>"+res+"</response>");
        context.Response.End();
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More