ASP.NET AJAX 首部曲－迈向解密之路

作者：章立民研究室

目的：简述ASP.NET AJAX以及其在实作上的便利性

版本：ASP.NET AJAX 1.0 Beta 2

出处：本文节录自章立民研究室正在撰写的「ASP.NET AJAX大解密」一书

网页程序开发人员发对于 JavaScript、CSS（Cascading Style Sheets，阶层式样式表）、DOM（Document Object Model，文件对象模型）、DHTML（Dynamic HTML）与X ML 等技术肯定不会感到陌生。所谓的 AJAX（Asynchronous JavaScript And XML）其实就是上述这些技术综合之后的强化体，从英文字意可以了解，AJAX 技术就是非同步的JavaScript与XML，它打破了传统网页开发技术的藩篱，使得网页更具互动性，也顺势开启 Web 2.0 时代之门。

在过去，即使只是网页中极小部分的内容需要更新，也必须将整个网页传送给Web服务器来处理，处理完毕之后还必须再将整个网页的内容传送回客户端，这样不分青红皂白地大堆头式处理，自然效率低落，响应时间更是不佳。然而 AJAX 的重要与进化之处在于，它只会将网页中需要更新的部分以异步方式传送给Web服务器来处理，然后将处理后的内容传送回客户端浏览器来进行局部更新，由于只需要传送并处理少量的资料，而不是将整个网页内容重新加载浏览器中，自然在效率上大幅提升。这样的作法，扎扎实实地提升了网页的互动性、响应速度与便利性，使得网页接口的使用经验大幅跃进，更贴近于Windows Form应用程序。

目前的浏览器大部分都允许客户端通过 XMLHTTPRequest 对象与服务器之间进行异步沟通，以及传送与接收XML数据，更重要的是，不需要完全的回传（Postback）与往返就可以进行网页的局部更新。毫无疑问的，AJAX 网页是一种以客户端为主的网页，亦即它会尽可能将合适的作业摆在客户端计算机的浏览器中处理。然而问题在于，要建置 AJAX 类型的 Web 应用程序并非易事，原因是您除了需要撰写大量的 JavaScript 程序代码，还必须非常了解 DOM、DHTML与XML，偏偏不同浏览器所支持的 DOM 与 DHTML 版本又有所不同，这使得跨浏览器的兼容性变成一道难以克服的问题。再者，JavaScript 并不像 .NET Framework 一样支持完整的对象导向与类型安全等特性，更没有一个整合式的开发环境。另外呢，某些 AJAX 网页的功能性在实作上有高度的困难度，除非您真的非常精通 JavaScript，否则我看也只能在旁边暗自叹息。这些原因，都大大加高了 AJAX 应用程序的进入门坎。

其实我常说，知道 AJAX 的技术概念是一回事，实作 AJAX 网页又是一回事。当然，微软公司也深知个中的问题，然而将一项开发议题简化并实用化向来也是微软公司所擅长的。为了协助开发人员能够轻松建立出 AJAX 类型的网页应用程序，微软公司特别推出了 ASP.NET AJAX（目前仍处于 Beta 阶段）。ASP.NET AJAX 是一个全新的网页开发技术，它将全新的客户端指令码函式库与 ASP.NET 2.0 既有的服务器端架构整合在一起。ASP.NET AJAX所提供的客户端网页开发平台与 ASP.NET 2.0 的服务器端网页开发平台是完全相同的。事实上，ASP.NET AJAX 是 ASP.NET 2.0 的扩充，因此完全整合了服务器端开发工具、功能、与服务，此意味着，您无须重新学习任何的语言，便可在 Visual Studio 2005 中开发 AJAX 网页应用程序。借助于 ASP.NET AJAX，您可以将应用程序的主要处理作业移转到客户端来执行，在此同时还能够以背景作业方式与服务器端进行沟通。如此一来，您便可开发出具有丰富操作接口、快速响应、不中断操作的 ASP.NET 网页程序。

图表1

如图表 1 所示，ASP.NET AJAX 的架构横跨了客户端与服务器端，非常适合用来建立操作方式更便利、反应更快速的跨浏览器网页应用程序。

