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

开发保留标准浏览器功能的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 来处理拖放客

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

户端。 在上面的两个例子中，状态改变了，但是却没有生成新的 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”然后单击后退按钮后 退到先前的选择

2 Mozilla Firefox le Edt View Go Bookmarks Tools Help 中,中·园③口9 ahost/backbase/1_the_application.ht B Customize Links Free Hotmail windows Marketplace Windows Media Windows Year1 Y 图1带有选择框的简单示例程序 示例程序最初是一个带有 Java Script getter和 setter(用于选择框值)的简单HTML表单 <html> Head> <script language= JavaScript" type="text/JavaScript> function reportOption value( var my Form document. make history var my Select my Form change year return my Select options [my Select selectedIndex] value function setOption Value (value) var my Form document make history my Select options [value-l] selected =true </script </head> <body> Form name=make history> Select name=change year> Option value="year 1">Year 1</option> Option value="year 2">Year 2</option> </select> </form> </html> 我们将首先实现第一个要求:创建状态的历史记录。正如我们前面所提到的,这个要求包含以下三个 步骤

图 1.带有选择框的简单示例程序 示例程序最初是一个带有 JavaScript getter 和 setter（用于选择框值）的简单 HTML 表单： <html> <head> <script language="JavaScript" type="text/JavaScript"> function reportOptionValue() { var myForm = document.make_history; var mySelect = myForm.change_year; return mySelect.options[mySelect.selectedIndex].value; } function setOptionValue(value) { var myForm = document.make_history; var mySelect = myForm.change_year; mySelect.options[value-1].selected = true; } </script> </head> <body> <form name=make_history> <select name=change_year> <option value="year_1">Year 1</option> <option value="year_2">Year 2</option> </select> </form> </body> </html> 我们将首先实现第一个要求：创建状态的历史记录。正如我们前面所提到的，这个要求包含以下三个 步骤：

创建历史记录 o保存有意义的状态 o生成相应的UR o将这个UR添加到浏览器的堆栈中 我们希望能够保存选择框的每一次更改。因此我们将创建新的包含选择框状态信息的UR 为了遵循 Internet标准,我们将使用URl的碎片标识符部分。按照旧 TE RFC3986的规定 为客户端间接引用的主要形式,碎片标识符在信息检索系统中起着特殊的作用 碎片标识符在解 除引用之前与UR|的其余部分是分离的,因此,碎片本身中的标识信息只被用户代理所废弃,而不考虑 UR方案 使用碎片标识符,我们可以创建一个"Ajax-UR,其中的客户端部分和服务器端部分使用#隔开 Java Script提供了 window location0函数,以便通过UR更新浏览器的历史记录和地址。此外,我们 可以使用 window location. hasho直接访问碎片标识符。 在下面的代码片断中,您可以看到如何通过对选择框使用 onchange事件处理程序来扩展我们的代码, 处理程序使用一个“ Ajax-UR”来更新浏览器历史记录及地址栏。 <head> Script language= JavaScript type="text/JavaScript> function makeHistory (newHash) window, location. hash newHash function reportOption value O var my Form document make history var my Select my Form change year return my Select options [my Select selectedIndex] value function setOption Value (value) var my Form document make history ar my Select my Form change year y Select options [value-1] selected =true </script)

• 创建历史记录 o 保存有意义的状态 o 生成相应的 URI o 将这个 URI 添加到浏览器的堆栈中 我们希望能够保存选择框的每一次更改。因此我们将创建新的包含选择框状态信息的 URI。 为了遵循 Internet 标准，我们将使用 URI 的碎片标识符部分。按照 IETF RFC 3986 的规定，“……作 为客户端间接引用的主要形式，碎片标识符在信息检索系统中起着特殊的作用，〈……〉碎片标识符在解 除引用之前与 URI 的其余部分是分离的，因此，碎片本身中的标识信息只被用户代理所废弃，而不考虑 URI 方案……”。 使用碎片标识符，我们可以创建一个“Ajax-URI”，其中的客户端部分和服务器端部分使用“#”隔开。 JavaScript 提供了 window.location()函数，以便通过 URI 更新浏览器的历史记录和地址。此外，我们 可以使用 window.location.hash()直接访问碎片标识符。 在下面的代码片断中，您可以看到如何通过对选择框使用 onchange 事件处理程序来扩展我们的代码， 该处理程序使用一个“Ajax-URI”来更新浏览器历史记录及地址栏。 <html> <head> <script language="JavaScript" type="text/JavaScript"> function makeHistory(newHash) { window.location.hash = newHash; } function reportOptionValue() { var myForm = document.make_history; var mySelect = myForm.change_year; return mySelect.options[mySelect.selectedIndex].value; } function setOptionValue(value) { var myForm = document.make_history; var mySelect = myForm.change_year; mySelect.options[value-1].selected = true; } </script> </head> <body>