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

ajax技术是多种计算机技术的结晶，它的名称来自：asynchronism(异步)、javascript、and、xml这4个单词首字母，即异步javascript请求处理xml技术。简单的描述就是数据异步传输网页局部刷新的技术。ajax很流行，web程序设计中如果不应用ajax技术，可以说是不完善的设计。就好象黑白电视机与彩电一样，ajax就是后者，是一种技术更新的革命！
本人学习ajax时间并不长，仅10余天，不能说百分之百掌握，但也有所领悟。现在把自己的学习经过和体会写下来，与君共分享。
一、学习经过：
ajax技术的文章和书籍很多，视频也不少，可以说是近两年最热的技术。但大多书籍介绍的全而不细，或是重点不突出，给人一种云山雾罩的感觉！这其中不乏清华大学等知名教授写的书。本人就有此方面的亲身体会，我先是下载了传智播客ajax视频教程，看了几节就看不下去了，后来又买了一本ajax技术的书，很厚的一本60元人民币。也是天很热，耐心看了八天实在看不下去了，感觉ajax技术很深奥，无法真正领会，就放弃了，去登山、游泳、下海、和美眉聊天、游戏，过起较为靡烂的幸福生活。后来，天气凉爽了，闲暇之余又想起ajax这件事，于是就买来几瓶冰镇啤酒，几袋小食品，一袋瓜子，在家里边看边饮，好生自在！没有想到的是，这一看却是一通百通，ajax技术就这样在一天时间里掌握了，而且还有自己对ajax技术的独到领悟：ajax应用很简单，完全可以不用编码或少量编码。

二、学习体会及重点
学习应用的语言和工具软件：本人是自学c#语言的，所以开发环境是net框架下（asp.net），开发工具采用vs2008（vs2005也可以）。
学习重点：
ajax控件的安装，特别是ajax control toolkit部分的安装，详见我的博客日志，有较为详细的介绍，这里就不多说了，唯一提醒的是：vs2008和vs2005在ajax控件安装和使用上有点区别，但不大！
1、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>

2、ajax基本原理及案例代码
ajax技术：我的理解就是javascritp前后台参数传递的技术，这里参数可以是参数值或数据流。学习ajax基本原理，有助于对ajax扩展控件的应用，是不会缺少的一部分。
下面列举两个ajax最常用的方式，以便学习者体会ajax应用原理。如初学者对部分代码不能理解，可以查找相关命令及资料！
应用方式一：
在日常的asp.net ajax实现中，这种方式是最简单的、最常用的开发方式。这种方式典型的实现步骤如下所示：
创建xmlhttprequest对象，请求特定的ajax处理页面。
ajax处理页面在page_load事件中，接收xmlhttprequest对象的异步请求。
ajax处理页面根据请求内容，做出相应的回应，回应可以采用this.response.write或this.response.outputstream将响应文本或响应的xml document放入response对象的方式。
前台javascript脚本通过xmlhttprequest对象的responsetext或responsexml来接收服务器回应，并动态修改页面内容，从而实现ajax异步无刷新应用。

1