JQuery实现简单的服务器轮询效果实例
本文实例讲述了JQuery实现简单的服务器轮询效果。分享给大家供大家参考，具体如下：
很多论坛都有进入后，弹出提示，说有多少封邮件没有看，或者是一个oa系统，进入后，提示有多少个任务没有做。每隔一段时间会提示一次，但是如何实现呢。其实，利用jquery的话，会比较简单，核心元素就是json格式解析和setInterval()函数。下面一起来实现：
首先，我们default.aspx的页面如下所示：
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>服务器轮询</title>
<linkhref="Content/jquery-ui-1.7.2.custom.css"rel="stylesheet"type="text/css"/>
<linkhref="Content/ui.jqgrid.css"rel="stylesheet"type="text/css"/>
<scriptsrc="Scripts/jquery-1.3.2.min.js"type="text/javascript"></script>
<scriptsrc="js/i18n/grid.locale-en.js"type="text/javascript"></script>
<scriptsrc="js/jquery.jqGrid.min.js"type="text/javascript"></script>
<scriptsrc="js/src/grid.base.js"type="text/javascript"></script>
<scripttype="text/javascript">
functionshowUnreadNews()
{
$(document).ready(function(){
$.ajax({
type:"GET",
url:"Result.ashx",
dataType:"json",
success:function(msg){
//alert(msg);
$.each(msg,function(id,title){
$("#news").append("<ahref=detailnews.aspx?id="+id+">"+title+"</a><br>");
});
}
});
});
}
setInterval('showUnreadNews()',5000);
</script>
</head>
<body>
<formid="form1"runat="server">
<divid="news">
</div>
</form>
</body>
</html>
上面代码主要利用ajax函数向Result.ashx页面发出ajax请求，然后由Result.ashx这个页面返回json数据，并进行解析，最后利用setInterval（）函数实现轮询效果，具体的Result.ashx页面代码如下：
<%@WebHandlerLanguage="C#"Class="Result"%>
usingSystem;
usingSystem.Web;
usingSystem.Text;
usingSystem.Data.SQLite;
usingSystem.Data;
publicclassResult:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext){
stringsql="select*fromContentwhereNewsFlag=0";
DataTabledt=newDataTable();
using(SQLiteConnectionconn=newSQLiteConnection(InitSQLite().Connection))
{
SQLiteDataAdaptersda=newSQLiteDataAdapter(sql,conn);
sda.Fill(dt);
}
stringjsonStr=GetJson(dt);
context.Response.ContentType="text/json";
context.Response.Buffer=true;
context.Response.ExpiresAbsolute=DateTime.Now.AddDays(-1);
context.Response.AddHeader("pragma","no-cache");
context.Response.AddHeader("cache-control","");
context.Response.CacheControl="no-cache";
context.Response.Write(jsonStr);
}
publicstaticstringGetJson(DataTabledt)
{
StringBuilderjsonBuilder=newStringBuilder();
jsonBuilder.Append("{");
for(inti=0;i<dt.Rows.Count;i++)
{
jsonBuilder.Append(dt.Rows[i]["NewsID"].ToString()+":"+"\""+dt.Rows[i]["NewsTitle"].ToString()+"\",");
}
jsonBuilder.Remove(jsonBuilder.Length-1,1);
jsonBuilder.Append("}");
returnjsonBuilder.ToString();
}
publicSqliteInitSQLite()
{
Sqlite_sqLite=newSqlite();
_sqLite.ConnetStringBuilder.DataSource=AppDomain.CurrentDomain.BaseDirectory+"News.db3";
_sqLite.ConnetStringBuilder.Pooling=true;
_sqLite.ConnetStringBuilder.FailIfMissing=true;
_sqLite.ConnetStringBuilder.UseUTF16Encoding=true;
return_sqLite;
}
publicboolIsReusable{
get{
returnfalse;
}
}
}
数据库使用的是sqlite，具体使用方式请自查。这个处理文件中，最重要的是由datatable数据生成符合格式的json数据。
这样，系统最终就实现了，每隔5S钟，首页会向服务器轮询一次数据，以便获得最新的数据。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。