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#代码，获取数据：
Ajax轮询消息自动提示（消息盒子）的更多相关文章
- 中断、轮询、事件驱动、消息驱动、数据流驱动(Flow-Driven)？
轮询.事件驱动.消息驱动.流式驱动 ---数据流驱动 Unidirectional Architecture? 中断.事件.消息这样一种机制来实现更好的在多任务系统里运行... 阻塞,非阻塞同步,异步 ...
- 闲话ajax，例ajax轮询，ajax上传文件[开发篇]
引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...
- WebSocket和long poll、ajax轮询的区别，ws协议测试
WebSocket和long poll.ajax轮询的区别,ws协议测试 WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连 ...
- 浅谈Websocket、Ajax轮询和长连接（long pull）
最近看到了一些介绍Websocket的文章,觉得挺有用,所以在这里将自己的对其三者的理解记录一下. 1.什么是Websocket Websocket是HTML5中提出的新的协议,注意,这里是协议,可以 ...
- Ajax轮询以及Comet模式—写在Servlet 3.0发布之前(转)
2008 年的夏天,偶然在网上闲逛的时候发现了 Comet 技术,人云亦云间,姑且认为它是由 Dojo 的 Alex Russell 在 2006 年提出.在阅读了大量的资料后,萌发出写篇 blog ...
- WebSocket原理及与http1.0/1.1 long poll和 ajax轮询的区别【转自知乎】
一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)首先HTTP有1.1和1.0之说,也就是所谓的ke ...
- 浅谈Websocket、Ajax轮询和长轮询（long polling）
浅谈Websocket.Ajax轮询和长轮询(long p0ll) 最近看到了一些介绍Websocket的文章,觉得挺有用,所以在这里将自己的对其三者的理解记录一下. 1.什么是Websocket W ...
- long poll、ajax轮询和WebSocket
websocket 的认识深刻有木有.所以转到我博客里,分享一下.比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗,纯粹为分享.废话这么多了,最后再赞一个~ WebSocket是出的东西(协 ...
- COMET探索系列二【Ajax轮询复用模型】
写在前面:Ajax轮询相信大家都信手拈来在用,可是有这么一个问题,如果一个网站中同时有好多个地方需要用到这种轮询呢?就拿我们网站来说,有一个未读消息数提醒.还有一个时实时加载最新说说.昨天又加了一个全 ...
- ajax轮询原理及其实现方式
ajax轮询原理及其实现方式 ajax轮询的两种方式 方式1:设定一个定时器,无论有无结果返回,时间一到就会继续发起请求,这种轮询耗费资源,也不一定能得到想要的数据,这样的轮询是不推荐的. 方式2: ...
随机推荐
- Oracle段高水位(HWM, high water mark)问题
Oracle对表做全表扫描的时候 ,会扫描完HWM以下的数据块.如果某个表delete(delete操作不会降低高水位)了大量数据,那么这时对表做全表扫描就会做很多无用功,扫描了一大堆数据块,最后发现 ...
- 【转】Android开发笔记——圆角和边框们
原文地址:http://blog.xianqu.org/2012/04/android-borders-and-radius-corners/ Android开发笔记——圆角和边框们 在做Androi ...
- 机器学习，数据挖掘，统计学，云计算，众包（crowdsourcing），人工智能，降维（Dimension reduction）
机器学习 Machine Learning:提供数据分析的能力,机器学习是大数据时代必不可少的核心技术,道理很简单:收集.存储.传输.管理大数据的目的,是为了“利用”大数据,而如果没有机器学习技术分析 ...
- Python函数部分
Python函数的初识 Python函数的进阶 Python中的闭包与迭代器 Python生成器/推导式/生成器表达式 Python内置函数二 (递归函数,匿名函数,二分法)
- 5、数据类型三：hash
Hash数据类型使用很普遍,它同样是key-value的方式来组织的,只是其value又包含多个field-fieldValue对.想要获取某个fieldValue,可以通过key-field联合来定 ...
- Putty连接虚拟机Centos出现：Network error：Connection refused的解决方法
转自:http://www.bcoder.cn/17251.html 我和很多人一样都是linux菜鸟,但是呢又对此很是感兴趣,不折腾就是不爽: 我下载了centos 6.4安装好在VMware 虚拟 ...
- Vue2不使用Vuex如何实现兄弟组件间的通信
在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...
- Python之路,Day9 , IO多路复用(番外篇)
同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本文讨论的背景是Linux环境下的network IO. ...
- Unity脚本开发基础 C#
1. MonoBehaviour 类 常用事件响应函数: 2. 访问游戏对象 (1) 通过名称来查找 (2) 通过标签来查找 上述函数比较费时,应避免在 Update 函数调用. 3. 访问组件 对于 ...
- C# 发送和接受Get请求
1.发送Get请求 public static string HttpGet(string Url, string postDataStr) { HttpWebRequest request = (H ...