pg电子游戏象财神

書名： 15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 1111字
更新時間： 2020-11-28 16:21:47

3.12 實戰2：利用Ajax實現微博的實時更新

微博是當前年輕人使用頻率非常高的網絡服務，它有多種客戶端，如電腦、手機、平板等。微博有一個非常顯著的特點，就是信息實時更新，這是如何辦到的呢？其實，微博的實現原理依然要歸功于Ajax技術。

無論是在手機上，還是在電腦屏幕上，瀏覽微博信息都不需要手動獲取數據，微博信息會主動推送到客戶端，把最新的數據呈現在微博列表的第一條。這需要依賴兩個比較核心的技術：定時器和Ajax技術。

根據HTTP協議的規定，每一次HTTP連接都是單向的，而且不可逆。因此，信息的主動推送不能依賴這項網絡協議，客戶端只能使用定時器技術定期主動從服務器端獲取數據。在JavaScript技術中，最常見的定時器莫過于setInterval和setTimeout函數，這兩個函數都用于實現定時功能，前者是多次定時，后者是單次定時。一般來說，采用setInterval函數更常見一些，因為它在支持多次定時時效率相對較高，而且可以通過與之對應的clearInterval函數控制定時器。

微博數據的刷新肯定不會依賴網頁的刷新。因此，Ajax是一項必用的技術，它是不刷新網頁而獲取數據的首選。如果讀者看過微博網頁的源代碼，就不難發現，微博采用的正是本章學習的jQuery的Ajax技術。

技術的選擇確定以后，就需要分析其他設計了，如數據類型、信息展示、是否需要動畫效果等。一般來說，JSON格式是這類大數據傳輸應用的首選，因為它的解析工作比較輕松，而且數據量不大。如果讀者使用過微博，就會發現當有新的數據需要呈現在頂部時，它會以一種漸進的動畫效果出現，這會顯得更友好一些。

根據以上分析，完全可以復制微博實時刷新功能。以下是詳細的代碼實現（jq_weibo.html）：

        01    <html>
        02         <head>
        03             <title>我的微博</title>
        04               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        05               <script type="text/javascript" src="../jquery-3.1.1.js"></script>
        06               <script type="text/javascript">
        07                 $(document).ready(function(){       //加載執行
        08                      var url = 'weibo.php';           //服務器端地址，往往是動態的
        09                      //開始定時器
        10                          window.setInterval(function(){
        11                           $.get(url,                     //目標URL
        12                                function(data){          //成功回調函數
        13                                           var json = eval('('+data+')');
        14                                    var title = json['title'];      //title數據
        15                                    //content數據
        16                                           var content = json['content'];
        17                                    var time = new Date();  //當前時間
        18                                     var year = time.getYear(); //年度
        19                                     var month = time.getMonth(); //月份
        20                                     var date = time.getDate(); //日
    21                                    var hh = time.getHours(); //時
    22                                    var mm = time.getMinutes(); //分
    23                                     var ss = time.getSeconds(); //秒
    24                                    //拼湊事件格式的字符
    25                                           time = year+'-'+month+'-'+date+'
                                      '+hh+':'+mm+':'+ss;
    26                                    var str = '<div class="info">';//定義數據變量
    27                                    str += '<h3>'+title+'</h3>';    //標題
    28                                           str += '<p class="content">
                                    '+content+'</p>'; //內容
    29                                    str += '<p class="time">發布
                                      于：'+time+'</p>'; //時間
    30                                           str += '</div>';
    31                                    $(".container").prepend(str);   //插入到頂部
    32                                     });
    33                      }, 10*1000);                                 //間隔為10秒
    34                    });
    35               </script>
    36               <style>
    37                 .container{                                  /*容器的樣式*/
    38                          width: 300px;
    39                          margin: 5px auto;
    40                          padding: 5px;
    41                          border: 1px solid black;
    42                    }
    43                 .info{                                             /*信息的樣式*/
    44                          padding: 10px;
    45                          border-bottom: 1px dotted black;
    46                          font-size: 12px;
    47                    }
    48                 .info h3{                                         /*標題的樣式*/
    49                          text-align: left;
    50                          font-size: 14px;
    51                          font-weight:600;
    52                    }
    53                 .info .content{                                  /*內容的樣式*/
    54                          text-align: left;
    55                          font-size: 12px;
    56                    }
    57                 .info .time{                                      /*時間的樣式*/
    58                          text-align: right;
    59                          padding-right:10px;
    60                          margin: 5px 0 0 0;
    61                          color:gray;
    62                    }
    63               </style>
    64         </head>
    65         <body>
    66               <div class="container">
    67                    <div class="info">
    68                      <h3>這是一條微博</h3>
    69                      <p class="content">這是一條微博信息，內容是。。。</p>
    70                      <p class="time">發布于：2014-06-08 12:00:00</p>
    71                    </div>
    72               </div>
        73         </body>
        74    </html>

服務器端的PHP代碼如下：

        <? php
      echo "{";
      echo "'title':'I am Title', ";
      echo "'content':'I am content, this is a good day.'";
      echo "}";
        ?>

本示例的效果如圖3.17所示。

圖3.17 微博舉例

不難看出，Ajax和定時器是本案例的核心技術。案例的PHP代碼相對簡單，而在實際開發中，PHP代碼在拼接數據時，一般取的是數據庫里最新的數據，這個過程會復雜得多。

官术网_书友最值得收藏!

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

3.12 實戰2：利用Ajax實現微博的實時更新

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）