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>
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(); } } }
