Ajax轮询 - 悦读

前台的HTML代码：

[javascript]view plaincopy 
   
 <%@ 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="#" οnclick='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>  

后台的C#代码，获取数据：

[c-sharp]view plaincopy 
   
 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 using System.Web.UI;  
 using System.Web.UI.WebControls;  
 using System.Data.SqlClient;  
 using System.Data;  
 using System.Text;  
 namespace wj_test.Talk  
 {  
     public partial class Data : System.Web.UI.Page  
     {  
         protected void Page_Load(object sender, EventArgs e)  
         {  
             if (Request.QueryString["ID"] != null)  
             {  
                 string id = Request.QueryString["ID"].ToString();  
                 SqlConnection scn = new DB().getDB();  
                 scn.Open();  
                 string str = "select * from test_talk where Station=0 and ReID="+id+" order by ID desc";  
                 SqlDataAdapter ada = new SqlDataAdapter(str, scn);  
                 DataTable dt = new DataTable();  
                 ada.Fill(dt);  
                 scn.Close();  
                 if (dt.Rows.Count > 0)  
                 {  
                     string json = DataTable2Json(dt);  
                     Response.Write(json);  
                 }  
                 else  
                     Response.Write("{}");//为空时返回{} 使json对象的length=0  
             }  
         }  
         public static string DataTable2Json(DataTable dt)  
         {  
             StringBuilder jsonBuilder = new StringBuilder();  
             jsonBuilder.Append("[");  
             for (int i = 0; i < dt.Rows.Count; i++)  
             {  
                 jsonBuilder.Append("{");  
                 for (int j = 0; j < dt.Columns.Count; j++)  
                 {  
                     jsonBuilder.Append("/"");  
                     jsonBuilder.Append(dt.Columns[j].ColumnName);  
                     jsonBuilder.Append("/":/"");  
                     jsonBuilder.Append(dt.Rows[i][j].ToString());  
                     jsonBuilder.Append("/",");  
                 }  
                 jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
                 jsonBuilder.Append("},");  
             }  
             jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
             jsonBuilder.Append("]");  
             return jsonBuilder.ToString();  
         }    
     }  
 }  