JQuery实现简单的服务器轮询效果实例

本文实例讲述了JQuery实现简单的服务器轮询效果。分享给大家供大家参考,具体如下:

很多论坛都有进入后,弹出提示,说有多少封邮件没有看,或者是一个oa系统,进入后,提示有多少个任务没有做。每隔一段时间会提示一次,但是如何实现呢。其实,利用jquery的话,会比较简单,核心元素就是json格式解析和setInterval()函数。下面一起来实现: 首先,我们default.aspx的页面如下所示:

<%@ Page Language=\AutoEventWireup=\CodeFile=\Inherits=\

<!DOCTYPE html PUBLIC \XHTML 1.0 Transitional//EN\\ <html xmlns=\ <head runat=\

  <title>服务器轮询</title>

  <link href=\rel=\type=\/>

  <link href=\

  <script src=\   <script src=\   <script src=\   <script src=\   <script type=\   function showUnreadNews()   {

    $(document).ready(function() {       $.ajax({

        type: \

        url: \         dataType: \

        success: function(msg) {           //alert(msg);

          $.each(msg, function(id, title) {

            $(\href=detailnews.aspx?id=\           });         }       });     });   }

  setInterval('showUnreadNews()',5000);   </script> </head> <body>

  <form id=\   <div id=\   </div>   </form> </body> </html>

上面代码主要利用ajax函数向Result.ashx页面发出ajax请求,然后由Result.ashx这个页面返回json数据,并进行解析,最后利用setInterval()函数实现轮询效果,具体的Result.ashx页面代码如下:

<%@ WebHandler Language=\ using System;

using System.Web; using System.Text;

using System.Data.SQLite; using System.Data;

public class Result : IHttpHandler {

  public void ProcessRequest (HttpContext context) {

    string sql = \     DataTable dt = new DataTable();     using (SQLiteConnection conn = new SQLiteConnection(InitSQLite().Connection))     {

      SQLiteDataAdapter sda = new SQLiteDataAdapter(sql, conn);       sda.Fill(dt);     }

    string jsonStr = GetJson(dt);

    context.Response.ContentType = \     context.Response.Buffer = true;

    context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);     context.Response.AddHeader(\     context.Response.AddHeader(\     context.Response.CacheControl = \     context.Response.Write(jsonStr);   }

  public static string GetJson(DataTable dt)   {

    StringBuilder jsonBuilder = new StringBuilder();     jsonBuilder.Append(\

    for (int i = 0; i < dt.Rows.Count; i++)     {

      jsonBuilder.Append( dt.Rows[i][\+ \+\dt.Rows[i][\     }

    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

    jsonBuilder.Append(\     return jsonBuilder.ToString();   }

  public Sqlite InitSQLite()   {

    Sqlite _sqLite = new Sqlite();     _sqLite.ConnetStringBuilder.DataSource = AppDomain.CurrentDomain.BaseDirectory + \

    _sqLite.ConnetStringBuilder.Pooling = true;

    _sqLite.ConnetStringBuilder.FailIfMissing = true;

    _sqLite.ConnetStringBuilder.UseUTF16Encoding = true;     return _sqLite;   }

  public bool IsReusable {     get {

      return false;     }   } }

数据库使用的是sqlite,具体使用方式请自查。这个处理文件中,最重要的是由datatable数据生成符合格式的json数据。

这样,系统最终就实现了,每隔5S钟,首页会向服务器轮询一次数据,以便获得最新的数据。

希望本文所述对大家jQuery程序设计有所帮助。

联系客服:779662525#qq.com(#替换为@) 苏ICP备20003344号-4