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代码在拼接数据时，一般取的是数据库里最新的数据，这个过程会复杂得多。