AJAX：如何处理书签和后退按钮（2）

开发人员使用add()方法添加历史记录事件。添加历史记录事件涉及为历史记录变化指定一个新地址，例如edit:SomePage，以及提供一个和该事件一起保存的可选historyData值。

window.onload = initialize; 
function initialize() {
　// initialize the DHTML History
　// framework
　dhtmlHistory.initialize(); 
　// subscribe to DHTML history change
　// events
　dhtmlHistory.addListener(historyChange); 
　// 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 data";
　　complexObject.value3 = new Array();
　　complexObject.value3[0] = "array 1";
　　complexObject.value3[1] = "array 2"; 
　　dhtmlHistory.add("complexObject", complexObject); 

在add()被调用之后，新的地址将立即作为一个锚值（链接地址）显示在浏览器的URL地址栏中。例如，对地址为http://codinginparadise.org/my_ajax_app的AJAX Web页面调用dhtmlHistory.add("helloworld", "Hello World Data")之后，用户将会在其浏览器URL地址栏中看到如下的地址：

http://codinginparadise.org/my_ajax_app#helloworld

然后用户可以将这个页面做成书签，如果以后用到这个书签，AJAX应用程序可以读取#helloworld值，并用它来初始化Web页面。散列后面的地址值是RSH框架可以透明编码和解码的URL地址。

HistoryData非常有用，它保存比简单的URL更为复杂的AJAX地址变化状态。这是一个可选值，可以是任何JavaScript类型，例如Number、String或Object。使用该保存功能的一个例子是在一个富文本编辑器中保存所有文本（比如在用户离开当前页面时）。当用户再回到这个地址时，浏览器将会将该对象返回给历史记录变化 * 。

开发人员可以为historyData提供带有嵌套对象和表示复杂状态的数组的完整JavaScript对象；JSON (JavaScript Object Notation)所支持的在历史记录数据中都支持，包括简单数据类型和null类型。然而，DOM对象以及可用脚本编写的浏览器对象（如XMLHttpRequest）不会被保存。请注意，historyData并不随书签一起保存，当浏览器关闭，浏览器缓存被清空，或者用户清除历史记录的时候，它就会消失。

使用dhtmlHistory的最后一步是isFirstLoad()方法。在某些浏览器中，如果导航到一个Web页面，再跳转到另一个不同的页面，然后按“后退”按钮返回到起始的站点，第一页将完全重新加载，并触发onload事件。这样会对想要在第一次加载页面时用某种方式对其进行初始化（而其后则不使用这种方式重新加载该页面）的代码造成破坏。isFirstLoad()方法可以区分是第一次加载一个Web页面还是用户导航到保存在历史记录中的Web页面时触发的“假加载”事件。

在示例代码中，我们只想在第一次加载页面的时候添加历史记录事件；如果用户在加载页面后按后退按钮返回该页面，我们就不想重新添加任何历史记录事件：

window.onload = initialize; 
function initialize() {
　// initialize the DHTML History
　// framework
　dhtmlHistory.initialize(); 
　// subscribe to DHTML history change
　// events
　dhtmlHistory.addListener(historyChange); 
　// 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 data";
　　complexObject.value3 = new Array();
　　complexObject.value3[0] = "array 1";
　　complexObject.value3[1] = "array 2"; 
　　dhtmlHistory.add("complexObject", complexObject); 

让我们继续使用historyStorage类。类似于dhtmlHistory，historyStorage通过一个叫historyStorage的全局对象来公开它的功能。该对象有几个模拟散列的方法，比如put(keyName、keyValue)、get(keyName)和hasKey(keyName)。键名称必须是字符串，同时键值可以是复杂的JavaScript对象甚至是XML格式的字符串。在我们的源代码例子中，在第一次加载页面时，我们使用put()将简单的XML放入historyStorage：

window.onload = initialize; 
function initialize() {
　// initialize the DHTML History
　// framework
　dhtmlHistory.initialize(); 
　// subscribe to DHTML history change
　// events
　dhtmlHistory.addListener(historyChange); 
　// 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 data";
　　complexObject.value3 = new Array();
　　complexObject.value3[0] = "array 1";
　　complexObject.value3[1] = "array 2"; 
　　dhtmlHistory.add("complexObject", complexObject); 
　　// cache some values in the history
　　// storage
　　debug("Storing key 'fakeXML' into " + "history storage", false);
　　var fakeXML = 
　　　'＜?xml version="1.0" '
　　　+ 'encoding="ISO-8859-1"?＞'
　　　+ '＜foobar＞'
　　　+ '＜foo-entry/＞'
　　　+ '＜/foobar＞';
　　historyStorage.put("fakeXML", fakeXML);
} 

然后，如果用户离开页面后又通过后退按钮返回该页面，我们可以使用get()方法提取保存的值，或者使用hasKey()方法检查该值是否存在。

window.onload = initialize; 
function initialize() {
　// initialize the DHTML History
　// framework
　dhtmlHistory.initialize(); 
　// subscribe to DHTML history change
　// events
　dhtmlHistory.addListener(historyChange); 
　// 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 data";
　　complexObject.value3 = new Array();
　　complexObject.value3[0] = "array 1";
　　complexObject.value3[1] = "array 2"; 
　　dhtmlHistory.add("complexObject", complexObject); 
　　// cache some values in the history
　　// storage
　　debug("Storing key 'fakeXML' into " + "history storage", false);
　　var fakeXML = '＜?xml version="1.0" ' + 'encoding="ISO-8859-1"?＞'
　　　+ '＜foobar＞' + '＜foo-entry/＞' + '＜/foobar＞';
　　historyStorage.put("fakeXML", fakeXML);
　} 
　// retrieve our values from the history
　// storage
　var savedXML = historyStorage.get("fakeXML");
　savedXML = prettyPrintXml(savedXML);
　var hasKey = historyStorage.hasKey("fakeXML");
　var message = "historyStorage.hasKey('fakeXML')="
　　　+ hasKey + "＜br＞"
　　　+ "historyStorage.get('fakeXML')=＜br＞"
　　　+ savedXML;
　debug(message, false);
} 

prettyPrintXml()是一个定义在完整示例源代码中的实用方法；此函数准备在web页面中显示以便用于调试的简单XML。

请注意，相关数据只在该页面的历史记录中进行持久化；如果浏览器被关闭，或者用户打开一个新窗口并再次键入AJAX应用程序的地址，则该历史记录数据对于新的Web页面不可用。历史记录数据只有在用到后退或前进按钮时才被持久化，当用户关闭浏览器或清空缓存的时候就会消失。如果想真正长期持久化，请参阅Ajax MAssive Storage System (AMASS)。

我们的简单示例已经完成。