1 / 24

实现 Ajax 技术

实现 Ajax 技术. 内容摘要. ASP.NET Ajax 可以使在浏览器中的 ASP.NET Web 应用程序发挥出最佳的性能，并且在客户端用户也有很好的操作体验，而不需要去跟服务器端交互来更新页面。最初的 ASP.NET Ajax 1.0 在 ASP.NET 2.0 之上以一个单独安装的形式发布，供用户下载使用。

della
Download Presentation

实现 Ajax 技术

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 实现Ajax技术

  2. 内容摘要 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.NET应用程序或网站项目，Visual Studio 2008会自动在Web.config文件里添加适当的Ajax注册设置，而且核心ASP.NET Ajax服务器控件会出现在工具箱里。这些也是本章所要重点介绍，包括什么是Ajax，如何部署ASP.NET Ajax环境以及实现Ajax技术等等。

  3. 学习目标 • 了解Ajax的含义及优势 • 熟悉ASP.NET Ajax环境配置方法 • 掌握ASP.NET Ajax基本控件的使用 • 掌握PasswordStrength控件的应用 • 掌握Rating控件的应用 • 掌握SlideShowExtender控件的应用 • 掌握CollapsiblePanel控件的应用 • 掌握AutoCompleteExtender控件的应用

  4. 10.1 ASP.NET Ajax ASP.NET Ajax是Microsoft为在.NET环境中应用Ajax而开发框架的简称，最初的简称为Atlas。目前在最新版的.NET Framework 3.5中集成了ASP.NET Ajax框架，ASP.NET Ajax框架支持使用一组新的服务器控件和API进行以服务器为中心的Ajax开发。通过添加ScriptManager控件和UpdatePanel控件，可以让现有ASP.NET页面支持Ajax功能，这样更新页面时将无须整页刷新。

  5. 10.1.1 ASP.NET Ajax概述 ASP.NET Ajax是Ajax框架的Microsoft实现方式，是一个以快速、方便地搭建新一代的强大、互动、个性化的、支持大多数浏览器的Ajax网页为目标的免费框架。他集成了Microsoft浏览器客户端脚本资源和ASP.NET服务器端方便的环境。 作为ASP.NET的一个扩展，他采用ASP.NET服务器端的开发环境。因此ASP.NET Ajax提供对于客户端脚本和强大的ASP.NET服务器端脚本的融合。使得开发人员能够更方便地创建绚丽、互动的Web应用程序界面。 除此之外，Ajax并不只局限于ASP.NET，开发人员同样可以只采用其强大的、适应于大多数浏览器的客户端脚本资源，建立客户端的程序。 ASP.NET Ajax框架的使用非常简单，只需要简单的拖拽几个控件到Web页面上，就可以使得Web页面具有精彩的新一代Ajax用户界面效果，同时大量地降低应用服务器层的资源消耗。

  6. 10.1.1 ASP.NET Ajax概述 • ASP.NET Ajax主要提供了如下的功能： • 服务器端框架允许ASP.NET Web页面响应部分页面的回调操作。 • ASP.NET服务器控件便于实现Ajax功能。 • HTTP处理程序允许ASP.NET Web服务在部分页面的回调操作中，使用JSON串行化功能与客户端代码通信。 • Web服务支持客户端代码访问ASP.NET应用程序服务，包括身份验证和个性化服务。 • 网站模板可用于创建支持ASP.NET Ajax的Web应用程序。 • 客户端的JavaScript库对JavaScript语法进行了许多改进，还提供了很多代码，来简化Ajax功能的实现。

  7. 10.1.1 ASP.NET Ajax概述 以上这些服务器控件和服务端的框架称为ASP.NET Extensions。ASP.NET Ajax的客户端部分称为Ajax Library。Ajax Library在使用时可以独立于服务端功能，甚至可以在非ASP.NET环境下使用，如ASP应用程序等。 ASP.NET Ajax主要的设计目标有两点：一是对现有的ASP.NET服务器端模型进行扩展，让其可以生成实现富客户端的JavaScript代码；二是为ASP.NET增加客户端编程模型，让纯粹的客户端编程变得更加简单。 这样，ASP.NET Ajax的特性就可以相应地分为服务器端和客户端两个部分，前者包含ASP.NET Ajax Extensions以及ASP.NET Ajax Control Toolkit，后者包含Microsoft Ajax Library。

  8. 10.1.2 部署ASP.NET Ajax环境 在安装ASP.NET 2.0的Ajax框架时需要单独下载并安装，此时的ASP.NET Ajax 1.0是在ASP.NET 2.0之后以扩展功能的形式发布。而在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版本比以前有很多的改进，包括：支持WebPart与UpdatePanel一起使用，对基于WCF的JSON节点的支持，对在JavaScript中使用ASP.NET用户数据，角色和登录应用服务的支持，以及多个缺陷修补和性能改进。

  9. 10.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. 10.2.1 ScriptManager控件 ScriptManager控件是一脚本管理器，负责管理页面中需要的脚本库、Web Service、身份验证服务、个性化设置、页面错误处理等等所有相关脚本资源。在一个ASP.NET页面中只能包含一个ScriptManager控件，且他必须出现在任何Ajax控件之前。因此，在ASP.NET Ajax开发中ScriptManager控件很重要，也是ASP.NET Ajax的核心组成之一。

  11. 10.2.1 ScriptManager控件 该控件的完整语法定义如代码如下所示，其中CompositeScript和RoleService模板是ASP.NET 3.5中新增的： <asp:ScriptManager ID="ScriptManager1" runat="server" > <AuthenticationService Path="" /> <ProfileServiceLoadProperties="" Path="" /> <Scripts> <asp:ScriptReference /> </Scripts> <Services> <asp:ServiceReference /> </Services> <CompositeScript Path="" ScriptMode="Auto"/> <RoleServiceLoadRoles="false" Path=""/> </asp:ScriptManager>

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

  13. 10.2.2 ScriptManagerProxy控件 ScriptManagerProxy控件的简单定义形式如下所示： <asp:ScriptManagerProxy id="ScriptManagerProxy1" runat="server"> <Services> <asp:ServiceReference Path="smpWebService.asmx " /> </Services> </asp:ScriptManagerProxy> ScriptManagerProxy控件同样提供了Scripts和Services属性，这些属性提供的功能基本上与ScriptManager的同名属性相同。通过访问这两个属性，即可对当前页面中的脚本引用以及WebService引用进行维护。使用中需要注意的是，在ScriptManagerProxy控件中只能添加新的脚本或WebService，而不能移除ScriptManager控件中已经添加了的脚本或WebService。

  14. 10.2.3 UpdatePanel控件 UpdatePanel控件是ASP.NET Ajax中使用频率最高的控件，他可以用来创建丰富的、局部更新的Web应用程序。使用UpdatePanel控件可以大大减少客户端脚本的编写工作量。因为根本不需要编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以方面地实现页面的局部更新。用户要想在已有Web页面或新建页面中加入局部更新内容也十分容易。

  15. 10.2.3 UpdatePanel控件 • UpdatePanel控件语法 • 在页面中加入ScriptManager控件，并保证ScriptManager控件的EnablePartialRendering属性值为true。若设置EnablePartialRendering=false，那么下面所做的对页面部分更新的任何设置都不能实现。EnablePartialRendering的默认值是true，所以可以使用的默认形式如下所示： • <asp:ScriptManager ID="ScriptManager1" runat="server"> • </asp:ScriptManager>

  16. 10.2.3 UpdatePanel控件 把UpdatePanel控件加到页面中。在<ContentTemplate></ContentTemplate>中加入想要部分更新的内容即可。该控件的简单定义形式如下： <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <!—此处加入局部更新的内容--> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger /> <asp:PostBackTrigger /> </Triggers> </asp:UpdatePanel>

  17. 10.2.4 UpdateProgress控件 UpdateProgress控件是ASP.NET Ajax核心框架中最简单的控件，用于当页面异步更新数据时，显示给用户友好的提示信息。该信息可以是文本信息，也可以是图片信息，用户可以根据自己的项目需要进行选择。该控件的简单定义形式如下： <asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <!--表示进度的信息--> </ProgressTemplate> </asp:UpdateProgress>

  18. 10.2.4 UpdateProgress控件 UpdateProgress控件的使用简单，在默认情况下，UpdageProgress控件将显示页面上所有的UpdatePanel控件更新的进度信息。在以前版本的UpdateProgress中，无法设置让UpdateProgress只显示某一个UpdatePanel的更新，而在最新版本的UpdateProgress控件中提供了AssociatedUpdatePanelID属性，可以指定UpdateProgress控件显示哪一个UpdatePanel控件。UpdateProgress控件的属性不是很多，他的主要属性如表10-3所示：

  19. 10.2.4 UpdateProgress控件 表10-3 UpdateProgress控件的属性

  20. 10.2.5 Timer控件 在Web应用程序中常常要用到时间控制的功能，如在程序界面上显示当前时间，或者每隔多长时间触发一个事件等。为此在ASP.NET Ajax中提供了Timer控件，Timer控件负责以固定的时间间隔向服务器发送同步或异步的请求。

  21. 10.2.5 Timer控件 • Timer控件语法 • 他经常和UpdatePanel控件结合起来使用以实现定时异步更新页面一部分的功能。另外，也可以使用这个控件定期PostBack整个页面。他分两种情况使用，一种是该控件位于UpdatePanel控件的内部。具体格式如下： • <asp:ScriptManager ID="ScriptManager2" runat="server" ></asp:ScriptManager> • <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> • <ContentTemplate> • <asp:Timer ID="Timer1" runat="server" Interval="10000" OnTick="Timer1_Tick"> • </asp:Timer> • </ContentTemplate> • </asp:UpdatePanel>

  22. 10.2.5 Timer控件 另一种是Timer控件位于UpdatePanel控件的外部，这种格式的代码如下： <asp:ScriptManagerID="ScriptManager1"runat="server"> </asp:ScriptManager> <asp:TimerID="Timer1"runat="server"Interval="10000"OnTick="Timer1_Tick"> </asp:Timer> <asp:UpdatePanelID=“UpdatePanel1”runat=“server”UpdateMode=“Conditional”> <Triggers> <asp:AsyncPostBackTriggerControlID="Timer1" EventName="Tick" /> </Triggers> <ContentTemplate> <!--显示内容--> </ContentTemplate> </asp:UpdatePanel>

  23. 10.2.5 Timer控件 这里需要说明的是，虽然Timer控件是一个服务器控件，而事实上他会在页面内嵌入一个JavaScript组件。此JavaScript组件会在Timer控件的Interval属性所设置的间隔时间到达时就从浏览器引发回送。用户可以利用服务器端程序代码来设置Timer控件的属性，而所做的设置会传递给JavaScript组件。

  24. 10.2.5 Timer控件 • Timer控件属性 • Timer控件的属性与方法也不是很多，如表10-4所示为该控件的重要属性及方法。 • 表10-4 Timer控件的属性

More Related