小毛用AjaxPro实现定时刷新效果

mlzboy

浏览: 725459 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

随枫而弑

azrael6619

tonyJ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax Web JavaScript .net UI

在看本文之前，建议查看本人的系列文章：
《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>";
        }
    }
}

程序运行的效果：

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