揭开AJAX神秘的面纱(AJAX个人学习笔记)第4/5页

 更新时间:2009年09月18日 13:50:55   作者:  
写这个学习笔记,只是记载一下自己的学习经过和体会,把一些学习重点记录下来,以备今后的巩固复习及应用,很多知识点没有详细介绍,所以并不完全适用于初学者,如果你是初学者,最好选择一本AJAX学习的书籍,然后与这篇学习笔记对照学习,效果会更好。

二、学习体会及重点
学习应用的语言和工具软件:本人是自学C#语言的,所以开发环境是NET框架下(ASP.NET),开发工具采用VS2008(VS2005也可以)。
学习重点:
AJAX控件的安装,特别是AJAX Control Toolkit部分的安装,详见我的博客日志,有较为详细的介绍,这里就不多说了,唯一提醒的是:VS2008和VS2005在AJAX控件安装和使用上有点区别,但不大!
AJAX控件5个基本控件的介绍
这是微软所提供的AJAX最基本的五大控件,也是最实用的。使用它,你完全可以不用编写任何代码,只是简单的设置一下相关属性,就可以实现AJAX异步数据更新的效果。这是让学习AJAX技术的人最为心动的,是一种傻瓜式的应用,效果不错。如果你想在以前编写的程序中应用AJAX技术,用这五大基本控件,可以在十几分钟内搞定。下面具体介绍一下:
(1)ScriptManager是脚本管理器,负责管理页面中的Ajax控件的有关脚本资源。在一个Web页面中只能有一个ScriptManager,在任何情况下使用ASP.NET Ajax控件必须在页面中添加一个ScriptManager。(这个控件一般不需设置,如果想了解具体属和和事件,可以查找有关资料。)
ScriptManager控件的前台代码形式如下所示:
复制代码 代码如下:

<asp:ScriptManager ID="asm1" runat=” server” >
<AuthenticationService Path="" />
<ProfileService LoadProperties="" Path="" />
<Scripts>
<asp:ScriptReference />
</Scripts>
<Services>
<asp:ServiceReference Path="" />
</Services>
</asp:ScriptManager>

下面重点介绍一下容易出错的一些属性和方法:
1、ScriptMode属性:指定发送模式。一个枚举属性,四个值:Auto、Debug、Release、Inherit。
Auto:默认值。即根据Web.config中retail配置节的值来决定发送脚本的模式。如果retail节点值为true,即将发布模式的脚本发送至客户端,否则发送调试版本。
Debug:当retail属性值为false时,ScriptManager控件将Debug版本的脚本发送至客户端。
Release:当retail属性值为false时,ScriptManager控件将Release版本的脚本发送至客户端。
Inherit:与Auto用法相同,但一般不用。
2、Services属性:用以指定当前页面所引用的WEB服务,使用<asp:ServiceReference>节点可以注册WEB服务,ScritpManage控件将为每一个注册的Web服务生成客户端代理。

(2)ScriptManagerProxy是ScriptManager的扩展,是专门为使用了母版页或用户控件的工程中使用的脚本管理器。当工程页面中已使用了ScriptManager,那么在母版页或用户控件中就可以使用一个ScriptManagerProxy来代理ScripManager的工作。属性上基本与ScriptManager控件一样。

(3)UpdatePanel是使用最广泛的Ajax控件,在页面中嵌入UpdatePanel,就可以实现页面的局部刷新。页面中可以有多个UpdatePanel,UpdataPanel之间也可以相互嵌套。(应用重点)
Updatapanel就是实现页面局部刷新的控件,UpdatePanel控件的前台代码如下所示:
复制代码 代码如下:

<asp:UpdatePanel runat="server" ID="udp1">
<ContentTemplate> //模板
内容模板 放置内容的区域
</ContentTemplate>
<Triggers> //设置提交服务器的方式:异步或同步
<asp:AsyncPostBackTrigger ControlID="" EventName="" /> //指设置异步模式及controlID(引发更新的控件ID)和EventName(引发更新事件名称)
<asp:PostBackTrigger ControlID="" /> //指同步模式,一般不设置这个,可以不写这行代码,因为ajax实现的就是异步更新,同步就失去了意义!
</Triggers>
</asp:UpdatePanel>

重要属性和事件:
ChildrenAsTriggers:当UpdateMode属性值为Conditional时,设定UpdatePanel中的子控件的异步请求服务器是否会引起UpdatePanel的更新。
RenderMode:表示UpdatePanel解释至前台HTML代码样式,默认值为Block即解释为<div></div>,当该属性设置为Inline时,UpdatePanel被解释为<span></span>
Triggers:设定触发当前UpdatePanel更新的控件和事件。(这个是重点)
UpdateMode:设定当前UpdatePancl的更新模式:Always和Conditional。当设定为Always时,UpdatePanel不管当前是否存在Trigger都会更新。当设定为Conditional时,只有当前UpdatePancl设定了Trigger或ChildTrigger时,当前UpdatePanel控件才会更新或提交页面,或者当服务器端调用Update()方法时才会更新UpdatePanel.
需要特别说明的属性和事件:
Trigger属性:指示当前UpdatePanel使用的提交服务器方式,有同步提交或异步提交两种。同步提交只需要指定触发提交的控件ID,同步提交将会提交整个页面。异步提交需要设定触发异步提交的控件ID和服务器端的事件。

