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

在看本文之前,建议查看本人的系列文章:
《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 >

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

程序运行的效果:
小毛用AjaxPro实现定时刷新效果
------------------------------------------
小毛用AjaxPro实现定时刷新效果



你可能感兴趣的:(Ajax)