编辑“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>股票行情、天气数据、标题新闻……这些都是经常改变的数据，但不值得为这些数据的修改手工地完全刷新页面。尽管CNN.com之类的网站确实会定期重新加载，但是，如果只是为了改变一两个标题新闻和几个图就重绘整个页面，这可能很让人扫兴。当然，如果刷新整个页面，可能很难发现到底哪些是新内容！ <br>

如果使用Ajax，用户就不用反复点击refresh（刷新）按钮。技术新闻网站Digg (http://
digg.com/spy)就使用了这种技术。Digg采用自动刷新方法不断更新其页面，并使用了很有帮助的褪色技术，以可视化的方式让用户知道哪些新闻是新的（见图4-7）。<br>

[[Image:image007.jpg]]
[[Image:image008.jpg]]

图4-7  Digg.com，自动刷新页面的例子<br>

如果查看Apple的新闻，你可能已经看到Steve Jobs在Apple的2005世界开发人员大会上的主题演讲，其中透露Apple将开始转向Intel处理器。MacRumors.com (http://www. macrumors. com/)的小组使用Ajax技术相当及时地发布了这个信息，而且减轻了其服务器的压力。最近，Apple的iTunes网站（http:// www.apple.com/itunes/）正在使用Ajax动态更新其下载数（目标是5亿）（见图4-8）。<br>

自动刷新页面实际上相当简单。对于代码清单4-7所示的例子，使用一个按钮开始“轮询”，不过在实际应用中，可能会以onload事件代之。doStart()方法负责启动，不过最有意思的地方是pollCallback()方法中的setTimeout()方法，它允许以固定的时间间隔（单位是毫秒）执行给定的方法。createRow()方法只是一个充分利用了DOM方法来动态创建内容的辅助函数，refreshTime()用于刷新定时器值。<br>

代码清单4-7  dynamicUpdate.html<br>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br>
 <html><br>
  <head><br>
    <title>Ajax Dynamic Update</title><br>
    <script type="text/javascript"><br>
        var xmlHttp;<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 doStart() {<br>
            createXMLHttpRequest();<br>
            var url = "DynamicUpdateServlet?task=reset";<br>
            xmlHttp.open("GET", url, true);<br>
            xmlHttp.onreadystatechange = startCallback;<br>
            xmlHttp.send(null);<br>
        }<br>
        function startCallback() {<br>
            if (xmlHttp.readyState == 4) {<br>
                if (xmlHttp.status == 200) {<br>
                    setTimeout("pollServer()", 5000);<br>
                   refreshTime();<br>
                }<br>
            }<br>
        }<br>
        function pollServer() {<br>
            createXMLHttpRequest();<br>
            var url = "DynamicUpdateServlet?task=foo";<br>
            xmlHttp.open("GET", url, true);<br>
            xmlHttp.onreadystatechange = pollCallback;<br>
            xmlHttp.send(null);<br>
        }<br>
    function refreshTime(){<br>
        var time_span = document.getElementById("time");<br>
        var time_val = time_span.innerHTML;<br>
        var int_val = parseInt(time_val);<br>
        var new_int_val = int_val - 1;<br>
        if (new_int_val > -1) {<br>
            setTimeout("refreshTime()", 1000);<br>
            time_span.innerHTML = new_int_val;<br>
        } else {<br>
            time_span.innerHTML = 5;<br>
        }<br>
    }<br>
    function pollCallback() {<br>
        if (xmlHttp.readyState == 4) {<br>
            if (xmlHttp.status == 200) {<br>
                var message =<br>
                      xmlHttp.responseXML<br>
                         .getElementsByTagName("message")[0].firstChild.data;<br>
                if (message != "done") {<br>
                    var new_row = createRow(message);<br>
                  var table = document.getElementById("dynamicUpdateArea");<br>
                    var table_body =<br>
                                table.getElementsByTagName("tbody").item(0);<br>
                    var first_row =<br>
                               table_body.getElementsByTagName("tr").item(1);<br>
                    table_body.insertBefore(new_row, first_row);<br>
                    setTimeout("pollServer()", 5000);<br>
                  refreshTime();<br>
                }<br>
            }<br>
        }<br>
    }<br>
    function createRow(message) {<br>
        var row = document.createElement("tr");<br>
        var cell = document.createElement("td");<br>
        var cell_data = document.createTextNode(message);<br>
        cell.appendChild(cell_data);<br>
        row.appendChild(cell);<br>
        return row;<br>
    }<br>
  </script><br>
 </head><br>
 <body><br>
  <nowiki> <h1>Ajax Dynamic Update Example</h1></nowiki><br>
  <nowiki>This page will automatically update itself:</nowiki><br>
      <nowiki><input type="button" value="Launch" id="go" onclick="doStart();"/></nowiki><br>
  <nowiki><p></nowiki><br>
  <nowiki>Page will refresh in <span id="time">5</span> seconds.</nowiki><br>
  <nowiki><p></nowiki><br>
  <nowiki><table id="dynamicUpdateArea" align="left"></nowiki><br>
      <nowiki><tbody></nowiki><br>
          <nowiki><tr id="row0"><td></td></tr></nowiki><br>
      <nowiki></tbody></nowiki><br>
    <nowiki></table></nowiki><br>
  </body><br>
 </html><br>

服务器代码相当简单，它只是根据简单的计数器返回一组信息（见代码清单4-8）。<br>

代码清单4-8  
 DynamicUpdateServlet.java<br>
 package ajaxbook.chap4;<br>
 import java.io.*;<br>
 import java.net.*;<br>
 import javax.servlet.*;<br>
 import javax.servlet.http.*;<br>
 public class DynamicUpdateServlet 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 res = "";<br>
        String task = request.getParameter("task");<br>
        String message = "";<br>
        if (task.equals("reset")) {<br>
            counter = 1;<br>
        } else {<br>
            switch (counter) {<br>
                case 1: message = "Steve walks on stage"; break;<br>
                case 2: message = "iPods rock"; break;<br>
               case 3: message = "Steve says Macs rule"; break;<br>
                case 4: message = "Change is coming"; break;<br>
                case 5: message = "Yes, OS X runs on Intel - has for years"; break;<br>
                case 6: message = "Macs will soon have Intel chips"; break;<br>
                case 7: message = "done"; break;<br>
           }<br>
            counter++;<br>
        }<br>
        res = "<message>" + message + "</message>";<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-9显示了浏览器中看到的这个动态更新例子。<br>
[[Image:image009.jpg]]
[[category:Ajax]]