开发保留标准浏览器功能的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表单 Head> 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 Form name=make history> Select name=change year> Option value="year 1">Year 1 Option value="year 2">Year 2 我们将首先实现第一个要求:创建状态的历史记录。正如我们前面所提到的,这个要求包含以下三个 步骤
图 1.带有选择框的简单示例程序 示例程序最初是一个带有 JavaScript getter 和 setter（用于选择框值）的简单 HTML 表单： 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; } Year 1 Year 2 我们将首先实现第一个要求：创建状态的历史记录。正如我们前面所提到的，这个要求包含以下三个 步骤：
创建历史记录 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”来更新浏览器历史记录及地址栏。 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”来更新浏览器历史记录及地址栏。 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; }
Option value= year 1">Year 1 Option value= year 2">Year 2 正如我们在图2中所看到的,选择框的每一次变动都将导致浏览器地址的更新。请注意,在需要使用 隐藏帧以获取正确的行为的 nternet Explorer(E中会存在一些问题,详细情况还是请参见 Mike Stenhouse 和 Brad Neuberg的文章 D Mozilla Firefox 中·园 http://locahostbackbase/2_creating_history.htmltyear_2 B Customize Links Free Hotmail windows Marketplace Windows Media Windows 图2状态变化时历史记录堆栈被更新 我们现在有了一个在选择框的值发生变化时创建新UR|的事件处理程序。新UR使用碎片标识符存储 重新创建先前状态所需的信息。现在我们可以着手实现下一个功能了 恢复历史记录 o检测UR|的更改 o通过UR|重新创建状态 在第一步中,我们通过 window location. hasho函数更新了客户端的UR。这个调用并不会产生服务器 的往返,也不会导致页面刷新。因此,我们需要使用Ajax的方法(在客户端)处理UR的改变。 首先需要增加一个轮询函数,以定时检查浏览器历史记录中的UR。我将在页面的 onload事件中使用 ollAs0函数,每隔1000毫秒它将重新执行一次。 这个轮询函数将调用 handleHistory0函数,后者检查在上一次检查之后UR是否改变了。我们将借助 一个名为 expectedHash的全局变量来实现 最后一部分是确定UR是否发生了改变,这种改变由选择框中的事件处理程序引起,或者是因为终端 用户单击了后退按钮而造成。我们通过在选择框的事件处理程序中设置 expectedHash来达到此目的
Year 1 Year 2 正如我们在图 2 中所看到的，选择框的每一次变动都将导致浏览器地址的更新。请注意，在需要使用 隐藏帧以获取正确的行为的 Internet Explorer (IE)中会存在一些问题，详细情况还是请参见 Mike Stenhouse 和 Brad Neuberg 的文章。 图 2.状态变化时历史记录堆栈被更新 我们现在有了一个在选择框的值发生变化时创建新 URI 的事件处理程序。新 URI 使用碎片标识符存储 重新创建先前状态所需的信息。现在我们可以着手实现下一个功能了。 • 恢复历史记录 o 检测 URI 的更改 o 通过 URI 重新创建状态 在第一步中，我们通过 window.location.hash()函数更新了客户端的 URI。这个调用并不会产生服务器 的往返，也不会导致页面刷新。因此，我们需要使用 Ajax 的方法（在客户端）处理 URI 的改变。 首先需要增加一个轮询函数，以定时检查浏览器历史记录中的 URI。我将在页面的 onload 事件中使用 pollHash()函数，每隔 1000 毫秒它将重新执行一次。 这个轮询函数将调用 handleHistory()函数，后者检查在上一次检查之后 URI 是否改变了。我们将借助 一个名为 expectedHash 的全局变量来实现。 最后一部分是确定 URI 是否发生了改变，这种改变由选择框中的事件处理程序引起，或者是因为终端 用户单击了后退按钮而造成。我们通过在选择框的事件处理程序中设置 expectedHash 来达到此目的
Head> Script language="JavaScript" type="text/JavaScript"> var expectedHash function makeHistory (newHash window, location hash newHash expectedHash window location. hash return true function reportOptionValueo var my Form document make history var my Select myForm change year return my Select options [mySelect selectedIndex] value function setOption Value (value) var my Form document. make history y Select options [value-1] selected =true function handleHistory o if window location. hash ! expectedHash expectedHash window. location. hash var newoption expectedHash substring(6) Option value( ne turn true function pollHasho I indow setInterval("handleHistory(",1000
var expectedHash = ""; function makeHistory(newHash) { window.location.hash = newHash; expectedHash = window.location.hash; return true; } 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; return true; } function handleHistory() { if ( window.location.hash != expectedHash ) { expectedHash = window.location.hash; var newoption = expectedHash.substring(6); setOptionValue( newoption ); } return true; } function pollHash() { handleHistory(); window.setInterval("handleHistory()", 1000); return true; }
Form name=make history. Option value= year 1">Year 1 Option value="year 2">Year 2 K/form> 到此,我们的示例程序就完成了。在这个程序中,我们演示了如何在UR中记录状态,如何将UR 添加到浏览器的历史记录堆栈中,如何从后退按钮检测地址变动,以及最终如何重新创建所需的状态 这个示例程序还缺少以下功能: ·对使用隐藏帧的正的支持 ·更多的固定URI(这个示例程序只用于选择框选项少于10的情况) ·在构造时注册初始状态 以一种兼容所有浏览器的健壮方式实现对所有传统的Web可用功能的处理不是一件容易的事。一种替 代方法是使用对这些功能提供了内置支持的Aax工具包。 Backbase DevNet包含了为开发人员提供的、与 Backbase和Ajax有关的信息。而开发人员论坛是 DevNet的一部分 Backbase Web应用程序(包括 DevNet及其讨论论坛)是使用 Backbase构建的。为了演示该论坛 功能丰富和易于到达的特点,我们将逐步遍历论坛的典型用例: 开发人员浏览论坛,阅读不同的主题 ·开发人员复制这个主题的UR,将其粘贴到电子邮件中并发送给朋友。这个朋友从电子邮件中复 制这个UR到一个浏览器中并打开同一论坛主题 ·开发人员单击后退按钮以阅读以前的主题 进行几次用户交互后的论坛界面状态 我们来看看开发人员来到“BXML"论坛并选中名为“ ssue with vertical and horizontal menus"的贴子之
Year 1 Year 2 到此，我们的示例程序就完成了。在这个程序中，我们演示了如何在 URI 中记录状态，如何将 URI 添加到浏览器的历史记录堆栈中，如何从后退按钮检测地址变动，以及最终如何重新创建所需的状态。 这个示例程序还缺少以下功能： • 对使用隐藏帧的 IE 的支持 • 更多的固定 URI（这个示例程序只用于选择框选项少于 10 的情况） • 在构造时注册初始状态 以一种兼容所有浏览器的健壮方式实现对所有传统的 Web 可用功能的处理不是一件容易的事。一种替 代方法是使用对这些功能提供了内置支持的 Ajax 工具包。 Backbase DevNet 包含了为开发人员提供的、与 Backbase 和 Ajax 有关的信息。而开发人员论坛是 DevNet 的一部分。 Backbase Web 应用程序（包括 DevNet 及其讨论论坛）是使用 Backbase 构建的。为了演示该论坛 功能丰富和易于到达的特点，我们将逐步遍历论坛的典型用例： • 开发人员浏览论坛，阅读不同的主题。 • 开发人员复制这个主题的 URI，将其粘贴到电子邮件中并发送给朋友。这个朋友从电子邮件中复 制这个 URI 到一个浏览器中并打开同一论坛主题。 • 开发人员单击后退按钮以阅读以前的主题。 进行几次用户交互后的论坛界面状态 我们来看看开发人员来到“BXML”论坛并选中名为“Issue with vertical and horizontal menus”的贴子之
后,论坛界面的状态以及地址栏中的对应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 引擎通过开箱即用地提供所需功能，为该问题提 供了一种解决方案
