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

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