Ajax轮询消息自动提示（消息盒子）

经过一下午写了个消息盒子的例子，用的是ajax方式轮询读取，没有用到后台自动“推”数据的方式，效果良好。
Ajax轮询消息自动提示（消息盒子）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainTalk.aspx.cs" Inherits="wj_test.Talk.mainTalk" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <mce:script src="../Scripts/jquery-1.4.1.js" mce_src="Scripts/jquery-1.4.1.js" type="text/javascript"></mce:script>
    <mce:style><!--
        body
        {
            font-size: 12px;
        }
        #content
        {
            width: 200px;
            height: 50px;
            border: solid 1px #dedede;
            background-color: #eee;
        }
        #news
        {
            width: 200px;
            height: 13px;
            font-weight: bold;
        }
        li
        {
            height: 16px;
            line-height: 16px;
            list-style: none;
            color: #226B19;
        }
        a
        {
            text-decoration: none;
            color: #9E3423;
        }
    
--></mce:style><style mce_bogus="1">        body
        {
            font-size: 12px;
        }
        #content
        {
            width: 200px;
            height: 50px;
            border: solid 1px #dedede;
            background-color: #eee;
        }
        #news
        {
            width: 200px;
            height: 13px;
            font-weight: bold;
        }
        li
        {
            height: 16px;
            line-height: 16px;
            list-style: none;
            color: #226B19;
        }
        a
        {
            text-decoration: none;
            color: #9E3423;
        }
    </style>
    <mce:script type="text/javascript"><!--
        function getData() {//获取留言数据
            var temp = "";
            $.getJSON("Data.aspx", { ID: "2", time: new Date() }, function (json) {//利用ajax返回json的方式
                if (json.length > 0) {//返回有数据
                    $("#news").html(" <font color='Red'>有新消息：</font>");
                    for (var i = 0; i < json.length; i++) {//循环json，生成需要的标签
                        temp += "<li id='" + json[i].ID + "' ><img src="../img/t.gif" mce_src="img/t.gif" style='height: 14px; width: 14px' /><a  href="#" mce_href="#" onclick='getHref(" + json[i].ID + "); return false;' >" + json[i].SendID + "给您留言了</a></li>";
                    }
                    $("#info li").remove(); //移除之前的元素li
                    $("#info").append(temp); //追加新的
                    $("li").hide(); //隐藏全部，只显示前2条
                    $("li:eq(0)").show();
                    $("li:eq(1)").show();
                }
                else {
                    $("#news").html(" <font color='#999'>无新消息：</font>"); //无数据时的提示
                }
            })
        };
        $(function () {//间隔3s自动加载一次
            getData(); //首次立即加载
            window.setInterval(getData, 3000); //循环执行！！
            }
         );
        function getHref(id) {//重定向页面并且移除当前li标签
            location.href = 'ShowAndRe.aspx?ID=' + id;
            $(document.getElementById(id)).remove();
        }
    
// --></mce:script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="content">
        <div id="news">
        </div>
        <ul id="info" style="margin: 0 0 0 0;" mce_style="margin: 0 0 0 0;">
        </ul>
    </div>
    </form>
</body>
</html>
前台的HTML代码：