AjaxPro定時刷新頁面（zt ）

時間 2021-08-13

標籤 javascript html java web ajax 服務器 ide 網站 spa 欄目 Ajax 简体版

原文原文鏈接

說明：在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節點下添加以下節點：javascript

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

演示程序的cs代碼很簡單，程序的主要思路就是經過js定時調用服務器端方法，並將結果顯示出來，有興趣的朋友能夠將它完善，放到本身的web上，用於改善用戶體驗。html

前臺頁面： java

<%@ 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
/// </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系統中用到了這個功能，在用戶登陸進系統以後，即便用戶在某個頁面長期停留也沒有關係，能夠在不影響用戶的前提下定時局部刷新，一旦有須要用戶處理的事情就會即便通知用戶，極大地改善了用戶體驗。web