| |
AJAX：如何处理书签和后退按钮 |
|
时间: 2006-05-29 来自：bea |
 |
|
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)。
我们的简单示例已经完成。您可以下载完整源代码。
|
|
|
|
|
|
|
|
