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

最新推荐文章于 2021-03-29 14:09:02 发布

原创最新推荐文章于 2021-03-29 14:09:02 发布 · 2.3w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #json #function #string #border #xhtml

JavaScript 同时被 3 个专栏收录

84 篇文章

订阅专栏

JQuery

26 篇文章

订阅专栏

Ajax

6 篇文章

订阅专栏

本文介绍了一个基于Ajax轮询技术实现的消息盒子示例，包括前端HTML与JavaScript代码及后端C#代码。该应用能够定时从服务器获取新消息，并以友好的形式展示给用户。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经过一下午写了个消息盒子的例子，用的是ajax方式轮询读取，没有用到后台自动“推”数据的方式，效果良好。

前台的HTML代码：

<%@ 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></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"></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#代码，获取数据：

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