如何用AjaxPro實(shí)現(xiàn)定時(shí)刷新效果

2024-09-01 08:26:19

字體：大中小

供稿：網(wǎng)友

在看本文之前，建議查看本人的系列文章：
《AjaxPro與服務(wù)器端交互過程中如何傳值》
《用AjaxPro實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)》，以便對(duì)AjaxPro有個(gè)初步印象。

說明：在Web開發(fā)中，有時(shí)候需要經(jīng)常更新某一部分內(nèi)容，如果不采用Ajax技術(shù)，就需要使用傳統(tǒng)的html技術(shù)，在<head></head>區(qū)域加以下代碼：<meta http-equiv="Refresh" content="10"> （假設(shè)每10秒更新一次），這樣做的缺點(diǎn)是每次更新的時(shí)候整個(gè)頁面都刷新了帶來很多不必要的流量，也影響效率。微軟的Ajax.Net類庫也提供了相應(yīng)的控件，使用微軟提供的控件開發(fā)效率高，但是經(jīng)常會(huì)出現(xiàn)“***不是已知元素原因可能是網(wǎng)站中存在編譯錯(cuò)誤 ”的提示，另外有些控件雖然在執(zhí)行的時(shí)候不占用顯示空間，但是在設(shè)計(jì)視圖的時(shí)候卻占用顯示空間，讓人心情不爽，所以我還是傾向于AjaxPro這個(gè)第三方控件。
不過AjaxPro本身好像沒有提供定時(shí)執(zhí)行某個(gè)方法的類，但是我們可以利用Js本身的方法，它就是setInterval("方法名()",間隔多少微秒)，沒研究微軟的 Ajax.Net類庫，我估計(jì)它的最終效果也是采用這個(gè)方法或者類似方法來實(shí)現(xiàn)的。（如果只想執(zhí)行一次，可以使用setTimeout("方法名()",間隔多少微秒)這個(gè)方法。

另外說明一下，在本人發(fā)表前面兩篇關(guān)于AjaxPro的文章之后，有不少人詢問如何配置AjaxPro，在這里簡(jiǎn)單說明一下：首先需要一個(gè)AjaxPro類庫，它目前已經(jīng)到2.0版本（Vs2003只支持AjaxPro1.0，VS2005支持AjaxPro2.0版本，對(duì)應(yīng)的類庫文件分別是AjaxPro.dll和AjaxPro.2.dll），將下載到的類庫文件放到bin文件夾下，再配置一下web.config文件即可使用了，在system.web節(jié)點(diǎn)下添加如下節(jié)點(diǎn)：

<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>
</system.web>

演示程序的cs代碼很簡(jiǎn)單，程序的主要思路就是通過js定時(shí)調(diào)用服務(wù)器端方法，并將結(jié)果顯示出來，有興趣的朋友可以將它完善，放到自己的web上，用于改善用戶體驗(yàn)。

前臺(tái)頁面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>

<!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>交通信號(hào)指示</title>
<script language="javascript" type="text/javascript">
window.onerror = function()
{
return true;//不顯示腳本錯(cuò)誤信息
}

</script>
</head>
<body onload="init()">
<form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>路燈狀態(tài)</td>
</tr>
<tr>
<td>
<div id="timeLabel"><font color="red">紅燈</font>
</div>
<div id="test">
</div>
</td>
</tr>
<tr>
<td>請(qǐng)遵守交通法則，做到“紅燈停，綠燈行”。</td>
</tr>
</table>

<script language="javascript" type="text/javascript" defer="defer">
function init()
{
setInterval("showTime()",10000);
}
function showTime()
{
var now=new Date();
var time=document.getElementById("timeLabel");
//time.innerText=Index.GetStatus().value;
time.innerHTML=Index.GetStatus().value;
document.getElementById("test").innerHTML=now.toLocaleString();
}
</script>
</form>
</body>
</html>

后臺(tái)代碼：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
/// <summary>
/// 說明：在Web開發(fā)中，有時(shí)候需要經(jīng)常更新某一部分內(nèi)容，如果不采用Ajax技術(shù)，就需要使用傳統(tǒng)的html技術(shù)，在<head></head>區(qū)域加
/// 以下代碼：<meta http-equiv="Refresh" content="10"> （假設(shè)每10秒更新一次），這樣做的缺點(diǎn)是每次更新的時(shí)候整個(gè)頁面都刷新了
/// 帶來很多不必要的流量，也影響效率。
/// 微軟的Ajax.Net類庫也提供了相應(yīng)的控件，使用微軟提供的控件開發(fā)效率高，但是經(jīng)常會(huì)出現(xiàn)“***不是已知元素原因可能是網(wǎng)站中存在編譯錯(cuò)誤 ”的提示
/// 另外有些控件雖然在執(zhí)行的時(shí)候不占用顯示空間，但是在設(shè)計(jì)視圖的時(shí)候卻占用顯示空間，讓人心情不爽，所以我還是傾向于AjaxPro這個(gè)第三方控件。
/// 不過AjaxPro本身好像沒有提供定時(shí)執(zhí)行某個(gè)方法的類，但是我們可以利用Js本身的方法，它就是setInterval("方法名()",間隔)，沒研究微軟的
/// Ajax.Net類庫，我估計(jì)它的最終效果也是采用這個(gè)方法或者類似方法來實(shí)現(xiàn)的。
/// 作者：周公
/// 時(shí)間：2008-3-9
/// 首發(fā)地址：http://blog.csdn.net/zhoufoxcn/archive/2008/03/09/2160407.aspx
/// </summary>
public partial class Index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Index));//注冊(cè)AjaxPro
}
//[AjaxPro.AjaxMethod]表示下面的方法用Ajax調(diào)用的服務(wù)器端方法
[AjaxPro.AjaxMethod]
public string GetStatus()
{
int second = DateTime.Now.Second;
if (second >= 40)
{
return "<font color='red'>紅燈</font>";
}
else if (second <= 39 && second >= 20)
{
return "<font color='green'>綠燈</font>";
}
else
{
return "<font color='yellow'>黃燈</font>";
}
}
}

程序運(yùn)行的效果：

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

————————————————————————————————————
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

說明：程序的運(yùn)行效果如上圖所示，整個(gè)頁面除了表示路燈狀態(tài)的文字和文字相應(yīng)的顏色變化以外（日期時(shí)間部分是用于調(diào)試比較的語句，與邏輯無關(guān)），其它部分并不刷新和變化，達(dá)到了定時(shí)刷新局部的要求。這種功能在某些情況下非常有用，本人曾在開發(fā)的一個(gè)OA系統(tǒng)中用到了這個(gè)功能，在用戶登錄進(jìn)系統(tǒng)之后，即使用戶在某個(gè)頁面長(zhǎng)期停留也沒有關(guān)系，可以在不影響用戶的前提下定時(shí)局部刷新，一旦有需要用戶處理的事情就會(huì)即使通知用戶，極大地改善了用戶體驗(yàn)。

需要說明的是，在運(yùn)行程序時(shí)會(huì)有“缺少對(duì)象”的js腳本錯(cuò)誤提示，不過不影響程序的效果，聽說是AjaxPro的bug，我會(huì)進(jìn)一步尋找原因。如果要消除這個(gè)錯(cuò)誤提示，可以在頁面的<head></head>區(qū)域添加如下代碼（本示例中已經(jīng)添加）：