AJAX如何处理书签和翻页按扭（上）

AJAX如何处理书签和翻页按扭

原文地址：
Making AJAX behave better in the browser
翻译：我要去桂林

本篇文章提供了一个开源JavaScript库，它提供了给AJAX应用程序中添加书签和会退按钮的功能。在学习完这个教程后，开发者将能够对开发AJAX应用碰到的问题获得一个解决方案，这个特性甚至Google Maps 和 Gmail 现在都不提供：提供一个强大的，可用的书签和前进回退按钮，如同其他的WEB应用一样的行为。

AJAX“如何处理书签和回退按钮”阐述了AJAX应用程序开发书签和回退按钮功能碰到的严重的问题；可以解决以上问题的一个开源框架，并提供真实、简单的历史记录库，还提供了几个运行中的例子。

本文把这个框架提供的重要发现分两个部分来说明：首先，一个隐藏的HTML表单用来缓存大量短暂的在客户端信息。这些缓存为网页导航提供了强大的支持。其次，一个隐藏的IFrame和超级链接用来截取和记录浏览器的历史事件提供回退按钮和向前按钮的支持。以上两个技术都是通过包装在一个简单的JavaScript库中来实现简单开发。

问题：

书签和回退按钮在传统的多页面的Web应用程序中工作的非常好。当用户浏览网站的时候，浏览器的地址栏记录随新的URLs更新，这些记录可以拷贝到email 或者 书签中供以后使用。回退和前进按钮可以帮助用户在他浏览过的网页中向前或向后翻动。

AJAX 应用程序却是不同的，他们是运行在一个网页中的复杂程序。浏览器并不是为这类程序制作的―――这类程序是过去的，在每次鼠标点击的时候需要重新刷新整个页面。

在类似Gmail的AJAX软件中，浏览器的地址栏在用户选择功能和改变程序状态的时候保持不变，这让书签在这类程序中无法使用。未来，如果用户按下“回退”按钮来撤销上次的动作，而浏览器和应用程序分离的状况会让用户很吃惊。

解决方案：

开源Really Simply History (RSH)框架可以用来解决上面的问题，为AJAX应用程序提供书签和控制“回退”、“向前”按钮的功能。RSH 目前还是Beta 状态，可以在Firefox 1.0 , Netscape 7+,Internet Explorer 6+等浏览器上工作，目前还不支持Safari浏览器。可以参考：编码天堂：Safari:不可能的DHTML历史记录。

有几类AJAX框架目前也支持书签和历史访问的问题，但这些框架因为实现方式的不同，目前都有几个大Bug。未来，很多AJAX框架，比如Backbase 和 Dojo 将会整合历史浏览的功能；这些框架为AJAX应用程序采用完全不同的编程模型，强迫程序员使用完全不同的方式来实现历史浏览的功能。

相反，RSH 是一个可以包含在现有AJAX系统的单模块。未来，RSH库会进一步改进避免和其他框架的相关功能冲突。

RSH 历史框架由两个JavaScript类组成：DhtmlHistory 和 HistoryStorage。

DhtmlHistory 类为AJAX应用程序提供历史浏览记录的抽象。AJAX 页面 add() 历史浏览记录事件到浏览器，保存指定新的地址和相关的历史数据。DhtmlHistory 类使用Hash连接更新浏览器当前的URL，比如：#new-location，同时把历史数据和新的URL关联。AJAX 应用程序把自己注册为历史浏览的监听器，当用户使用 “前进”“回退”按钮来浏览时，历史浏览时间被触发，调用 add() 方法来提供给浏览器新的地址，并保存历史数据。

第二个类: HistoryStorage允许程序员保存任意的历史浏览数据。在普通的网页中，当用户浏览到一个新的网址，浏览器卸载并清除当前网页所有的程序和JavaScript状态，如果用户返回时，所有的数据都丢失了。HsitoryStorage 类提供带有Hash表的API通过 put() , get() , hasKey()　等方法来解决这类问题。上面的方法允许程序员保存用户离开网页时的任意数据，当用户按“回退”按钮重新返回时，历史数据可以通过HistoryStorage类来访问。我们起初通过使用隐藏的表单字段来实现，因为浏览器自动保存一个表单中字段值，甚至用户离开网页的时候也如此。

