1.2 AJAX的开发人员观点

http://book.51cto.com 2007-07-31 13:04 章立民机械工业出版社我要评论(0)

摘要：本书详细介绍了AJAX在Web开发上的应用。主要内容包括：ASP.NET AJAX技术概述、实现异步局部更新页面、UpdatePanel编程功能、PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合OOP功能、如何在客户端JavaScript调用Web服务、如何从客户端JavaScript调用ASP.NET应用服务以及如何创建客户端功能的组件等。本文是AJAX的开发人员观点介绍.
标签：ASP.NET .NET AJAX 《ASP.NET AJAX Web 应用开发秘诀（VB版）》

1.2 AJAX的开发人员观点
对开发者而言，又应该如何看待AJAX呢？基本上，AJAX所代表的意义是多元化的，是多个层面的。您可以将AJAX视为一种技术，将AJAX视为一种概念，也可以将AJAX视为一种架构。
如前所述，AJAX这个名词是Asynchronous JavaScript And XML的缩写，它是由美国知名用户经验顾问公司Adaptive Path的Jesse James Garrett于2005年2月在《AJAX：A New Approach to Web Applications》一文中首先提出的。他指出，即便目前很多新项目采用创新的技术来发展富客户端（Rich Client），但是页面程序开发人员仍然认为那些新技术对他们来说是遥不可及的梦，毕竟，受限于页面独特的无状态特性，Web服务器无法保存用户与联机的状态，造成页面开发人员必须使用Cookie或隐藏的窗体字段（Hidden Form Field）等技巧来解决状态信息不足的窘境，因此要将页面开发成如同传统应用程序那样具有丰富的操作界面，实在是难上加难。因此导致页面应用程序始终被认为是瘦客户端（Thin Client）架构，而难以跟传统应用程序相抗衡。AJAX的出现，终于大大拉进了页面应用程序与传统应用程序的鸿沟，让页面应用程序也变成富客户端。
附注：也有人将Rich Client称为Client-Centric，而将Thin Client称为Server-Centric。
就AJAX的英文原意来说，它表示浏览器与Web服务器之间是以异步方式进行沟通，并且同时传送与接收XML。因此从技术角度来看，只要是使用下列技术所开发的页面程序，都可视为是AJAX的实现成果（如图1-6所示）：

图1-6

使用符合W3C规范的CSS与XHTML来定义页面外观。
使用浏览器的DOM以及DHTML技术来呈现动态内容与分层内容，并与用户产生互动。
使用XML来进行数据交换，并使用XSLT来转换XML格式的数据。
使用XMLHttpRequest或XMLHTTP（微软Internet Explorer浏览器特有的ActiveX对象）这组API来接收异步数据。
AJAX之所以能改善用户操作体验，正因为它是使用JavaScript与XMLHttpRequest（或XMLHTTP）对象来解析与处理Web服务器所传送的页面内容与XML格式文件，所以用户并不会感觉到页面更新所造成的画面闪烁，而且当浏览器与Web服务器在后台异步进行沟通之际，用户仍可继续浏览页面并与页面进行互动。
JavaScript与微软Internet Explorer浏览器特有的Jscript是遵循ECMAScript标准实现出来的技术，通过这项技术将页面中的所有对象串联起来，进而控制这些对象，并在浏览器上呈现最终的结果。
附注：欲阅读“Ajax：A New Approach to Web Applications”的原文，请访问网站：http://www.adaptivepath.com/publications/ essays/archives/ 000385.php
由此可知，AJAX并不是某家厂商的专利，也不是某家厂商所专有的对象、组件或产品，凡是通过上述技术所实现出来的页面程序，都可以视为是AJAX的概念验证（Proof of Concept，POC）结果。举例来说，有不少网站提供电子地图服务，包括微软（Microsoftǎ┑腤indows Live Local（http://local.live.com，如图1-7所示）、谷歌（GoogleTM）的Google Maps（http://maps. google.com）。

图 1-7

我们之所以说AJAX是一种架构，是因为我们可以自行创建所需的页面应用程序，而无需如同建构传统页面般，要经过下列步骤（如图1-8所示）：

图1-8

1. 针对页面应用程序中的每一个事件，分别定义其相对应的页面。比方说，欲使用电子地图，需要设计登录系统、搜索地标、移动地图、打印地图等页面。
2. 当用户单击某个按钮、触发某个事件时，浏览器会将这个事件返回Web服务器来处理，然后Web服务器再把处理后的页面内容整个传送给浏览器。
3. 浏览器解析页面内容，接着重现最终的结果。
打开浏览器、造访网站、浏览页面、单击超级链接……，这些浏览页面的步骤是多么的理所当然。不过这都是传统页面的做法，况且，页面就是页面，无法与传统的Windows Form应用程序相抗衡。说穿了，所有的页面不过就是一份文件，只是这份文件允许我们通过它特有的超级链接方式来让文件与文件之间产生关系，但是对操作者而言，完全感受不到页面提供了任何互动功能。
回想使用Windows Form的应用程序，每进行一个操作，程序画面丝毫不拖泥带水，马上显示操作结果，不觉得程序画面会闪烁。直到AJAX问世，我们终于看到一道曙光从天而降，改变了页面程序的设计理念。这些改变包括：
以客户端事件为主
页面中的应用程序只需将少量的页面请求（Request）发送给Web服务器即可取得某些信息，此举将有效减少网络数据传输量，并通过DOM技术来更改页面中的数据，整个页面并不需要刷新（Refresh），便可看到更新后的结果。
异步
当页面请求发送给Web服务器时，还可以控制浏览器。比方说，用户依然可以继续拖拽地图，而当一块一块的图片以异步方式被加载完成之后，就会组成一张完整的地图。
控制任何对象
现今的浏览器与操作系统一样，可以捕捉（Trap）到大多数的用户事件，此事件会以异步方式向Web服务器提出请求，进而与Web服务器产生互动。比方说，捕捉鼠标移过对象（Mouseover）、点击鼠标按键（Mouse Clicks）、键盘按键（Keypress）……等事件。
如图1-9所示，一个AJAX页面的生命周期是由下列流程所构成：
1. 用户对某个网址（URL）提出浏览请求。
2. 服务器将HTML页面内容传送给浏览器。
3. 浏览器根据所收到的HTML内容，在内存中创建DOM树状结构。
4. 用户触发异步请求给服务器，此举不会影响既有的DOM树状结构，也就是说，用户的操作不会被打断。
5. 浏览器将XML格式数据传送给原本页面中的JavaScript函数进行处理。
6. 浏览器解析结果，接着更新内存中的DOM树状结构，此时页面部分内容会被更新，而非刷新，所以浏览器画面不会闪烁，而是非常平顺地显示出来。
随着AJAX技术日趋成熟，许多页面应用程序让用户操作起来就像是使用Windows Form应用程序，这是因为AJAX让页面应用程序可以在后台运行、取得所需的数据、展现用户所欲看到的结果。最重要的一点是，越来越多的用户通过宽带连上因特网，他们希望可以更快速地取得所需的数据，而无需等待数据下载时间。相信在未来，用户将很难区分所使用的应用程序到底是位于远程Web服务器中还是存在于本机计算机中。