第十章实现Ajax技术.ppt

1、基于.net的Web程序设计,主讲人 任建平 电子与信息工程学院,第10章 实现Ajax技术,ASP.NET Ajax可以使在浏览器中的ASP.NET Web应用程序发挥出最佳的性能，并且在客户端用户也有很好的操作体验，而不需要去跟服务器端交互来更新页面。最初的ASP.NET Ajax 1.0在ASP.NET 2.0之上以一个单独安装的形式发布，供用户下载使用。 从.NET 3.5开始，所有这些特性都成为ASP.NET所内置的。这意味着在构建或部署应用时，不再需要额外下载和安装单独的ASP.NET Ajax安装文件。只需要在Visual Studio 2008中创建针对.NET 3.5的ASP

2、.NET应用程序或网站项目，Visual Studio 2008会自动在Web.config文件里添加适当的Ajax注册设置，而且核心ASP.NET Ajax服务器控件会出现在工具箱里。这些也是本章所要重点介绍，包括什么是Ajax，如何部署ASP.NET Ajax环境以及实现Ajax技术等等。,内容摘要,了解Ajax的含义及优势 熟悉ASP.NET Ajax环境配置方法 掌握ASP.NET Ajax基本控件的使用 掌握PasswordStrength控件的应用 掌握Rating控件的应用 掌握SlideShowExtender控件的应用 掌握CollapsiblePanel控件的应用 掌握Au

3、toCompleteExtender控件的应用,学习目标,ASP.NET AJAX是指基于Ajax技术的ASP.NET编程模型。Ajax是（Asynchronous JavaScript and XML）的缩写，是综合异步通信、 JavaScript 以及XML等多种网络技术的新的编程方式。如果从用户看到的实际产生的效果来看，也可以形象地称为无页面刷新。特点是： 在客户端发起异步请求，工作由服务器转到客户端 不对整页页面刷新； 减轻服务器的负担，“按需取数据”； 几乎已经成为Web开发标准技术 使Web中的界面与应用分离，也可以说是数据与呈现分离,10.1 ASP.NET Ajax,ASP.N

4、ET Ajax是Microsoft为在.NET环境中应用Ajax而开发框架的简称，最初的简称为Atlas。目前在最新版的.NET Framework 3.5中集成了ASP.NET Ajax框架，ASP.NET Ajax框架支持使用一组新的服务器控件和API进行以服务器为中心的Ajax开发。通过添加ScriptManager控件和UpdatePanel控件，可以让现有ASP.NET页面支持Ajax功能，这样更新页面时将无须整页刷新。,10.1 ASP.NET Ajax,2005年Microsoft公司在专业开发者大会上宣布在ASP.NET上实现Ajax功能(开发代号为“Atlas”)。2007年

5、1月，Microsoft公司正式推出适用于ASP.NET2.0的Ajax，并正式命名为ASP.NET Ajax Extensions和Microsoft Ajax Library。 Microsoft Ajax Library是客户端Javascript库，目的是让非ASP.NET开发环境也可以使用Microsoft Ajax提供的类库，同时也支持目前流行的大部分浏览器。 ASP.NET Ajax Extensions提供了与ASP.NET高度集成的服务器端功能，使得在ASP.NET2.0 Web中轻松地使用ASP.NET Ajax。,10.1.1 ASP.NET Ajax概述,在安装ASP.

6、NET 2.0的Ajax框架时需要单独下载并安装。而在ASP.NET 3.5中，ASP.NET Ajax会自动安装，这意味着在构建或部署应用时，不再需要下载和安装单独的ASP.NET Ajax安装文件。 当在Visual Studio 2008中创建针对.NET Framework 3.5的新ASP.NET应用或网站项目时，Visual Studio 2008会自动在web.config文件里添加适当的Ajax引用设置，而且核心ASP.NET Ajax服务器控件会出现在工具箱里。 最新随.NET Framework 3.5发布的ASP.NET Ajax版本比以前有很多的改进，包括：支持WebP

7、art与UpdatePanel一起使用，对基于WCF的JSON节点的支持，对在JavaScript中使用ASP.NET用户数据，角色和登录应用服务的支持，以及多个缺陷修补和性能改进。,10.1.2 部署ASP.NET Ajax环境,本节前面学习Ajax的概念、ASP.NET Ajax框架的组成部分，并将ASP.NET Ajax框架的服务器端控件集Ajax Control Toolkit添加到了在Visual Studio工具箱中。本节将讨论随ASP.NET 3.5内置Ajax控件的使用，即ASP.NET Ajax Extensions。,10.2 ASP.NET Ajax基本控件,Script

8、Manager控件是一脚本管理器，负责管理页面中需要的脚本库、Web Service、身份验证服务、个性化设置、页面错误处理等等所有相关脚本资源。在一个ASP.NET页面中只能包含一个ScriptManager控件，且它必须出现在任何Ajax控件之前。因此，在ASP.NET Ajax开发中ScriptManager控件很重要，也是ASP.NET Ajax的核心组成之一。,10.2.1 ScriptManager控件,该控件的完整语法定义代码如下所示，其中CompositeScript和RoleService模板是ASP.NET 3.5中新增的： ,10.2.1 ScriptManager控件,

