AJAX技巧：如何处理书签和后退按钮(2)_H5之家 - 中国HTML5教程资源分享第一站

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地址栏中。例如，对地址为的AJAX Web页面调用dhtmlHistory.add("helloworld", "Hello World Data")之后，用户将会在其浏览器URL地址栏中看到如下的地址：

　　#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：

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