久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

Ajax- 創(chuàng)建自動刷新頁面

來自站長百科
跳轉(zhuǎn)至： 導(dǎo)航、? 搜索

導(dǎo)航: 上一頁 | ASP | PHP | JSP | HTML | CSS | XHTML | aJAX | Ruby | JAVA | XML | Python | ColdFusion

股票行情、天氣數(shù)據(jù)、標(biāo)題新聞……這些都是經(jīng)常改變的數(shù)據(jù)，但不值得為這些數(shù)據(jù)的修改手工地完全刷新頁面。盡管CNN.com之類的網(wǎng)站確實(shí)會定期重新加載，但是，如果只是為了改變一兩個(gè)標(biāo)題新聞和幾個(gè)圖就重繪整個(gè)頁面，這可能很讓人掃興。當(dāng)然，如果刷新整個(gè)頁面，可能很難發(fā)現(xiàn)到底哪些是新內(nèi)容！

如果使用Ajax，用戶就不用反復(fù)點(diǎn)擊refresh（刷新）按鈕。技術(shù)新聞網(wǎng)站Digg (http:// digg.com/spy)就使用了這種技術(shù)。Digg采用自動刷新方法不斷更新其頁面，并使用了很有幫助的褪色技術(shù)，以可視化的方式讓用戶知道哪些新聞是新的（見圖4-7）。

Image007.jpg Image008.jpg

圖4-7 Digg.com，自動刷新頁面的例子

如果查看Apple的新聞，你可能已經(jīng)看到Steve Jobs在Apple的2005世界開發(fā)人員大會上的主題演講，其中透露Apple將開始轉(zhuǎn)向Intel處理器。MacRumors.com (http://www. macrumors. com/)的小組使用Ajax技術(shù)相當(dāng)及時(shí)地發(fā)布了這個(gè)信息，而且減輕了其服務(wù)器的壓力。最近，Apple的iTunes網(wǎng)站（http:// www.apple.com/itunes/）正在使用Ajax動態(tài)更新其下載數(shù)（目標(biāo)是5億）（見圖4-8）。

自動刷新頁面實(shí)際上相當(dāng)簡單。對于代碼清單4-7所示的例子，使用一個(gè)按鈕開始“輪詢”，不過在實(shí)際應(yīng)用中，可能會以onload事件代之。doStart()方法負(fù)責(zé)啟動，不過最有意思的地方是pollCallback()方法中的setTimeout()方法，它允許以固定的時(shí)間間隔（單位是毫秒）執(zhí)行給定的方法。createRow()方法只是一個(gè)充分利用了DOM方法來動態(tài)創(chuàng)建內(nèi)容的輔助函數(shù)，refreshTime()用于刷新定時(shí)器值。

代碼清單4-7 dynamicUpdate.html

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

<html>

 <head>

   <title>Ajax Dynamic Update</title>

   <script type="text/javascript">

       var xmlHttp;

       function createXMLHttpRequest() {

           if (window.ActiveXObject) {

               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

           }

           else if (window.XMLHttpRequest) {

               xmlHttp = new XMLHttpRequest();

           }

       }

       function doStart() {

           createXMLHttpRequest();

           var url = "DynamicUpdateServlet?task=reset";

           xmlHttp.open("GET", url, true);

           xmlHttp.onreadystatechange = startCallback;

           xmlHttp.send(null);

       }

       function startCallback() {

           if (xmlHttp.readyState == 4) {

               if (xmlHttp.status == 200) {

                   setTimeout("pollServer()", 5000);

                  refreshTime();

               }

           }

       }

       function pollServer() {

           createXMLHttpRequest();

           var url = "DynamicUpdateServlet?task=foo";

           xmlHttp.open("GET", url, true);

           xmlHttp.onreadystatechange = pollCallback;

           xmlHttp.send(null);

       }

   function refreshTime(){

       var time_span = document.getElementById("time");

       var time_val = time_span.innerHTML;

       var int_val = parseInt(time_val);

       var new_int_val = int_val - 1;

       if (new_int_val > -1) {

           setTimeout("refreshTime()", 1000);

           time_span.innerHTML = new_int_val;

       } else {

           time_span.innerHTML = 5;

       }

   }

   function pollCallback() {

       if (xmlHttp.readyState == 4) {

           if (xmlHttp.status == 200) {

               var message =

                     xmlHttp.responseXML

                        .getElementsByTagName("message")[0].firstChild.data;

               if (message != "done") {

                   var new_row = createRow(message);

                 var table = document.getElementById("dynamicUpdateArea");

                   var table_body =

                               table.getElementsByTagName("tbody").item(0);

                   var first_row =

                              table_body.getElementsByTagName("tr").item(1);

                   table_body.insertBefore(new_row, first_row);

                   setTimeout("pollServer()", 5000);

                 refreshTime();

               }

           }

       }

   }

   function createRow(message) {

       var row = document.createElement("tr");

       var cell = document.createElement("td");

       var cell_data = document.createTextNode(message);

       cell.appendChild(cell_data);

       row.appendChild(cell);

       return row;

   }

 </script>

</head>

<body>

  <h1>Ajax Dynamic Update Example</h1>

 This page will automatically update itself:

     <input type="button" value="Launch" id="go" onclick="doStart();"/>

 <p>

 Page will refresh in <span id="time">5</span> seconds.

 <p>

 <table id="dynamicUpdateArea" align="left">

     <tbody>

         <tr id="row0"><td></td></tr>

     </tbody>

   </table>

 </body>

</html>

服務(wù)器代碼相當(dāng)簡單，它只是根據(jù)簡單的計(jì)數(shù)器返回一組信息（見代碼清單4-8）。

代碼清單4-8 

DynamicUpdateServlet.java

package ajaxbook.chap4;

import java.io.*;

import java.net.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class DynamicUpdateServlet extends HttpServlet {

   private int counter = 1;

   /** Handles the HTTP GET method.

    * @param request servlet request

    * @param response servlet response

    */

   protected void doGet(HttpServletRequest request, HttpServletResponse response)

   throws ServletException, IOException {

       String res = "";

       String task = request.getParameter("task");

       String message = "";

       if (task.equals("reset")) {

           counter = 1;

       } else {

           switch (counter) {

               case 1: message = "Steve walks on stage"; break;

               case 2: message = "iPods rock"; break;

              case 3: message = "Steve says Macs rule"; break;

               case 4: message = "Change is coming"; break;

               case 5: message = "Yes, OS X runs on Intel - has for years"; break;

               case 6: message = "Macs will soon have Intel chips"; break;

               case 7: message = "done"; break;

          }

           counter++;

       }

       res = "<message>" + message + "</message>";

       PrintWriter out = response.getWriter();

       response.setContentType("text/xml");

       response.setHeader("Cache-Control", "no-cache");

       out.println("<response>");

       out.println(res);

       out.println("</response>");

       out.close();

   }

}

圖4-9顯示了瀏覽器中看到的這個(gè)動態(tài)更新例子。
Image009.jpg