页面中多个UpdatePanel共存:当页面上有多个UpdatePanel共存时,需要设定页面上所有的UpdatePanel控件的UpdateMode属性为Conditional,否则只要任何一个UpdatePanel局部更新被触发,将会更新所有页面上的UpdatePanel。原因很简单,页面上所有的UpdatePanel控件的UpdateMode默认为Always。

多个UpdatePanel的嵌套使用:当多个UpdatePanel控件嵌套使用时,处于并列的UpdatePanel更新时互不影响。但当两个UpdatePanel相互嵌套时,处于内层的UpdatePanel局部更新时并不会影响到处层的UpdatePanel,但是外层的UpdatePanel局部更新时会更新所有嵌套在它内部的UpdatePanel。

(4)顾名思义UpdateProgress执行的是页面局部刷新过程中的工作。UpdateProgress可以提供一个刷新过程中用户状态的友好信息,如向客户提示“正在加载数据”等。
UpdateProgress控件前台代码非常简单,如下所示:
复制代码 代码如下:

<asp:UpdateProgress runat="server" ID="upg1">
<ProgressTemplate> //模板

<div alige=”ecnter” style=”width:1100px”> //以下代码是显示的信息或图片部分
<img src=”image/loading.gif” align=middle />
</div>
</ProgressTemplate>
</asp:UpdateProgress>

重点属性:
AssociatedUpdatePanelID:设定触发UpdateProgress的UpdatePanel的ID,一般用于页面中具有多个UpdatePanel的情况。
DisplayAfter:进度信息显示多少毫秒数。
DynamicLayout:布尔值属性,设定当前UpdateProgress是否动态绘制,而不是直接解释在前台。


(5)在WinForm的开发中,很多程序员都被Timer控件的功能所倾倒。Timer控件可以定期的触发一些事件,比如提交整个页面或刷新部分页面等。
Timer控件的定义相当简单,只需声明控件即可,代码如下所示:
<asp:Timer runat="server" ID="timer1" Interval="1000" OnTick="timer1_Tick"></asp:Timer>
重点属性:
Enabled:是否启动Timer控件,并触发Tick事件。
Interval:Timer控件触发Tick事件的间隔事件,单位ms.
Tick:Timer控件在设定Enabled属性为true时,每隔Interval属性限定的时间执行事件。

提示:一般把Timer控件放置在UpdatePanel之处,不然局部更新时又会重新设置间隔时间。前台代码:
复制代码 代码如下:

<asp:ScriptManager ID=”ScriptManagel” runat=”server”></asp:ScriptManager>
<asp:Timer ID=”Timer1” runat=”server” onTick=”Timer1_Tick” Interval=”1000” >
</asp:Timer>
<asp:UpdatePanel runat="server" ID="udp1">
<ContentTemplate>
内容模板 放置内容的区域
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>

相关文章

  • 解决AJAX请求中含有数组的办法

    解决AJAX请求中含有数组的办法

    这篇文章主要给大家介绍了如何解决AJAX请求中含有数组的问题,文中给出了详细的示例代码,相信对大家的理解和学习很有帮助,有需要的朋友们下面跟着小编一起来看看吧。
    2016-12-12
  • AJAX验证数据库内容并将值显示在页面

    AJAX验证数据库内容并将值显示在页面

    光标离开文本框,在本页面的相应地方获取数据库中改值所对应的其他数据,相应的实现代码如下,感兴趣的朋友可以看看
    2014-08-08
  • ASP AJAX 静态分页

    ASP AJAX 静态分页

    这个页面注意是调用来自数据库中的数据。
    2009-01-01
  • ajax和jsonp跨域的原理本质详解

    ajax和jsonp跨域的原理本质详解

    跨域问题是我们在开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于ajax和jsonp跨域的原理本质,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • AJAXRequest v0.2

    AJAXRequest v0.2

    AJAXRequest v0.2...
    2006-12-12
  • ajax问题总结 比较全

    ajax问题总结 比较全

    在看文章前,先指定一个变量xhr,xhr代表ajax对象。测试浏览器:ie为ie6,firefox为2,其他的未测试。统称ie6为ie,firefox2为ff。
    2011-01-01
  • ajax实现输入提示效果

    ajax实现输入提示效果

    这篇文章主要为大家详细介绍了ajax实现输入提示效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • AJAX对服务器返回XML的处理方法

    AJAX对服务器返回XML的处理方法

    这篇文章主要介绍了AJAX对服务器返回XML的处理方法,实例分析了Ajax的实现技巧及针对XML返回数据的处理方法,需要的朋友可以参考下
    2015-03-03
  • Ajax获得站点文件内容实例不涉及服务器

    Ajax获得站点文件内容实例不涉及服务器

    选择一部著作,会通过 Ajax 实时获得相关的名字,一个简单的不涉及服务器的Ajax实例,需要的朋友可以参考下
    2014-05-05
  • Ajax Hacking

    Ajax Hacking

    [红色]Ajax Hacking...
    2006-11-11

最新评论