网络编程：第12章 ASP.NET AJAX

1第12章ASP.NETAJAX2本章要点：了解AJAX基础知识理解AJAX工作原理理解ASP.NETAJAX技术掌握ASP.NETAJAX服务器控件的用法3目录12.1AJAX基础12.1.1AJAX概述12.1.2ASP.NETAJAX技术12.2ASP.NETAJAX服务器控件12.2.1ScriptManager控件12.2.2UpdatePanel控件12.2.3Timer控件12.2.4UpdateProgress控件12.3ASP.NETAJAXControlToolkit12.4小结412.1AJAX基础AJAX是AsynchronousJavaScriptandXML的缩写(异步JavaScript和XML），是一种利用已经成熟的技术构建具有良好交互性的Web应用程序的好方法，它使得浏览器可以为用户提供更为自然的浏览体验。通常称AJAX页面为无刷新Web页面。ASP.NETAJAX是AJAX的Microsoft实现方式，对AJAX的使用以控件形式提供，提高了易用性。512.1.1AJAX概述AJAX技术将桌面应用程序具有的交互性应用于Web应用程序AJAX所用到的技术包括：文档对象模型DOM:通过JavaScript代码使用DOM处理HTML结构和服务器返回的XML。JavaScript代码:这是运行AJAXWeb应用程序的核心代码，帮助改进与服务器应用程序的通信。DHTML:通过使用<div>、<span>和其他动态HTML元素来动态更新表单。XMLHttpRequest对象:该对象允许浏览器与Web服务器通信，通过MSXMLActiveX组件可以在IE5.0以上的浏览器中使用。6同步与异步传统B/S模式（同步）同步：提交请求→等待服务器处理→处理完毕返回（这个期间客户端浏览器不能干任何事）同步是指发送方发出数据后，等接收方发回响应后才发下一个数据包的通讯方式。AJAX技术（异步）异步：请求通过事件触发→服务器处理（这时浏览器仍然可以作其他事情）→处理完毕。异步是指发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。传统Web应用（同步）请求信息请求信息果结理处端器务服果结理处端器务服服务器客户端浏览器用户浏览器发出请求浏览器接收结果服务器处理Ajax技术（异步）服务器客户端浏览器用户请求信息请求信息请求信息果结理处端器务服果结理处端器务服果结理处端器务服

XMLHttpRequest是Ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果。

9Ajax的主要内容及原理

Ajax实现的基本原理是，当用户与浏览器中的页面进行交互时，将触发页面元素对象的相应事件，客户端捕获这些事件后，如果需要将交互动作引起的逻辑实现提交给服务器进行处理，则将要处理的数据（包括状态描述）转换为XML格式的字符串，并使用异步传输方式提交给服务器。服务器处理结束后，同样使用XML格式和异步传输方式将处理结果送回。客户端从返回结果中提取需要的部分，交由JavaScript对网页进行“局部更新”，而不是刷新整个页面。10AJAX技术和传统Web应用程序比较1112.1.2ASP.NETAJAX技术ASP.NETAJAX是AJAX的Microsoft实现方式，专用于ASP.NET开发人员。使用ASP.NET中的AJAX功能，可以生成丰富的Web应用程序。与传统的Web应用程序相比，基于ASP.NETAJAX的Web应用程序具有以下优点：局部页刷新，即只刷新已发生更改的网页部分，通过异步模式，提升了用户体验。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了服务器负载。1212.1.2ASP.NETAJAX技术（续）ASP.NETAJAX功能框架组成：包含客户端脚本库和服务器端AJAXExtensions。两部分组合在一起提供了可靠的开发框架。客户端脚本库：包含一系列的JavaScript脚本，简化了开发人员创建AJAX窗体的复杂性。服务器端AJAXExtensions：包含ASP.NETAJAX服务器控件。13实例12-1认识ASP.NETAJAX本实例创建了一个AJAXWeb窗体，在窗体上既包含传统的控件，也包含ASP.NETAJAX控件。当单击“没有使用AJAX”按钮，则会刷新整个页面，两个标签的内容都会改变。如果单击“使用AJAX”按钮，则只刷新页面的部分区域，只有下面的标签内容会改变。源程序：FirstAjax.aspx

14程序说明事件处理程序btnNoAjax_Click和btnUseAjax_Click都回送服务器当前时间。不同的是前者将刷新整个网页，而后者只刷新lblUseAjax所在的UpdatePanel区。其中<ContentTemplate>子元素标识需要刷新的区域。1512.2ASP.NETAJAX服务器控件当把ASP.NETAJAX控件添加到ASP.NET网页上后，再浏览这些网页会自动将支持的客户端JavaScript脚本发送到浏览器以获取AJAX功能。16常用的ASP.NETAJAX服务器控件ScriptManager：管理客户端组件、局部页刷新、本地化、全球化和自定义用户脚本的脚本资源。如果使用UpdatePanel、UpdateProgress和Timer控件，就必须包含ScriptManager控件。UpdatePanel：实现刷新页的选定部分，而不是使用同步回发来刷新整个页面。17常用的ASP.NETAJAX服务器控件（续）UpdateProgress：提供有关UpdatePanel控件中的局部页刷新的状态信息。Timer：按定义的时间间隔执行回发。可以使用Timer控件来发送整个页面，或配合使用UpdatePanel控件以按定义的时间间隔执行局部页刷新。1812.2.1ScriptManager控件ASP.NET中AJAX功能的核心，管理一个页面上的所有ASP.NETAJAX资源。包括将MicrosoftAJAX库的JavaScript脚本下载到浏览器和协调通过使用控件UpdatePanel启用的局部页面刷新。每个实现AJAX功能的页面都需要添加一个且仅允许添加一个ScriptManager控件。语法格式如下：<asp:ScriptManagerID="ScriptManager1"runat="server"/>1912.2.1ScriptManager控件（续）如果仅在一个ASP.NET网页上添加了一个ScriptManager控件，而没有添加其它的ASP.NETAJAX服务器控件，则在浏览该网页时就会将MicrosoftAJAX库的JavaScript脚本下载到浏览器。属性EnablePartialRendering：确定了网页是否能实现局部页刷新功能。源程序：ScriptManager.aspx

2012.2.2UpdatePanel控件UpdatePanel控件是一个容器控件，该控件自身不会在页面上显示任何内容，主要作用是放置在其中的控件将具有局部刷新的功能。通过使用UpdatePanel控件，减少了整页回发时的屏幕闪烁并提高了网页交互性，改善了用户体验，同时也减少了在客户端和服务器之间传输的数据量。21

(1)UpdateMode属性：UpdateMode属性表示UpdatPanel控件的更新模式。

(2)ChildrenAsTrigger属性：该属性为一个bool值，用来说明UpdatePanel控件的子控件引起的回发是否能导致Update-Panel控件的更新。

(3)Triggers属性：表示可以导致UpdatePanel控件更新的触发器集合。Always：表示页面中任何一个控件引起的回发事件都会引起UpdatePanel控件内部区域所有控件的更新Conditional：只在特定的情况下才产生页面的回发，如执行UpdatePanel控件的update()方法或在指定的触发器的操作下。

1.UpdatePanel控件的常用属性

指示UpdatePanel内部控件引起的回发是否产生当前UpdatePanel控件的局部更新。如果UpdateMode设为Always的话，那ChildAsTrigger局性必须设为True，否则运行出错。

22使用UpdatePanel实现的条件更新UpdatePanel控件的UpdateMode属性默认为Always，表示页面中任何一个控件引起的回发事件都会引起UpdatePanel控件内部区域所有控件的更新（无条件更新）。若要求只有页面中某个或某几个控件的某个事件，才能引起Updatepanel区域更新（有条件更新），可设置Updatepanel控件的UpdateMode属性为Conditional，ChildrenAsTrigger为False，后利用UpdatePanel的Trigger属性，为其指定一个或多个触发器。条件更新实例23<asp:AsyncPostBackTrigger>元素定义触发器

<asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate>

……//添加需要刷新的控件

</ContentTemplate><Triggers><asp:AsyncPostBackTrigger

ControlID="Button1"EventName="Click"/></Triggers></asp:UpdatePanel>24使用外部按钮刷新UpdatePanel控件

外部按钮是指未包含在UpdatePanel控件内的按钮。若要在单击按钮时实现局部刷新功能，就需要在UpdatePanel控件的<Triggers>元素中进行触发器设置。25实例12-3使用外部按钮刷新UpdatePanel控件单击命令按钮时会引发页面往返，页面上的Label1控件将被刷新，而Button1控件不刷新。源程序：UpdatePanel2.aspx26程序说明为了避免不必要的数据回送，可以只将需要更新的控件放在UpdatePanel控件内部的<ContentTemplate>子元素中。而将引发回送事件的控件放在UpdatePanel控件外部。同时为UpdatePanel控件建立<Triggers>子元素标识的触发器。与实例12-2比较，本实例将返回一个较小的异步响应。2712.2.2UpdatePanel控件（续）可以放置多个UpdatePanel控件。每个UpdatePanel控件可以指定独立的页面区域，实现独立的局部刷新功能。实际使用时将需要局部刷新的控件放在UpdatePanel控件内部的<ContentTemplate>子元素中。28同一个页面使用多个UpdatePanel控件是否导致异步回发并刷新UpdatePanel控件将根据属性UpdateMode的值而定。值为Always，则每次执行回发时都会刷新控件UpdatePanel的内容。回发包括来自其他UpdatePanel控件所包含的控件的异步回发，也包括来自UpdatePanel控件未包含的控件的回发。29UpdateMode的值为Conditional

将属性ChildrenAsTriggers值设置为true并且UpdatePanel控件的子控件导致回发时。通过使用UpdatePanel控件的Triggers属性定义为触发器的控件导致回发时。在这种情况下，该控件显式触发UpdatePanel内容的刷新。30实例12-4同一个页面使用多个UpdatePanel控件

当单击命令按钮“刷新面板1”时会引发页面往返，页面上的Label1和Button1控件被刷新。当单击命令按钮“刷新面板2”时会引发页面往返，页面上的Label2控件被刷新。源程序：

MultiUpdatePanel.aspx

MultiUpdatePanel.aspx

MultiUpdatePanel.aspx3112.2.3Timer控件1.Timer控件的常用属性和事件(1)Interval属性Interval属性用于设置页面向服务器发送回传的，以毫秒为单位的时间间隔，默认值为60000毫秒。(2)Enable属性Enable属性与其他标准控件的Enable属性相同，用来决定Timer控件是否可用。(3)Tick事件Tick事件是Timer控件周期性触发的事件，写在该事件过程中的代码能被应用程序周期性的自动执行。2.使用Timer控件

实例