9、ScriptManagerProxy与ScriptManager是两个非常相似的控件，ScriptManger控件有且只能在一个页面出现一次。但是一个ASP.NET页面通常是由很多不同的组件组成，例如用户控件、母版页面和内容页面等。 对于由这些不同组件组成的一个ASP.NET Ajax页面来说，其中的某个组件往往需要对整体ScriptManager进行访问，并在其中添加新的脚本或Web Service的引用。这时，就可以在需要添加新的脚本或WebService引用的组件中，添加一个ScriptManagerProxy控件。并在ScriptManagerProxy中添加该组件所需要的专有脚本或W

10、ebService。作为潜在ScriptManager的代理，在加载包含ScriptManagerProxy控件的组件时，ScriptManagerProxy控件会将其中定义的脚本或WebService引用添加到组合后页面中的ScriptManager中。,10.2.2 ScriptManagerProxy控件,ScriptManagerProxy控件的简单定义形式如下所示： ScriptManagerProxy控件同样提供了Scripts和Services属性，这些属性提供的功能基本上与ScriptManager的同名属性相同。通过访问这两个属性，即可对当前页面中的脚本引用以及WebServ

11、ice引用进行维护。使用中需要注意的是，在ScriptManagerProxy控件中只能添加新的脚本或WebService，而不能移除ScriptManager控件中已经添加了的脚本或WebService。,10.2.2 ScriptManagerProxy控件,UpdatePanel控件是ASP.NET Ajax中使用频率最高的控件，它可以用来创建丰富的、局部更新的Web应用程序。使用UpdatePanel控件可以大大减少客户端脚本的编写工作量。因为根本不需要编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以方面地实现页面的局部更

12、新。用户要想在已有Web页面或新建页面中加入局部更新内容也十分容易。,10.2.3 UpdatePanel控件,UpdatePanel控件语法 在页面中加入ScriptManager控件，并保证ScriptManager控件的EnablePartialRendering属性值为true。若设置EnablePartialRendering=false，那么下面所做的对页面部分更新的任何设置都不能实现。EnablePartialRendering的默认值是true，所以可以使用的默认形式如下所示： ,10.2.3 UpdatePanel控件,把UpdatePanel控件加到页面中。在中加入想要部分

13、更新的内容即可。该控件的简单定义形式如下： ,10.2.3 UpdatePanel控件,表 UpdatePanel控件的常用属性,例10-1/UpdatePanelExample1 例10-1/UpdatePanel 例10-1/localUpdatePanel,在母版页和内容页中实现局部更新,由于网页发送到客户端时，母版页和内容页的内容会合并在一起，因此只需要在母版页中放置一个ScriptManager控件，母版页和内容页就都可以使用UpdatePanel了。 注意： ScriptManager控件不能放到ContentPlaceHodler控件内，否则无法在模板页中使用UpdatePane

14、l控件。 例10-1/MasterPageUpdatePanel,UpdateProgress控件是ASP.NET Ajax核心框架中最简单的控件，用于当页面异步更新数据时，显示给用户友好的提示信息。该信息可以是文本信息，也可以是图片信息，用户可以根据自己的项目需要进行选择。该控件的简单定义形式如下： ,10.2.4 UpdateProgress控件,UpdateProgress控件的使用简单，在默认情况下，UpdageProgress控件将显示页面上所有的UpdatePanel控件更新的进度信息。在以前版本的UpdateProgress中，无法设置让UpdateProgress只显示某一个U

15、pdatePanel的更新，而在最新版本的UpdateProgress控件中提供了AssociatedUpdatePanelID属性，可以指定UpdateProgress控件显示哪一个UpdatePanel控件。UpdateProgress控件的属性不是很多，它的主要属性如表10-3所示：,10.2.4 UpdateProgress控件,表10-3 UpdateProgress控件的属性,10.2.4 UpdateProgress控件,在Web应用程序中常常要用到时间控制的功能，如在程序界面上显示当前时间，或者每隔多长时间触发一个事件等。为此在ASP.NET Ajax中提供了Timer控件，T

16、imer控件负责以固定的时间间隔向服务器发送同步或异步的请求。 通过它的Interval属性可以指定时间间隔，从而实现局部页面定时刷新、图片自动播放、广告自动显示和关闭以及超时自动退出等功能。,10.2.5 Timer控件,Timer控件语法 它经常和UpdatePanel控件结合起来使用以实现定时异步更新页面一部分的功能。它分两种情况使用，一种是该控件位于UpdatePanel控件的内部。具体格式如下： ,10.2.5 Timer控件,另一种是Timer控件位于UpdatePanel控件的外部，代码如下： ,10.2.5 Timer控件,Timer控件属性 Timer控件的常用属性与方法如表

17、10-4所示。 表10-4 Timer控件的属性,10.2.5 Timer控件,例TimerDemo 例ShowAdvertisement 例TimerRotateImage,Ajax也存在缺点： Ajax会使页面产生局部的刷新，在页面的返回按钮点击（返回上一个页面）的时候，会造成页面的失效。,ASP.NET AjaxControlToolkit简介,微软还提供了一个ASP.NET Ajax控件扩展包 AjaxControlToolkit。它是一个免费的、开源的Ajax服务器端控件包，其中包括了数十种Ajax扩展控件。 下载地址： VS2005:下载AjaxControlToolkit-NoSource.zip VS2008:下载AjaxControlToolkit-Framework3.5SP1-NoSource.zip 使用时，需将AjaxControlToolkit.dll添加到VS中。 具体使用方法可参考官方演示效果：,使用第三