ASP.NET Atlas 为您期待已久的 AJAX 样式的网站提供支持
ASP.NET Atlas 为您期待已久的 AJAX 样式的网站提供支持
Matt Gibbs
本文基于 ASP.NET“Atlas”的预发布版本。文中包含的所有信息均有可能变更。
本文将介绍以下内容:
• |
ASP.NET“Atlas”简介 |
• |
Atlas 体系结构 |
• |
客户端和服务器控件 |
• |
Atlas 和 Web 服务 |
本文涉及以下技术:
• |
ASP.NET、Visual Studio 2005、Internet Explorer |
本页内容
什么是 Atlas? | |
Atlas 体系结构 | |
客户端脚本核心库 | |
客户端脚本控件和组件 | |
服务器控件 | |
Web 服务 | |
小结 |
2005 年 9 月,ASP.NET 小组发布了代号为“Atlas”的 ASP.NET 中新功能的第一个社区技术预览 (CTP)。Microsoft® .NET Framework 2.0 的这一功能扩展使开发人员能够同时利用浏览器和服务器功能,更轻松地创建丰富的、交互式网站。
Atlas 支持的这种类型的丰富开发统称为“AJAX”(异步 JavaScript 和 XML),这是一个较新的缩写词,代表了对某些现有技术的组合。现代浏览器包括 XMLHttpRequest 对象,可以从 JavaScript 使用此对象回调服务器。这使得页面无需刷新整页,即可对用户输入做出反应,并执行带外操作。虽然这一概念大体很简单,但 AJAX 库可以大大减轻编写与服务器通信及处理由 Web 服务所返回的 XML 的客户端 JavaScript 的繁重任务。
AJAX 尝试解决的这个一般性问题出在 HTTP 协议本身。HTTP 是浏览器用来与 Web 服务器通信以检索页面并从浏览器向服务器回发数据的标准。该协议是无状态的,即需由服务器上的代码负责在页面刷新之间保持用户输入。一直以来,典型的用户体验是整个页面被刷新,以将状态信息回送到服务器。然后在发回浏览器的 HTML 中恢复页面上的用户输入。
ASP.NET 替您管理此过程,它传送一个隐藏视图状态窗体字段。即使实际上仅页面上的某部分得到更新,也将传输整个页面的 HTML,并出现暂时空屏。在此刷新过程中,直到浏览器接收并呈现新视图之后,用户才能与页面交互。AJAX 通过使用 XMLHttpRequest 对象回调服务器以调用 Web 服务而无需刷新整个页面,改善了此体验。然后基于接收的 XML 直接在 JavaScript 中修改被更新的页面部分。用户可能甚至不会觉察到发生了页面更新,并可以继续读取页面或与页面交互,同时,带外工作在后台异步进行。
什么是 Atlas?
ASP.NET 的 Atlas 功能不仅是用于编写以客户端为中心的 Web 应用程序的另一个 AJAX 脚本库。Atlas 基于 .NET Framework 2.0 构造并为更好地利用客户端 JavaScript 和 XMLHttpRequest 对象新增了支持功能。它包括能够更轻松地丰富现有 ASP.NET 应用程序的基于服务器的功能,以及 Atlas 控件和服务所使用的客户端脚本库。图 1 中的体系结构图显示,Atlas 体系结构跨接客户端和服务器,并应被视为用于创建更丰富、响应更及时的跨浏览器 Web 应用程序的一组广泛的开发技术。
图 1 ASP.NET Atlas 体系结构
Atlas 支持的场合不限于通过异步 JavaScript 调用更新页面区域。您还将获得其他技术难以实现的更丰富的客户端体验。以一个围绕电影数据构建的 Web 应用程序为例。该应用程序也许需要允许用户搜索特定演员。显然,提供包括所有演员姓名的全面的下拉列表以便从中选择并不实际,因此应用程序很可能会将这一问题分解。可能会要求用户选择演员姓名的首字母。这样对服务器的请求可以提供一个稍稍易于管理的列表,但从用户体验角度来说,并不太好。应用程序可能向用户呈现一个文本框,以便输入演员的部分姓名。然后服务器至少可以有一些数据用来缩小搜索范围。情况有所改善,但仍然有待改进。而使用 Atlas 之后,您可以提供一个文本框,在用户键入时动态做出反应,以帮助缩小搜索范围,而无需等待浏览器刷新整个页面。图 2 显示可以如何使用 Atlas 添加自动完成行为,在用户键入时提供反馈。
图 2 筛选组合框
Atlas CTP 可从以下地址下载:atlas.asp.net。安装后,它将在 Microsoft Visual Web Developer™ 中添加附加的 C# 和 Visual Basic® .NET 网站模板。在 Visual Web Developer 中创建新的网站项目(单击“文件”->“新建”->“网站”)时,您将看到一个类似图 3 中所示的对话框。Atlas 网站包括 Microsoft.Web.Atlas.dll 和更新的 web.config 文件,该文件配置 Web 应用程序以使其能够使用基于 Atlas 的 ASP.NET 功能。在当前版本中,Microsoft.Web.Atlas.dll 被置于应用程序的 bin 目录中,作为本地程序集可用于整个应用程序范围内。
图 3 创建 Atlas 网站
基于 Atlas 的应用程序可通过将文件从开发计算机复制到装有 ASP.NET 2.0 的服务器而轻松部署,无需担心单独安装 Atlas。安装是在应用程序级别而不是在计算机级别进行。在推出后续 CTP 版本后,这些程序可以在安装早期版本的 Atlas 的计算机上使用,即使功能已经得到发展和更改。与系统范围的安装相比,这为迁移到更新版本提供了更多灵活性。
Atlas 体系结构
首先要注意的是图 1 中所示的 Atlas 体系结构跨越了客户端和服务器。虽然 ASP.NET 2.0 中添加了一些附加的客户端功能,但程度不如 Atlas。在体系结构图右侧,请注意 Atlas 服务器功能是构建在 ASP.NET 2.0 之上并对其功能进行了扩展。Atlas 包括一组新的服务器控件以及新增功能,旨在从浏览器访问基于服务器的数据和服务。
在左侧您将看到全面的客户端脚本库,您可以在编写以客户端为中心的 JavaScript 的过程中,独立于服务器功能而使用该库。Atlas 新功能大量使用基于客户端这一特性来支持通过改进的客户端-服务器交互来开发更丰富的应用程序。
在图 4 中您可以看到 Web 应用程序中的典型客户端-服务器交互。首先,通过浏览器请求页面,然后用户与其交互。当用户的某些操作需要从服务器获取数据时,将发生完整的页面刷新,根据用户输入更新页的部分。遗憾的是,此行为不允许用户继续与页面交互。而用户在使用 Web 应用程序时必须不断暂停。
图 4 典型客户端-服务器交互
图 5 显示使用 Atlas 的客户端-服务器交互不需要完整的页面刷新。而是首先初始检索 HTML,随后调用服务器获取 XML、JavaScript Object Notation (JSON)、或 HTML 代码段形式的更新数据,以增量方式更新页面。后台异步调用在调用 Web 服务或检索页面更改时,不会使用户察觉必须暂停。这些异步调用为后续服务器回发管理更新的视图状态信息,以便必须进行完整的页面刷新时,可将准确的页面状态传送到服务器。
图 5 Atlas 客户端-服务器交互返回目录
客户端脚本核心库
Atlas 客户端脚本库被作为多个不同的片段提供到浏览器。脚本核心包括底层,库的其余部分在底层的基础上构建。底层是浏览器的兼容层。Atlas 的一个关键功能就是它将运行在支持 AJAX 关键元素的流行浏览器上。在 CTP 版本中,此支持已包括 Mozilla Firefox、Apple Safari 和 Microsoft Internet Explorer®。浏览器兼容层是一个抽象层,通过它您可以放心编写脚本。而无需斟酌各浏览器实现之间的差异细节。通过它,当浏览器发展及发布新的版本时,还可以轻松扩展 Atlas 支持。发出请求的此类浏览器自动确定使用哪些浏览器特定的兼容层部分。更高级别的代码已写入抽象层中,因此您无需编写代码处理浏览器实现中的各种变化。
在兼容层之上是核心类型系统。此类型系统允许进行面向对象方式的 JavaScript 开发。它使运用 JavaScript 的开发人员能够创建命名空间并在其中添加类。它还模拟对象继承。它支持接口、委托和枚举,从而可以在开发服务器端代码(使用面向对象的编程语言,如 C#)与编写客户端 JavaScript 代码之间更轻松进行切换。
基类库层构建在类型系统之上,加上该层,就构成了整个客户端脚本库核心。此概念借自 .NET Framework,并提供了一些熟悉的类型。其中有一个 Event 对象,它在 JavaScript 中以自然方式支持事件的多播。还有一个 StringBuilder 对象。另外还支持对象序列化,其中包括对 JSON 和 XML 数据的支持。基类库还包括 WebRequest 和 WebResponse 类,它们提供对浏览器的 XMLHttpRequest 对象的抽象,这一点类似于 .NET Framework 中的 System.Net 命名空间。图 6 中所示代码演示如何使用 Atlas 脚本核心在 JavaScript 中创建两个简单类型。首先创建的是 Movie 类型,它提供电影标题和流派属性,以及一个 toString 方法。然后通过 Drama 类型扩展 Movie 类型并重写 toString 方法。
使用 Movie 和 Drama 类型的页面如图 7 所示。它首先引用 .js 文件,其中,类型在 Atlas ScriptManager 控件内定义。然后在 Click 处理程序中,页面创建了 Movie 类型和 Drama 类型的实例,并调用其 toString 方法。您可能会预期像在任何面向对象的编程语言中一样看到继承行为,但正在运行的这段代码恰好是动态 JavaScript。当前 Atlas 安装的另一优点是包含了客户端脚本库的调试版本,这使得调试和故障排除更加轻松。调试 JavaScript 始终是一件麻烦的事,这样可能会轻松一些。
客户端脚本控件和组件
在构成 Atlas 体系结构客户端脚本核心的各层之上是组件模型和控件层。脚本库的此部分基于其下的脚本核心构造,但是单独向客户端呈现。编写脚本时,您可以选择不包括组件层而仅直接使用 JavaScript 类型系统和基类库,但您没有访问 Atlas 提供的客户端组件的权限,且不能使用 xml 脚本,它是一组新的声明性元素,包括在发送至浏览器的页面标记中。xml-script 元素包括在使用以下新类型值的脚本标记中:
<script type="text/xml-script">
支持在标记中添加一组附加元素的关键是使用脚本标记。浏览器可识别脚本元素,但无法处理 text/xml-script 类型。而 Atlas 脚本库能够处理包含在脚本标记本身中的元素。标记由客户端脚本库的组件层处理。xml 脚本在客户端进行分析,以创建组件和控件的实例。它可以包含它所定义的组件和控件的属性设置,并可以声明它们与页面上其他 HTML 元素之间的绑定。xml 脚本元素还可以声明 Web 服务资源,然后在标记内其他各处将其作为数据源进行引用。图 8 中的示例页显示如何使用 xml 脚本以声明方式确定当鼠标指针悬停在年份上时,与年份关联的片名将以弹出式元素的方式显示。
图 8 中的页面包含一个显示年的 DIV 元素以及一个显示片名的 SPAN 元素,但该元素被声明为隐藏。在该 xml 脚本中,一个 popupBehavior 与片名关联,并由与年关联的 hoverBehavior 调用。popupBehavior 的代码包括在 Atlas 脚本库的组件和控件层中。与盯着通常包含在页面中的 JavaScript 相比,检查 xml 脚本更为容易,特别是当您开始调整代码以处理多个浏览器实现时。类似于图 8 中的 xml 脚本的声明性语法可以由开发工具轻松产生和使用。通过使用 Atlas 服务器控件产生 xml 脚本,在页面执行时能够产生更丰富的用户体验。在 Atlas 应用程序中使用的大多数 xml 脚本绝对不会直接在 .aspx 文件中存在,大多数的开发人员也不必手动对它进行编码。
作为 Atlas CTP 组成部分的各种行为均以改善用户体验为宗旨。进度行为可以提供某一操作正在后台等待处理的信息。单击、悬停和弹出行为可以丰富用户交互。使用 xml 脚本,可以通过声明方式轻松将行为附加到在页面上的 HTML 元素。因为行为本身是以 JavaScript 实现的,所以有可能实现更加复杂的行为,但其在各页面间的使用可以通过 xml 脚本。
服务器控件
通过 Atlas CTP 中所包含的服务器控件,可以轻松避免页面回发过程中伴随出现的暂停。当控件在后台更新其呈现时,用户可以继续与页面交互。为实现这一目的,两个服务器控件协同工作。可以将其添加到现有页面以大幅改善效果。ScriptManager 控件修改客户端回发行为,而 UpdatePanel 控件管理服务器上的页面生命周期,以此来实现这种改变。
所有使用 Atlas 功能的页面必须包括 ScriptManager 控件。它负责协调将哪个 JavaScript 发送到客户端。服务器控件可以为客户端提供 JavaScript,并利用 ScriptManager 控件来处理该脚本。ScriptManager 控件将利用该控件实现的新的 IScriptComponent 接口。ScriptManager 控件还提供对与 xml 脚本元素关联的组件脚本库的支持。
将 ScriptManager 控件的 EnablePartialRendering 属性设置为 true 将导致来自客户端的回发出现以下新的行为:
<atlas:ScriptManager EnablePartialRendering="true" runat="server" />
回发行为被修改,以便在不中断用户体验的情况下允许发生请求。对于部分呈现的请求,需维护为在各请求之间保持控件信息所需的视图状态信息。正在刷新或修改的区域的 HTML 代码将通过 JavaScript 与浏览器文档对象模型 (DOM) 的交互而更新。页面上应允许部分更新的区域将在 ASP.NET 页面中通过 UpdatePanel 控件来指定。
UpdatePanel 控件向 ScriptManager 控件指示在页面上哪些区域应单独更新。当浏览器中的操作导致产生该页面区域的回发时,将发送窗体数据并且在服务器上开始执行该页面的生命周期。因为脚本是在后台异步启动回发,因此仍然向用户显示该页面。在服务器上,将从客户端发送来的视图状态数据恢复控件状态。呈现阶段发生时,ScriptManager 控件将隔离 UpdatePanel 区域的呈现,因为该区域的呈现正在被回送到浏览器。系统还将收集页面的视图状态数据,并作为响应的一部分伴随 HTML 一起发送。然后浏览器中的脚本将用新的 HTML 替代与 UpdatePanel 内容的先前呈现对应的 HTML。
UpdatePanel 控件可以包含 Triggers 和 ContentTemplate 的元素:
<atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <Triggers> ... </Triggers> <ContentTemplate> ... </ContentTemplate> </atlas:UpdatePanel>
ContentTemplate 内的区域在 ScriptManager 控件管理异步回发时刷新。Triggers 元素可以包含 ControlEventTrigger 和 ControlValueTrigger 元素。使用 Triggers 元素,页面开发人员可以指定应导致区域更新的特定更改。这允许 UpdatePanel 控件之外的其他控件无需直接包含在 UpdatePanel 控件之内,即可导致更改。它还允许使用简单的声明来控制页面和 UpdatePanel 控件的行为,并指示何时检索新数据。
在一个页面上可放置多个 UpdatePanel 控件,并通过不同的触发器来导致它们单独更新。UpdatePanel 控件的内容可以控制在响应特定用户输入所必需的最低范围内。使用 UpdatePanel 控件,现有 ASP.NET 页面无需大量更改,即可使用户感到响应更及时。
Web 服务
Web 应用程序是围绕面向服务的体系结构构建的。支持交互式应用程序的核心是支持从浏览器访问服务。Atlas 支持两种不同类型的服务。ScriptManager 控件将使用自动生成的代理供 Web 服务引用:
<atlas:ScriptManager EnablePartialRendering="true" runat="server"> <Services> <atlas:ServiceReference GenerateProxy="true" Path="~/nominees.aspx" Type="Custom" </Services> </atlas:ScriptManager>
然后客户端组件可以直接从脚本调用 Web 服务。Web 服务被绑定到控件以支持更丰富的行为。例如,可在 xml 脚本中将 AutoCompleteBehavior 定义为使用 Web 服务检索相关可能性(请参阅图 9)。
行为被附加到页面上某一元素并增强其行为。此行为在 .aspx 标记中建立之后,即被称作“扩展器”。AutoCompleteBehavior 可以通过使用 AutoCompleteExtender 控件与元素关联。扩展器无需直接编写 xml 脚本,即可与服务器上的控件关联。然后控件行为将通过呈现适当的 xml 脚本以获取客户端行为而得到扩展。调用 Web 服务时,调用以及返回结果通常均以 XML 格式传递。Atlas 还支持以 JSON 形式序列化来自 Web 服务的数据,这消除了 XML 中的某些内在的开销。JSON 数据可以在浏览器中直接反序列化成 JavaScript 对象。Atlas 支持将服务器中由 .NET 管理的更为复杂的类型序列化成浏览器中典型的 JavaScript 对象。这简化了从浏览器访问 Web 服务的任务。
从浏览器使用 Web 服务的想法从作为应用程序一部分的自定义 Web 服务,延伸到了 ASP.NET 应用程序服务。Atlas 提供直接从 JavaScript 使用窗体身份验证服务的功能:
Sys.Services.AuthenticationService.login( username, password, completionFunction);
用户不必重定向到登录页面,然后再返回原始页面;于是可以在用户提供登录凭据时动态修改 HTML。.aspx 页面中可用的配置文件数据也可以通过 Web 服务调用获取。它支持通过 JavaScript 对象存储和检索存储在服务器上的配置文件数据。
应用程序可能使用的 Web 服务始终位于同一主机服务器上。实际上,它们甚至不必在同一个域内。浏览器将阻止使用 XmlHttpRequest 调用到页面所在的域之外的其他域。存在一些巧妙的方式来绕过此限制,即通过使用隐藏 IFrame 对象来启动子请求,但仍然麻烦。Atlas 提供了 Web 服务桥接功能来支持此应用场合。客户端可以启动一个 Web 服务调用,而目标在另一个域。调用被发送至源起 Atlas 应用程序,然后后者代理用户请求目标服务器,再将结果序列化并返回客户端。Atlas 还能够使用 IFrame 技术直接与其他域通信。
小结
Atlas 提供一组功能,可用于创建更丰富的 Web 应用程序。客户端脚本库简化了编写 JavaScript 的任务,并提供构造代码以使用面向对象的方法编写 JavaScript。使用 Web 服务功能,可轻松访问远程和本地服务。复杂类型的序列化使从客户端和服务器利用丰富类型变得轻松。服务器控件利用客户端脚本库并允许现有的和新的应用程序大大降低目前 Web 应用程序中常见的服务遇忙暂停的发生。
现在,每隔 1 个月就会发布新的 CTP 版本,其中包括修复、更改和新增功能。Atlas 最终会在 Visual Studio 中将这些集成到下一版本的 .NET Framework(带设计时支持)。最近,Microsoft 已宣布推出有限许可,允许用户在实际站点上部署 Atlas,并开始在 Web 应用程序中利用 Atlas。有关详细信息及下载最新 Atlas CTP,请访问 atlas.asp.net。
Matt Gibbs 是 Microsoft 的 ASP.NET 小组开发经理。Matt Gibbs 与他人合著有多本有关 ASP、移动控件和 ASP.NET. 的著作。他的联系方式为:mattgi@microsoft.com。
本文摘自 2006 年 7 月发行的《MSDN Magazine》。