正文
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代码：
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 > )
{
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 = ; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = ; 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 - , );
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - , );
jsonBuilder.Append("]");
return jsonBuilder.ToString();
}
}
}
后台的C#代码，获取数据：