例子：

先从一个简单的例子开始吧：

首先，需要RSH框架的网页中需要包含 dhtmlHistory.js 教本：

<!-- Load the Really Simple

History framework -->

<script type="text/javascript"

src="../../framework/dhtmlHistory.js">

</script>

DHTML 历史应用程序必须在同级目录下包含blank.html文件。这个文件自动被RSH框架绑定需要被IE浏览器使用。正如刚才提到的，RSH使用一个隐藏的Iframe来保存和增加IE浏览器的改变。这个Iframe需要指定一个实际的文件位置才能正常工作，这就是blank.html。

RSH 框架创建了一个叫dhtmlHistory的全局对象，这是控制浏览器历史浏览记录的入口点。第一步在网页完成装载后需要初始化 dhtmlHistory 对象。

window.onload = initialize;

function initialize() {

// initialize the DHTML History

// framework

dhtmlHistory.initialize();

然后，程序员使用 dhtmlHistory.addListener() 方法订阅历史浏览事件的改变。这个方法使用了一个JavaScript的回调函数，当记录历史浏览事件发生时这个函数接收两个参数。网页的新地址和任何的历史数据都应该关联到这个事件：

window.onload = initialize;

function initialize() {

// initialize the DHTML History

// framework

dhtmlHistory.initialize();

// subscribe to DHTML history change

// events

dhtmlHistory.initialize();

historyChange() 方法很直观，当用户浏览到一个新的网页时使用一个方法接收 newLocation ，同时其他的 historyData 可以选择附加到这个事件上：

/** Our callback to receive history change

events. */

function historyChange(newLocation,

historyData) {

debug("A history change has occurred: "

+ "newLocation="+newLocation

+ ", historyData="+historyData,

true);

}

上面用到的Debug() 是一个工具方法，用来简单的把消息打印到网页上。第二个参数是Boolean型的，如果设置为真，在新的消息打印的时候将会清楚原来的信息。

Add() 方法。增加一个包含新地址的历史事件，比如：“edit:SomePage”，同时也提供了和事件一起存储的可选 historyDate 值。

window.onload = initialize;

function initialize() {

// initialize the DHTML History

// framework

dhtmlHistory.initialize();

// subscribe to DHTML history change

// events

dhtmlHistory.initialize();

// if this is the first time we have

// loaded the page...

if (dhtmlHistory.isFirstLoad()) {

debug("Adding values to browser "

+ "history", false);

// start adding history

dhtmlHistory.add("helloworld",

"Hello World Data");

dhtmlHistory.add("foobar", 33);

dhtmlHistory.add("boobah", true);

var complexObject = new Object();

complexObject.value1 =

"This is the first value";

complexObject.value2 =

"This is the second value";

complexObject.value3 = new Array();

complexObject.value3 = new Array();

complexObject.value3[1] = ¡°array 2¡±;

dhtmlHistory.add("complexObject",

complexObject);

在add()执行后的同时，新的地址作为一个链接地址将显示在浏览器的URL地址栏中。比如：在AJAX网页中当前地址是：http://codinginparadise.org/my_ajax_app，执行完： dhtmlHistory.add(“helloworld”,”Hello World Data”)后用户将会在浏览器URL地址栏中看到如下的地址：

http://codinginparadise.org/my_ajax_app#helloworld

这是用户可以给这个页面做收藏书签，如果用户后来用到这个书签的时候，AJAX应用程序可以读取到：#helloworld值并用它来初始化网页。RSH框架透明的对URL地址值进行编码和解码。

historyData 在保存比较复杂状态的时候很有用处。这是一个可选的值，他可以是JavaScript的任何类型，比如：数字，字符串，对象等。使用这个功能的一个例子是在一个网页字符编辑器中，如果用户离开当前网页。当用户回退时，浏览器将会把对象返回给历史浏览变动监听器。

开发者可以给historyData提供带有嵌套对象和用数组表示的复杂JavaScript对象。然而，DOM对象和浏览器支持的脚本对象XMLHttpRequest，并不保存。注意：historyData 并不随书签一起持续化，当浏览器关闭，浏览器缓存被清除和用户清除历史记录的时候，他也就消失了。