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中支持后退按钮的基本设计思想 在这一节中,我们将讨论在Ajax应用程序中支持后退按钮所需的基本步骤,并给出说明所需步骤的简单示例代码。简单示例程序如图1所示,在界面中将有一个选择框,它有两个值:“Year 1”和“Year 2”。对于这个程序,我们将在选择框值发生改变时跟踪历史记录。这意味着用户可以首先选择“Year 2”然后单击后退按钮后退到先前的选择。
图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>
我们将首先实现第一个要求:创建状态的历史记录。正如我们前面所提到的,这个要求包含以下三个步骤:
我们希望能够保存选择框的每一次更改。因此我们将创建新的包含选择框状态信息的URI。为了遵循Internet标准,我们将使用URI的碎片标识符部分。按照IETF RFC 3986的规定,“……作为客户端间接引用的主要形式,碎片标识符在信息检索系统中起着特殊的作用,〈……〉碎片标识符在解除引用之前与URI的其余部分是分离的,因此,碎片本身中的标识信息只被用户代理所废弃,而不考虑URI方案……”。
使用碎片标识符,我们可以创建一个“Ajax-URI”,其中的客户端部分和服务器端部分使用“#”隔开。JavaScript提供了window.location()函数,以便通过URI更新浏览器的历史记录和地址。此外,我们可以使用window.location.hash()直接访问碎片标识符。