本文實例講述了JQuery實現(xiàn)簡單的服務(wù)器輪詢效果。分享給大家供大家參考，具體如下：
很多論壇都有進入后，彈出提示，說有多少封郵件沒有看，或者是一個oa系統(tǒng)，進入后，提示有多少個任務(wù)沒有做。每隔一段時間會提示一次，但是如何實現(xiàn)呢。其實，利用jquery的話，會比較簡單，核心元素就是json格式解析和setInterval()函數(shù)。下面一起來實現(xiàn)：
首先，我們default.aspx的頁面如下所示：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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>服務(wù)器輪詢</title> <link href="Content/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" /> <link href="Content/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="js/src/grid.base.js" type="text/javascript"></script> <script type="text/javascript"> function showUnreadNews() { $(document).ready(function() { $.ajax({ type: "GET", url: "Result.ashx", dataType: "json", success: function(msg) { //alert(msg); $.each(msg, function(id, title) { $("#news").append("<a href=detailnews.aspx?id=" + id + ">" + title + "</a><br>"); }); } }); }); } setInterval('showUnreadNews()',5000); </script></head><body> <form id="form1" runat="server"> <div id="news"> </div> </form></body></html>上面代碼主要利用ajax函數(shù)向Result.ashx頁面發(fā)出ajax請求，然后由Result.ashx這個頁面返回json數(shù)據(jù)，并進行解析，最后利用setInterval（）函數(shù)實現(xiàn)輪詢效果，具體的Result.ashx頁面代碼如下：
<%@ WebHandler Language="C#" Class="Result" %>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 = "select * from Content where NewsFlag=0"; 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 = "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); } 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]["NewsID"].ToString() + ":" +"/""+ dt.Rows[i]["NewsTitle"].ToString()+"/","); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("}"); return jsonBuilder.ToString(); } public Sqlite InitSQLite() { Sqlite _sqLite = new Sqlite(); _sqLite.ConnetStringBuilder.DataSource = AppDomain.CurrentDomain.BaseDirectory + "News.db3"; _sqLite.ConnetStringBuilder.Pooling = true; _sqLite.ConnetStringBuilder.FailIfMissing = true; _sqLite.ConnetStringBuilder.UseUTF16Encoding = true; return _sqLite; } public bool IsReusable { get { return false; } }}數(shù)據(jù)庫使用的是sqlite，具體使用方式請自查。這個處理文件中，最重要的是由datatable數(shù)據(jù)生成符合格式的json數(shù)據(jù)。
這樣，系統(tǒng)最終就實現(xiàn)了，每隔5S鐘，首頁會向服務(wù)器輪詢一次數(shù)據(jù)，以便獲得最新的數(shù)據(jù)。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
新聞熱點
疑難解答
