用AjaxPro实现定时刷新效果

2022-06-09 14:58:04

在看本文之前，建议查看本人的系列文章：
《AjaxPro与服务器端交互过程中如何传值》：http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/2026908.aspx
《用AjaxPro实现二级联动》：http://blog.csdn.net/zhoufoxcn/archive/2008/01/07/2029204.aspx ，以便对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系统中用到了这个功能，在用户登录进系统之后，即使用户在某个页面长期停留也没有关系，可以在不影响用户的前提下定时局部刷新，一旦有需要用户处理的事情就会即使通知用户，极大地改善了用户体验。

需要说明的是，在运行程序时会有“缺少对象”的js脚本错误提示，不过不影响程序的效果，听说是AjaxPro的bug，我会进一步寻找原因。如果要消除这个错误提示，可以在页面的<head></head>区域添加如下代码（本示例中已经添加）：

本文转自周金桥51CTO博客，原文链接： http://blog.51cto.com/zhoufoxcn/167060，如需转载请自行联系原作者

码农公寓

相关文章