编辑“Ajax- 显示进度条”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[Ajax学习教程#Ajax学习教程|上一页]] | {{template:开发语言导航}}</span>
<div style="clear:both;"></div>
无一例外地，几乎每个应用都会时不时地调用一个长时间运行的事务。如果你关心系统的可用性，就要确保用户能很容易地看到系统的状态。如果是一个胖客户应用，对于长时间运行事务的问题，解决办法很简单：只需显示一个进度条，以便用户知道目前所处状况。不过，在Ajax之前，要在Web应用中做到这一点很不容易。本节将使你了解如何使用Ajax为Web应用建立进度条。 <br>

在代码清单4-9所示的例子中，再次在pollCallback()方法中使用了setTimeout()，从而每隔2秒调用一次服务器。在processResult()方法中，只是从服务器查找已完成比例（百分数）的第一位数字，从而得出要将进度条中的哪些进度块着色（灰色）。<br>

代码清单4-9  progressBar.html<br>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br>
 <html><br>
  <head><br>
    <title>Ajax Progress Bar</title><br>
    <script type="text/javascript"><br>
        var xmlHttp;<br>
        var key;<br>
        var bar_color = 'gray';<br>
        var span_id = "block";<br>
        var clear = "&nbsp;&nbsp;&nbsp;"<br>
        function createXMLHttpRequest() {<br>
            if (window.ActiveXObject) {<br>
              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>
            }<br>
            else if (window.XMLHttpRequest) {<br>
                xmlHttp = new XMLHttpRequest();<br>
            }<br>
        }<br>
        function go() {<br>
           createXMLHttpRequest();<br>
            checkDiv();<br>
            var url = "ProgressBarServlet?task=create";<br>
            var button = document.getElementById("go");<br>
            button.disabled = true;<br>
            xmlHttp.open("GET", url, true);<br>
            xmlHttp.onreadystatechange = goCallback;<br>
            xmlHttp.send(null);<br>
        }<br>
        function goCallback() {<br>
            if (xmlHttp.readyState == 4) {<br>
               if (xmlHttp.status == 200) {<br>
                    setTimeout("pollServer()", 2000);<br>
                }<br>
            }<br>
        }<br>
        function pollServer() {<br>
            createXMLHttpRequest();<br>
            var url = "ProgressBarServlet?task=poll&key=" + key;<br>
            xmlHttp.open("GET", url, true);<br>
            xmlHttp.onreadystatechange = pollCallback;<br>
            xmlHttp.send(null);<br>
        }<br>
        function pollCallback() {<br>
            if (xmlHttp.readyState == 4) {<br>
                if (xmlHttp.status == 200) {<br>
                    var percent_complete =<br>
                           xmlHttp.responseXML<br>
                              .getElementsByTagName("percent")[0].firstChild.data;<br>
                    var index = processResult(percent_complete);<br>
                    for (var i = 1; i <= index; i++) {<br>
                        var elem = document.getElementById("block" + i);<br>
                        elem.innerHTML = clear;<br>
                        elem.style.backgroundColor = bar_color;<br>
                        var next_cell = i + 1;<br>
                        if (next_cell > index && next_cell <= 9) {<br>
                            document.getElementById("block" + next_cell)<br>
                                  .innerHTML =<br>
                                        percent_complete + "%";<br>
                        }<br>
                    }<br>
                    if (index < 9) {<br>
                        setTimeout("pollServer()", 2000);<br>
                    } else {<br>
                        document.getElementById("complete").innerHTML = "Complete!";<br>
                        document.getElementById("go").disabled = false;<br>
                    }<br>
                }<br>
            }<br>
        }<br>
        function processResult(percent_complete) {<br>
            var ind;<br>
            if (percent_complete.length == 1) {<br>
                ind = 1;<br>
            } else if (percent_complete.length == 2) {<br>
                ind = percent_complete.substring(0, 1);<br>
            } else {<br>
                ind = 9;<br>
            }<br>
            return ind;<br>
        }<br>
        function checkDiv() {<br>
            var progress_bar = document.getElementById("progressBar");<br>
            if (progress_bar.style.visibility == "visible") {<br>
                clearBar();<br>
               document.getElementById("complete").innerHTML = "";<br>
            } else {<br>
                progress_bar.style.visibility = "visible"<br>
            }<br>
        }<br>
        function clearBar() {<br>
            for (var i = 1; i < 10; i++) {<br>
                var elem = document.getElementById("block" + i);<br>
                elem.innerHTML = clear;<br>
               elem.style.backgroundColor = "white";<br>
            }<br>
        }<br>
    </script><br>
  </head><br>
  <body><br>
    <nowiki> <h1>Ajax Progress Bar Example</h1></nowiki><br>
    <nowiki>Launch long-running process:</nowiki><br>
           <nowiki><input type="button" value="Launch" id="go" onclick="go();"/></nowiki><br>
    <nowiki><p></nowiki><br>
    <nowiki><table align="center"></nowiki><br>
        <nowiki><tbody></nowiki><br>
            <nowiki><tr><td></nowiki><br>
              <nowiki><div id="progressBar"</nowiki><br>
                    <nowiki>style="padding:2px;border:solid black 2px;visibility:hidden"></nowiki><br>
                    <nowiki><span id="block1">&nbsp;&nbsp;&nbsp;</span></nowiki><br>
                    <nowiki><span id="block2">&nbsp;&nbsp;&nbsp;</span></nowiki><br>
                    <nowiki><span id="block3">&nbsp;&nbsp;&nbsp;</span></nowiki><br>
                    <nowiki><span id="block4">&nbsp;&nbsp;&nbsp;</span></nowiki><br>
                    <nowiki><span id="block5">&nbsp;&nbsp;&nbsp;</span></nowiki><br>
                    <nowiki><span id="block6">&nbsp;&nbsp;&nbsp;</span></nowiki><br>
                    <nowiki><span id="block7">&nbsp;&nbsp;&nbsp;</span></nowiki><br>
                   <nowiki><span id="block8">&nbsp;&nbsp;&nbsp;</span></nowiki><br>
                    <nowiki><span id="block9">&nbsp;&nbsp;&nbsp;</span></nowiki><br>
                <nowiki></div></nowiki><br>
            <nowiki></td></tr></nowiki><br>
            <nowiki><tr><td align="center" id="complete"></td></tr></nowiki><br>
        <nowiki></tbody></nowiki><br>
    <nowiki></table></nowiki><br>
  </body><br>
 </html><br>
这个例子的服务器代码“模拟”了一个长时间运行的事务（见代码清单4-10）。在真实环境中，这期间可能还要同时创建多个新实例并注册，之前还需要客户发出请求。为简单起见，我们忽略了这点，也没有编写线程代码。<br>

代码清单4-10  
 ProgressBarServlet.java<br>
 package ajaxbook.chap4;<br>
 import java.io.*;<br>
 import javax.servlet.*;<br>
 import javax.servlet.http.*;<br>
 public class ProgressBarServlet extends HttpServlet {<br>
    private int counter = 1;<br>
    /** Handles the HTTP <code>GET</code> method.<br>
     * @param request servlet request<br>
     * @param response servlet response<br>
     */<br>
    protected void doGet(HttpServletRequest request, HttpServletResponse response)<br>
    throws ServletException, IOException {<br>
        String task = request.getParameter("task");<br>
        String res = "";<br>
        if (task.equals("create")) {<br>
            res = "<key>1</key>";<br>
            counter = 1;<br>
        }<br>
        else {<br>
            String percent = "";<br>
            switch (counter) {<br>
               case 1: percent = "10"; break;<br>
                case 2: percent = "23"; break;<br>
                case 3: percent = "35"; break;<br>
                case 4: percent = "51"; break;<br>
                case 5: percent = "64"; break;<br>
                case 6: percent = "73"; break;<br>
                case 7: percent = "89"; break;<br>
                case 8: percent = "100"; break;<br>
            }<br>
            counter++;<br>
            res = "<percent>" + percent + "</percent>";<br>
        }<br>
        PrintWriter out = response.getWriter();<br>
        response.setContentType("text/xml");<br>
        response.setHeader("Cache-Control", "no-cache");<br>
        out.println("<response>");<br>
        out.println(res);<br>
        out.println("</response>");<br>
        out.close();<br>
    }<br>
 }<br>

图4-10显示了实际工作中的进度条，图4-11显示了完成时的情况。<br>
 [[Image:image010.jpg]]
 [[Image:image011.jpg]]
[[category:Ajax]]