在客户端开发方面，ASP.NET AJAX 提供了一组客户端专用的 JavaScript 函式库。这些客户端函式库是由许多的 JavaScript（.js）文件所组成，它们构成了一个对象导向类别库，让开发人员更容易去建立拥有丰富用户接口并且能够跨浏览器运作的 AJAX 应用程序。

ASP.NET AJAX 不仅仅协助您更容易建立客户端指令码，它还提供了可以和 ASP.NET AJAX 客户端指令码相互整合的服务器端组件、服务、以及控件。

一个网页要能够使用 ASP.NET AJAX 的功能性，则它务必存取客户端函式库。欲达此目的非常简单，您只需将 ASP.NET AJAX 的 ScriptManager 控件新增至网页上即可。事实上，任何一个具备 ASP.NET AJAX 功能性的网页必须至少拥有一个（而且也只能拥有一个）ScriptManager 控件。在预设状态下，ScriptManager 控件会引用主要的 .js 文件。其实这就是 ASP.NET AJAX 最基本且常用的开发模式，因为在引用了主要的 .js文件之后，您就可以使用 ASP.NET AJAX 客户端组件、控件、以及宣告式语法。

实作 ASP.NET AJAX 网页的第一步就是使其具备异步局部更新功能。也就是说，以异步方式将网页中需要更新的部分传送给Web服务器来处理，然后将处理后的内容传送回客户端浏览器来进行局部更新。要让您的网页具备异步局部更新功能非常简单，首先，请替网页加入一个 ScriptManager 控件。加入了 ScriptManager 控件之后，您还必须替网页加入一或多个 UpdatePanel 控件以便指定局部更新的范围。

或许这样说，大家还不是非常了解什么是异步局部更新。在此，我们将先举两个网页范例来加以比较。

图表2

图表 2 所示者是网页范例 CH3_DemoForm001.aspx 的执行画面，这是一个非常典型的 ASP.NET 2.0 网页，其功能特性重点说明如下：

使用 GridView 控件来显示员工数据，而且每一次显示5笔数据记录。

在预设状态下，本网页会列示出所有员工的数据记录，不过您可以从「以部门别来查询」下拉式清单方块中选取特定的部门，并按下「开始」按钮，即会进行筛选并只显示出该部门的员工资料。

按一下已标示底线的数据行标题（例如：姓名），员工数据将会根据该字段进行排序。

如果您要检视某位员工的详细数据，只需按一下「查询详细数据」数据行中的「查」按钮即会开启「员工个人详细基本资料」页面。

本网页范例最大的缺点，就是当我们在“员工基本一览”页面中，按一下数据行标题、换页按钮、或是选取某一个部门来筛选数据时，都会造成浏览器重新整理而使得画面出现闪烁的状况，而且浏览器下方也会出现网页的读取进度状态。之所以如此，是因为整个网页必须回传（Postback）给服务器并将服务器所传回的结果重新加载至浏览器中。

事实上，ASP.NET 2.0 本身所提供的回呼（Callback）技术就能够让控件在更新其所内含的数据时，不会回传至服务器，也就是说，用户不会看到浏览器下方的网页读取进度状态，正因为不需要与服务器进行同步沟通，此举将会加快数据下载速度。以本网页范例而言，您可以如图表 3 所示，将 GridView 控件的 EnableSortingAndPagingCallbacks 属性设定成 True 并且将 DropDownList 控件的 AutoPostBack 属性设定成 True，以便让浏览器不会因为换页、排序、或选取部门时而回传至服务器，造成网页重新整理、画面闪烁。

遗憾的是，此一回呼的作法无法适用于本网页范例，原因在于，我们在 GridView 控件中使用一个 HTML 索引卷标的客户端 Image控件来显示性别字段图标，如果将GridView控件的EnableSortingAndPagingCallbacks 属性设定成 True，则于执行网页时，性别字段的图示将无法被更新，并且会引发错误讯息（如图表 4 所示）。对此一网页范例而言，如果希望按一下数据行标题、换页按钮、以及选取部门来筛选时都不会发生浏览器画面闪烁的重新整理状况的话，最佳的作法，就是替其加入 ASP.NET AJAX 的异步局部更新功能。