如何用AjaxPro實(shí)現(xiàn)定時刷新效果_AJAX教程
推薦：怎樣用AjaxPro實(shí)現(xiàn)無刷新翻頁效果及數(shù)據(jù)庫分頁在看本文之前，建議查看本人的系列文章： 《AjaxPro與服務(wù)器端交互過程中如何傳值》 《用AjaxPro實(shí)現(xiàn)二級聯(lián)動》 《用AjaxPro實(shí)現(xiàn)定時刷新效果》 以便對AjaxPro有個初步印象。 題外話：經(jīng)不住一些朋友的一再要求，一氣寫了這么幾篇Ajax方面的文章，這其中大部
在看本文之前，建議查看本人的系列文章：
《AjaxPro與服務(wù)器端交互過程中如何傳值》
《用AjaxPro實(shí)現(xiàn)二級聯(lián)動》，以便對AjaxPro有個初步印象。
說明：在Web開發(fā)中，有時候需要經(jīng)常更新某一部分內(nèi)容，如果不采用Ajax技術(shù)，就需要使用傳統(tǒng)的html技術(shù)，在<head></head>區(qū)域加以下代碼：<meta http-equiv="Refresh" content="10"> （假設(shè)每10秒更新一次），這樣做的缺點(diǎn)是每次更新的時候整個頁面都刷新了帶來很多不必要的流量，也影響效率。微軟的Ajax.Net類庫也提供了相應(yīng)的控件，使用微軟提供的控件開發(fā)效率高，但是經(jīng)常會出現(xiàn)“***不是已知元素 原因可能是網(wǎng)站中存在編譯錯誤 ”的提示，另外有些控件雖然在執(zhí)行的時候不占用顯示空間，但是在設(shè)計視圖的時候卻占用顯示空間，讓人心情不爽，所以我還是傾向于AjaxPro這個第三方控件。
不過AjaxPro本身好像沒有提供定時執(zhí)行某個方法的類，但是我們可以利用Js本身的方法，它就是setInterval("方法名()",間隔多少微秒)，沒研究微軟的 Ajax.Net類庫，我估計它的最終效果也是采用這個方法或者類似方法來實(shí)現(xiàn)的。（如果只想執(zhí)行一次，可以使用setTimeout("方法名()",間隔多少微秒)這個方法。
另外說明一下，在本人發(fā)表前面兩篇關(guān)于AjaxPro的文章之后，有不少人詢問如何配置AjaxPro，在這里簡單說明一下：首先需要一個AjaxPro類庫，它目前已經(jīng)到2.0版本（Vs2003只支持AjaxPro1.0，VS2005支持AjaxPro2.0版本，對應(yīng)的類庫文件分別是AjaxPro.dll和AjaxPro.2.dll），將下載到的類庫文件放到bin文件夾下，再配置一下web.config文件即可使用了，在system.web節(jié)點(diǎn)下添加如下節(jié)點(diǎn)：
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>
</system.web>
演示程序的cs代碼很簡單，程序的主要思路就是通過js定時調(diào)用服務(wù)器端方法，并將結(jié)果顯示出來，有興趣的朋友可以將它完善，放到自己的web上，用于改善用戶體驗(yàn)。
前臺頁面：
<!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>路燈狀態(tài)</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.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ā)中，有時候需要經(jīng)常更新某一部分內(nèi)容，如果不采用Ajax技術(shù)，就需要使用傳統(tǒng)的html技術(shù)，在<head></head>區(qū)域加
/// 以下代碼：<meta http-equiv="Refresh" content="10"> （假設(shè)每10秒更新一次），這樣做的缺點(diǎn)是每次更新的時候整個頁面都刷新了
/// 帶來很多不必要的流量，也影響效率。
/// 微軟的Ajax.Net類庫也提供了相應(yīng)的控件，使用微軟提供的控件開發(fā)效率高，但是經(jīng)常會出現(xiàn)“***不是已知元素 原因可能是網(wǎng)站中存在編譯錯誤 ”的提示
/// 另外有些控件雖然在執(zhí)行的時候不占用顯示空間，但是在設(shè)計視圖的時候卻占用顯示空間，讓人心情不爽，所以我還是傾向于AjaxPro這個第三方控件。
/// 不過AjaxPro本身好像沒有提供定時執(zhí)行某個方法的類，但是我們可以利用Js本身的方法，它就是setInterval("方法名()",間隔)，沒研究微軟的
/// Ajax.Net類庫，我估計它的最終效果也是采用這個方法或者類似方法來實(shí)現(xiàn)的。
/// 作者：周公
/// 時間：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));//注冊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)行效果如上圖所示，整個頁面除了表示路燈狀態(tài)的文字和文字相應(yīng)的顏色變化以外（日期時間部分是用于調(diào)試比較的語句，與邏輯無關(guān)），其它部分并不刷新和變化，達(dá)到了定時刷新局部的要求。這種功能在某些情況下非常有用，本人曾在開發(fā)的一個OA系統(tǒng)中用到了這個功能，在用戶登錄進(jìn)系統(tǒng)之后，即使用戶在某個頁面長期停留也沒有關(guān)系，可以在不影響用戶的前提下定時局部刷新，一旦有需要用戶處理的事情就會即使通知用戶，極大地改善了用戶體驗(yàn)。
需要說明的是，在運(yùn)行程序時會有“缺少對象”的js腳本錯誤提示，不過不影響程序的效果，聽說是AjaxPro的bug，我會進(jìn)一步尋找原因。如果要消除這個錯誤提示，可以在頁面的<head></head>區(qū)域添加如下代碼（本示例中已經(jīng)添加）：
window.onerror = function()
{
return true;//不顯示腳本錯誤信息
}
</script>
分享：解析簡單自定義實(shí)現(xiàn)jQuery驗(yàn)證分兩種情況驗(yàn)證，一是直接使用本地驗(yàn)證，二是ajax到服務(wù)器驗(yàn)證。 我現(xiàn)在需要驗(yàn)證：用戶名，郵箱，電話 三個input(text)，用戶名、電話號碼只需要本地驗(yàn)證格式，只要匹配給定的正則表達(dá)式即可，而郵箱首先在本地驗(yàn)證格式，符合格式則ajax到服務(wù)器驗(yàn)證是否已被
- Ajax中瀏覽器的緩存問題解決方法
- AJAX和WebService實(shí)現(xiàn)省市縣三級聯(lián)動具體代碼
- ajax 登錄功能簡單實(shí)現(xiàn)(未連接數(shù)據(jù)庫)
- AJAX和WebService實(shí)現(xiàn)郵箱驗(yàn)證(無刷新驗(yàn)證郵件地址是否合法)
- AJAX和三層架構(gòu)實(shí)現(xiàn)分頁功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實(shí)現(xiàn)
- AJAX獲取服務(wù)器當(dāng)前時間及時間格式輸出處理
- ajax傳遞多個參數(shù)具體實(shí)現(xiàn)
- ajax傳遞一個參數(shù)具體實(shí)現(xiàn)
- 滑輪滾動到頁面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
AJAX教程Rss訂閱編程教程搜索
AJAX教程推薦
- 談在AJAX中GET回的ResponseText中文亂碼的最簡解決辦法
- 解讀jsp+ajax自動刷新實(shí)例
- 用AJAX編寫用戶注冊實(shí)例及技術(shù)小結(jié)
- 如何不用組件實(shí)現(xiàn)Ajax效果
- 菜鳥蔡之Ajax復(fù)習(xí)第二篇(JQuery中的load()方法實(shí)現(xiàn)Ajax功能)
- JQuery的ajax的用法在asp中使用$.ajax()實(shí)現(xiàn)
- 如何結(jié)合MS AJAX將js文件編譯到動態(tài)鏈接庫
- 詳解-CSS技巧篇
- jPager一個適合Ajax+JSON+jQuery環(huán)境使用的多功能頁碼欄
- 剖析AJAX成為“時尚”的十大主要理由
- 相關(guān)鏈接：
- 教程說明：
AJAX教程-如何用AjaxPro實(shí)現(xiàn)定時刷新效果
。