《高级Web技术》参考资料：3-应用web_5-J2EE框架_阅读参考资料_ajax+J2EE_materials_开发保留标准浏览器功能的AJAX应用程序.doc_大学文库

开发保留标准浏览器功能的AJAX应用程序作者: Mark Schiefelbein出处:bea责任编辑:方舟[2006-03-1508:32 Aax应用程序由于其丰富的功能、交互性以及快速的响应能力而得到人们的普遍赞许 Ajax应用程序由于其丰富的功能、交互性以及快速的响应能力而得到人们的普遍赞许。它可以使用 XmlhTtp rEqueSt对象动态地加载数据,而不是加载新的页面。在它大肆进行宣传以及许多人兴奋的同时, 有评论指出,Ajax应用程序丢失了浏览器的一些重要功能,包括对后退前进按钮的支持本文将首先阐明为什么在Aax应用程序中除非显式地构建后退进按钮以及其它浏览器功能,否则它们将无法运行的原因。然后,我们将简要介绍开发人员如何解决这些问题。最后,我们将看到有关 Backbase Ajax引擎如何支持后退前进按钮以及其它标准浏览器功能的详细情况。 Ajax应用程序是否需要后退按钮? Ajax承诺,可以让开发人员完全基于标准的web浏览器技术(通常是指 DHTML)创建在视觉上吸引人的、高度交互式的Web应用程序以前开发人员不得不在功能丰富(具有高度交互性的、吸引人的用户界面)和易于到达(不需要进行客户端安装就可以工作在所有Wveb浏览器下的前端)二者之中作出选择。而Ajax应用程序应该能够产生既“功能丰富”又“易于到达”的前端但是一个界面怎样才算是“功能丰富”的,而一个应用程序又怎样才是“易于到达”的呢很难精确地定义“功能丰富”的含义,但是却很容易直觉地认识到:当您看到一个界面时,您就会知道它是不是功能丰富的。象 Microsoft Office之类的桌面应用程序就是功能丰富的。功能丰富的界面使用诸如选项卡和上下文菜单这样的高级U控件。这样的界面提供一些高级交互方法。例如,拖放、对关注的U 元素进行高亮显示等。传统的浏览器应用程序是功能不丰富的。它们仅限于诸如表单之类的简单控件,交互主要是由到新页面的单击链接组成。我们只要看看微软的电子邮件客户端就可以看出功能丰富和功能不丰富的区别: Outlook是功能丰富的,而 Hotmail就是功能不丰富的 Ajax应用程序已经由于功能丰富而得到人们的普遍赞许。 Google的 gmail i就是其中最具代表性的例子。Goge所开发的其它Ajax应用程序( Google Suggest、 Google Map)、微软即将推出的名为“ Kahuna 的Web邮件客户端以及 Backbase rss reader都包含了一些高级控件和交互模块通过前面的讨论,可以说Ajax应用程序很明显满足“功能丰富”的标准。那么它是不是“易于到达"的呢? 首先,最基本的是,只有界面在Web浏览器中运行的应用程序才是“易于到达的。Ajax应用程序是基于浏览器标准的,因此可以通过Web浏览器来访问但是,仅仅可以通过Web浏览器访问还不够。终端用户希望在使用Web应用程序时所面对的是特定的交互方式。应用程序需要遵从传统的Web交互方式,并提供以下的可用功能 ·后退和前进按钮可以正常工作,以便终端用户可以导航到历史记录页面

开发保留标准浏览器功能的 AJAX 应用程序作者：Mark Schiefelbein 出处：bea 责任编辑：方舟 [ 2006-03-15 08:32 ] Ajax 应用程序由于其丰富的功能、交互性以及快速的响应能力而得到人们的普遍赞许 Ajax 应用程序由于其丰富的功能、交互性以及快速的响应能力而得到人们的普遍赞许。它可以使用 XMLHttpRequest 对象动态地加载数据，而不是加载新的页面。在它大肆进行宣传以及许多人兴奋的同时，有评论指出，Ajax 应用程序丢失了浏览器的一些重要功能，包括对后退前进按钮的支持。本文将首先阐明为什么在 Ajax 应用程序中除非显式地构建后退/前进按钮以及其它浏览器功能，否则它们将无法运行的原因。然后，我们将简要介绍开发人员如何解决这些问题。最后，我们将看到有关 Backbase Ajax 引擎如何支持后退/前进按钮以及其它标准浏览器功能的详细情况。 Ajax 应用程序是否需要后退按钮？ Ajax 承诺，可以让开发人员完全基于标准的 Web 浏览器技术（通常是指 DHTML）创建在视觉上吸引人的、高度交互式的 Web 应用程序。以前开发人员不得不在功能丰富（具有高度交互性的、吸引人的用户界面）和易于到达（不需要进行客户端安装就可以工作在所有 Web 浏览器下的前端）二者之中作出选择。而 Ajax 应用程序应该能够产生既“功能丰富”又“易于到达”的前端。但是一个界面怎样才算是“功能丰富”的，而一个应用程序又怎样才是“易于到达”的呢？很难精确地定义“功能丰富”的含义，但是却很容易直觉地认识到：当您看到一个界面时，您就会知道它是不是功能丰富的。象 Microsoft Office 之类的桌面应用程序就是功能丰富的。功能丰富的界面使用诸如选项卡和上下文菜单这样的高级 UI 控件。这样的界面提供一些高级交互方法。例如，拖放、对关注的 UI 元素进行高亮显示等。传统的浏览器应用程序是功能不丰富的。它们仅限于诸如表单之类的简单控件，交互主要是由到新页面的单击链接组成。我们只要看看微软的电子邮件客户端就可以看出功能丰富和功能不丰富的区别：Outlook 是功能丰富的，而 Hotmail 就是功能不丰富的。 Ajax 应用程序已经由于功能丰富而得到人们的普遍赞许。Google 的 Gmail 就是其中最具代表性的例子。Google 所开发的其它 Ajax 应用程序（Google Suggest、Google Map）、微软即将推出的名为“Kahuna” 的 Web 邮件客户端以及 Backbase RSS Reader 都包含了一些高级控件和交互模块。通过前面的讨论，可以说 Ajax 应用程序很明显满足“功能丰富”的标准。那么它是不是“易于到达”的呢？首先，最基本的是，只有界面在 Web 浏览器中运行的应用程序才是“易于到达”的。Ajax 应用程序是基于浏览器标准的，因此可以通过 Web 浏览器来访问。但是，仅仅可以通过 Web 浏览器访问还不够。终端用户希望在使用 Web 应用程序时所面对的是特定的交互方式。应用程序需要遵从传统的 Web 交互方式，并提供以下的可用功能： • 后退和前进按钮可以正常工作，以便终端用户可以导航到历史记录页面

·用户应该可以创建书签。支持深链接,以保证终端用户可以将这个页面通过电子邮件发送给朋友和同事。 ·刷新按钮可以正常工作,以便刷新当前的状态而不是重新初始化应用程序。开发人员可以使用“查看源文件”看到源代码终端用户可以使用“查找”对页面进行搜索 ·搜索引擎可以为页面做索引并创建到搜索项的深链接。以前讨论的大多数Ajax应用程序的确打破了标准的Web交互方式。在下一节中,我们将讨论为什么许多Aax应用程序会这么做。为什么Aax应用程序常常会使后退按钮无法正常工作我们所说的Web基于以下三个原则 ·使用(D)HTML来定义界面 ·使用HTTP实现客户端与服务器间的通讯使用UR进行寻址 Ajax编程突破了由以上原则所带来的种种限制,使得界面功能更加丰富。Ajax广泛使用了 Java Script (“J")以创建功能丰富的Ul组件和交互性。Ajax还引入了异步的XML通信(“A"和X"),也就是使用 XmlhTtp Request对象导入新的数据和表示逻辑而不必刷新页面。然而,目前的Ajax模型并没有解决如何处理UR的问题 Ajax应用程序对(D)HTML和HTTP的使用方式做了改变,而这种改变带来的直接结果就是后退按钮和Web的基本交互方式的其它元素无法正常工作了。在本节的其余部分,我将说明如何通过以Ajax的方式处理URl来解决上述问题。首先我们来看看在传统的Web应用程序中UR是如何与用户交互相关联的。从技术方面来说,用户交互是指用户界面状态的一次更改。状态改变由终端用户发起。浏览器客户端通过向服务器发出页面请求来处理状态更改(REST法则)。服务器将发送新的页面和新的UR到客户端以生成新的界面状态简单地说,每个用户交互都是通过会导致如下结果的服务器往返来处理的: ·生成新的页面 ·生成新的UR 这些Web功能之所以能够被使用,是因为浏览器在它的历史记录堆栈中记录了连续的UR,并在地址栏中向终端用户显示当前URl,用户可以通过地址栏复制UR,并将其发送给朋友。当用户单击后退按钮或者向浏览器的地址栏中粘贴一个来自于电子邮件的UR时,就会触发一次到服务器的往返。因为服务器负责状态管理,所以它就可以生成相应的页面 Aax应用程序与传统的Web应用程序之间的主要区别在,Aax应用程序可以处理用户的交互而无需页面重新加载。例如,通过Ⅹ MlhttPreqUest对象从服务器载入数据,或者使用 Java Script来处理拖放客

• 用户应该可以创建书签。 • 支持深链接，以保证终端用户可以将这个页面通过电子邮件发送给朋友和同事。 • 刷新按钮可以正常工作，以便刷新当前的状态而不是重新初始化应用程序。 • 开发人员可以使用“查看源文件”看到源代码。 • 终端用户可以使用“查找”对页面进行搜索。 • 搜索引擎可以为页面做索引并创建到搜索项的深链接。以前讨论的大多数 Ajax 应用程序的确打破了标准的 Web 交互方式。在下一节中，我们将讨论为什么许多 Ajax 应用程序会这么做。为什么 Ajax 应用程序常常会使后退按钮无法正常工作？我们所说的 Web 基于以下三个原则： • 使用 (D)HTML 来定义界面 • 使用 HTTP 实现客户端与服务器间的通讯 • 使用 URI 进行寻址 Ajax 编程突破了由以上原则所带来的种种限制，使得界面功能更加丰富。Ajax 广泛使用了 JavaScript （“J”）以创建功能丰富的 UI 组件和交互性。Ajax 还引入了异步的 XML 通信（“A”和“X”），也就是使用 XMLHttpRequest 对象导入新的数据和表示逻辑而不必刷新页面。然而，目前的 Ajax 模型并没有解决如何处理 URI 的问题。 Ajax 应用程序对(D)HTML 和 HTTP 的使用方式做了改变，而这种改变带来的直接结果就是后退按钮和 Web 的基本交互方式的其它元素无法正常工作了。在本节的其余部分，我将说明如何通过以 Ajax 的方式处理 URI 来解决上述问题。首先我们来看看在传统的 Web 应用程序中 URI 是如何与用户交互相关联的。从技术方面来说，用户交互是指用户界面状态的一次更改。状态改变由终端用户发起。浏览器客户端通过向服务器发出页面请求来处理状态更改（REST 法则）。服务器将发送新的页面和新的 URI 到客户端以生成新的界面状态。简单地说，每个用户交互都是通过会导致如下结果的服务器往返来处理的： • 生成新的页面 • 生成新的 URI 这些 Web 功能之所以能够被使用，是因为浏览器在它的历史记录堆栈中记录了连续的 URI，并在地址栏中向终端用户显示当前 URI，用户可以通过地址栏复制 URI，并将其发送给朋友。当用户单击后退按钮或者向浏览器的地址栏中粘贴一个来自于电子邮件的 URI 时，就会触发一次到服务器的往返。因为服务器负责状态管理，所以它就可以生成相应的页面。 Ajax 应用程序与传统的 Web 应用程序之间的主要区别在，Ajax 应用程序可以处理用户的交互而无需页面重新加载。例如，通过 XMLHttpRequest 对象从服务器载入数据，或者使用 JavaScript 来处理拖放客

户端。在上面的两个例子中，状态改变了，但是却没有生成新的 URI。因此，单击后退按钮或刷新按钮会产生意外的结果，在地址栏中也不会有深链接的 URI。为了提供传统的 Web 可用功能，Ajax 应用程序需要以类似于服务器处理传统的 Web 应用程序的方式来处理 URI 客户端。Ajax 应用程序需要实现以下功能： • 当客户端状态发生改变时，生成一个 URI，并将其发送到浏览器 • 当浏览器请求新的 URI 时可以重新创建状态。实现以上功能后，浏览器的历史记录就可以正常工作，浏览器的地址栏就可以显示 URI，当然，您也就可以将它发送给朋友了。这里还有另外一个难点，那就是如何确定 Ajax 引擎什么时候需要实现以上功能（例如，哪一次状态改变需要创建新的 URI）。在传统的模式中，每一次页面刷新都对应着一次 URI 更新。而在 Ajax 模式中，每一个客户端事件都将新的 URI 添加到浏览器堆栈中。交互设计者和开发人员将不得不做出决定：哪一次状态改变是有意义的。只对有意义的状态改变才需要生成 URI。下面我们对提供 Web 可用功能的 Ajax 应用程序在客户端需要实现的功能做一下总结： • 创建历史记录 o 保存有意义的状态 o 生成相应的 URI o 将这个 URI 添加到浏览器的堆栈中 • 恢复历史记录 o 检测 URI 的改变 o 通过 URI 重新创建状态在 Ajax 中支持后退按钮的基本设计思想在这一节中，我们将讨论在 Ajax 应用程序中支持后退按钮所需的基本步骤，并给出说明所需步骤的简单示例代码。简单示例程序如图１所示，在界面中将有一个选择框，它有两个值：“Year 1”和“Year 2”。对于这个程序，我们将在选择框值发生改变时跟踪历史记录。这意味着用户可以首先选择“Year 2”然后单击后退按钮后退到先前的选择

后,论坛界面的状态以及地址栏中的对应UR是什么样的情况论坛和贴子被选中,并被高亮显示。讨论的主题被显示出来以供阅读。在UR的碎片标识符中包含了所有的相关信息。在#后面,我们看到了为书签和深链接而记录的完整状态:“ forum"表示开发人员在浏览这个Web站点的论坛部分:“om=2”表示当前选中的是BXML论坛," hread=211”记录了当前所选择的主题。最后,方括号中的“5表示与书签结合的对多个后退和前进步骤的处理。图3具有 Ajax UR|的论坛初始状态(单击图片查看大图) 访问 Backbase论坛,您就可以看到UR如何随着每次状态改变而更新,即使更新是在客户端进行处理的,或者牵涉到通过 XmlhTtp Request对象进行部分页面更新。在新的浏览器窗口内重新创懿论坛界面的状态现在让我们看看当开发人员将当前UR发送给朋友时会发生什么情况。这个朋友在浏览器窗口中打开了这个UR,期望能看到相同的界面状态。需要在新的浏览器中重新创建该状态。对于本文,我是从一个 Firefox窗口中复制UR到一个新打开的旧窗口中在地址栏中输入UR首先会产生一个服务器端的请求。使用#”前的部分,会加载 Backbase. co,在这一过程中, Backbase Ajax引擎也就实现了初始化。活动的 Backbase引擎会阅读∪R中“#后的部分通过这些信息, Backbase引擎会转到“论坛(fonm)”部分,并选定BXML论坛(id=2)中的第211个主题,从而创建相应的状态。不需要页面的刷新,只需从服务器中加载附加的内容并在客户端部分地更新界面,就可以实现了。在后续的浏览器功能的处理中,新的UR被添加到浏览器历史记录中,这个新的UR既可以在地址栏中使用,也可以用来做深链接。“0『表示没有可返回(使用后退按钮)的先前状态。图4在新的浏览器窗口中重新创建论坛状态(单击图片查看大图) 用户单击后退按钮后的论坛界面状态第一步我们研究了UR如何随着由用户交互所触发的界面状态更改而更新。下面我们将看到相反的情况:用户请求新的UR,相应的状态被重新创建

后，论坛界面的状态以及地址栏中的对应 URI 是什么样的情况。论坛和贴子被选中，并被高亮显示。讨论的主题被显示出来以供阅读。在 URI 的碎片标识符中包含了所有的相关信息。在#后面，我们看到了为书签和深链接而记录的完整状态：“forum”表示开发人员在浏览这个 Web 站点的论坛部分；“forum=2”表示当前选中的是 BXML 论坛，“thread=211”记录了当前所选择的主题。最后，方括号中的“[5]”表示与书签结合的对多个后退和前进步骤的处理。图 3.具有 Ajax URI 的论坛初始状态（单击图片查看大图）访问 Backbase 论坛，您就可以看到 URI 如何随着每次状态改变而更新，即使更新是在客户端进行处理的，或者牵涉到通过 XMLHttpRequest 对象进行部分页面更新。在新的浏览器窗口内重新创建论坛界面的状态现在让我们看看当开发人员将当前 URI 发送给朋友时会发生什么情况。这个朋友在浏览器窗口中打开了这个 URI，期望能看到相同的界面状态。需要在新的浏览器中重新创建该状态。对于本文，我是从一个 Firefox 窗口中复制 URI 到一个新打开的 IE 窗口中。在地址栏中输入 URI 首先会产生一个服务器端的请求。使用“#”前的部分，会加载 Backbase.com，在这一过程中，Backbase Ajax 引擎也就实现了初始化。活动的 Backbase 引擎会阅读 URI 中“#”后的部分。通过这些信息，Backbase 引擎会转到“论坛（forum）”部分，并选定 BXML 论坛（id=2）中的第 211 个主题，从而创建相应的状态。不需要页面的刷新，只需从服务器中加载附加的内容并在客户端部分地更新界面，就可以实现了。在后续的浏览器功能的处理中，新的 URI 被添加到浏览器历史记录中，这个新的 URI 既可以在地址栏中使用，也可以用来做深链接。“[0]”表示没有可返回（使用后退按钮）的先前状态。图 4.在新的浏览器窗口中重新创建论坛状态（单击图片查看大图）用户单击后退按钮后的论坛界面状态第一步我们研究了 URI 如何随着由用户交互所触发的界面状态更改而更新。下面我们将看到相反的情况：用户请求新的 URI，相应的状态被重新创建

通过单击后退按钮,用户要求返回先前阅读的页面。浏览器通过从历史记录堆栈中找回先前的UR来响应后退按钮。 Backbase Ajax引擎将监测这一变化,从历史记录中读取新的URl,并来到“论坛”部分选定 BxML论坛(id=2)中的第192个主题,从而重新构建相应的状态。新的URl将按照上述语义显示在地址到这里,我们的案例分析也就结束了图5单击后退按钮后的论坛状态(单击图片查看大图) Aax程序确实需要后退按钮! 在过去的几年中,Web开发人员因为市场要求“易于到达"并愿意接受“功能丰富”方面的牺牲,所以选择构建web界面。然而,当前Aax受到的普遍关注清楚地显示出这种情况实际上只是暂时的。市场现在强烈要求web程序也能像桌面应用程序那样具有丰富的功能、交互性以及敏捷的响应能力。是,终端用户已经习惯了Web交互方式。使用常见模式与任何Web界面进行交互可以提高生产力。终端用户期望后退前进按钮和刷新按钮能正常工作,可以创建书签和深链接,可以查看源文件,使用“查找对页面进行搜索,而且搜索引擎可以对Ajax应用程序建立索引。 Ajax社区必须知道:正如本文所述,在Aax应用程序中提供对后退/前进按钮以及其它传统浏览器功能的支持的技术是存在的。虽然实现起来并不容易,而且会增加成本,但是Ajax社区的成功需要将传统的浏览器功能构建到Ajax应用程序中。因此,我强烈呼吁Aax开发人员构建支持这些功能的Aax应用程序! 结束语在本文中,我着重阐明了Aax应用程序为什么需要遵从传统的Web交互方式并提供传统的Web可用功能。我确定可以通过创建在碎片标识符中包含客户端状态信息的“Aax∪Rr,从而将这些功能编程到 Aax应用程序中。阅读相关代码,您会发现,由于状态处理代码通常非常重要,再加上不同浏览器之间常常不兼容,实现完整的通用解决方案是相当困难的。而 Backbase Ajax引擎通过开箱即用地提供所需功能,为该问题提供了一种解决方案

通过单击后退按钮，用户要求返回先前阅读的页面。浏览器通过从历史记录堆栈中找回先前的 URI 来响应后退按钮。Backbase Ajax 引擎将监测这一变化，从历史记录中读取新的 URI，并来到“论坛”部分选定 BXML 论坛（id=2）中的第 192 个主题，从而重新构建相应的状态。新的 URI 将按照上述语义显示在地址栏中。到这里，我们的案例分析也就结束了。图 5.单击后退按钮后的论坛状态（单击图片查看大图） Ajax 程序确实需要后退按钮！在过去的几年中，Web 开发人员因为市场要求“易于到达”并愿意接受“功能丰富”方面的牺牲，所以选择构建 Web 界面。然而，当前 Ajax 受到的普遍关注清楚地显示出这种情况实际上只是暂时的。市场现在强烈要求 Web 程序也能像桌面应用程序那样具有丰富的功能、交互性以及敏捷的响应能力。但是，终端用户已经习惯了 Web 交互方式。使用常见模式与任何 Web 界面进行交互可以提高生产力。终端用户期望后退/前进按钮和刷新按钮能正常工作，可以创建书签和深链接，可以查看源文件，使用“查找” 对页面进行搜索，而且搜索引擎可以对 Ajax 应用程序建立索引。 Ajax 社区必须知道：正如本文所述，在 Ajax 应用程序中提供对后退/前进按钮以及其它传统浏览器功能的支持的技术是存在的。虽然实现起来并不容易，而且会增加成本，但是 Ajax 社区的成功需要将传统的浏览器功能构建到 Ajax 应用程序中。因此，我强烈呼吁 Ajax 开发人员构建支持这些功能的 Ajax 应用程序！结束语在本文中，我着重阐明了 Ajax 应用程序为什么需要遵从传统的 Web 交互方式并提供传统的 Web 可用功能。我确定可以通过创建在碎片标识符中包含客户端状态信息的“Ajax URI” ，从而将这些功能编程到 Ajax 应用程序中。阅读相关代码，您会发现，由于状态处理代码通常非常重要，再加上不同浏览器之间常常不兼容，实现完整的通用解决方案是相当困难的。而 Backbase Ajax 引擎通过开箱即用地提供所需功能，为该问题提供了一种解决方案