如何用AjaxPro實現定時刷新效果

2024-09-01 08:26:19

字體：大中小

來源：轉載

供稿：網友

在看本文之前，建議查看本人的系列文章：
《AjaxPro與服務器端交互過程中如何傳值》
《用AjaxPro實現二級聯動》，以便對AjaxPro有個初步印象。

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

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

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

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

前臺頁面：

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

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

后臺代碼：

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開發中，有時候需要經常更新某一部分內容，如果不采用Ajax技術，就需要使用傳統的html技術，在<head></head>區域加
/// 以下代碼：<meta http-equiv="Refresh" content="10"> （假設每10秒更新一次），這樣做的缺點是每次更新的時候整個頁面都刷新了
/// 帶來很多不必要的流量，也影響效率。
/// 微軟的Ajax.Net類庫也提供了相應的控件，使用微軟提供的控件開發效率高，但是經常會出現“***不是已知元素原因可能是網站中存在編譯錯誤 ”的提示
/// 另外有些控件雖然在執行的時候不占用顯示空間，但是在設計視圖的時候卻占用顯示空間，讓人心情不爽，所以我還是傾向于AjaxPro這個第三方控件。
/// 不過AjaxPro本身好像沒有提供定時執行某個方法的類，但是我們可以利用Js本身的方法，它就是setInterval("方法名()",間隔)，沒研究微軟的
/// Ajax.Net類庫，我估計它的最終效果也是采用這個方法或者類似方法來實現的。
/// 作者：周公
/// 時間：2008-3-9
/// 首發地址：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));//注冊AjaxPro
}
//[AjaxPro.AjaxMethod]表示下面的方法用Ajax調用的服務器端方法
[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>";
}
}
}

程序運行的效果：

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

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

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