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

示例2：O'Reilly Mail

我们的第二个例子是一个简单的AJAX电子邮件模拟应用程序的示例，即O'Reilly Mail，它类似于Gmail。O'Reilly Mail描述了如何使用dhtmlHistory类来控制浏览器的历史记录，以及如何使用historyStorage对象来缓存历史记录数据。

O'Reilly Mail用户界面由两部分组成。在页面的左边是一个带有不同电子邮件文件夹和选项的菜单，例如收件箱、草稿箱等。当用户选择了一个菜单项（如收件箱），就用这个菜单项的内容更新右边的页面。在一个现实应用程序中，我们会远程获取并显示选择的信箱内容，不过在O'Reilly Mail中，我们只显示已选择的选项。

O'Reilly Mail使用RSH框架向浏览器历史记录中添加菜单变化并更新地址栏，允许用户利用浏览器的后退和前进按钮为应用程序做收藏书签和跳到上次变化的菜单。

我们添加一个特殊的菜单项——地址簿，以说明如何来使用historyStorage。地址簿是一个由联系人名称和邮件地址组成的JavaScript数组，在一个现实应用程序中，我们会从一台远程服务器取得这个数组。不过，在O'Reilly Mail中，我们在本地创建这个数组，添加几个名称和电子邮件地址，然后将其保存在historyStorage对象中。如果用户离开Web页面后又返回该页面，那么O'Reilly Mail应用程序将重新从缓存检索地址簿，而不是再次联系远程服务器。

我们用initialize()方法保存和检索地址簿：

/** Our function that initializes when the page
is finished loading. */
function initialize() {
// initialize the DHTML History framework
dhtmlHistory.initialize(); 
// add ourselves as a DHTML History listener
dhtmlHistory.addListener(handleHistoryChange); 
// if we haven't retrieved the address book
// yet, grab it and then cache it into our
// history storage
if (window.addressBook == undefined) {
　// Store the address book as a global
　// object.
　// In a real application we would remotely
　// fetch this from a server in the
　// background.
　window.addressBook =
　　["Brad Neuberg 'bkn3@columbia.edu'",
　　"John Doe 'johndoe@example.com'",
　　"Deanna Neuberg 'mom@mom.com'"]; 
　// cache the address book so it exists
　// even if the user leaves the page and
　// then returns with the back button
　historyStorage.put("addressBook", addressBook);
}
else {
　// fetch the cached address book from
　// the history storage
　window.addressBook = historyStorage.get("addressBook");
} 

处理历史记录变化的代码也很简单。在下面的源代码中，无论用户按后退还是前进按钮，都将调用handleHistoryChange。使用O'Reilly Mail定义的displayLocation实用方法，我们可得到newLocation并使用它将我们的用户界面更新到正确的状态。

/** Handles history change events. */
function handleHistoryChange(newLocation, 
historyData) {
　// if there is no location then display
　// the default, which is the inbox
　if (newLocation == "") {
　　newLocation = "section:inbox";
　} 
　// extract the section to display from
　// the location change; newLocation will
　// begin with the word "section:" 
　newLocation = newLocation.replace(/section\:/, ""); 
　// update the browser to respond to this
　// DHTML history change
　displayLocation(newLocation, historyData);
} 
/** Displays the given location in the 
right-hand side content area. */
function displayLocation(newLocation,sectionData) {
　// get the menu element that was selected
　var selectedElement = document.getElementById(newLocation); 
　// clear out the old selected menu item
　var menu = document.getElementById("menu");
　for (var i = 0; i ＜ menu.childNodes.length; i++) {
　　var currentElement = menu.childNodes[i];
　　// see if this is a DOM Element node
　　if (currentElement.nodeType == 1) {
　　　// clear any class name
　　　currentElement.className = "";
　　} 
　} 
　// cause the new selected menu item to
　// appear differently in the UI
　selectedElement.className = "selected"; 
　// display the new section in the right-hand
　// side of the screen; determine what 
　// our sectionData is 
　// display the address book differently by
　// using our local address data we cached
　// earlier
　if (newLocation == "addressbook") {
　　// format and display the address book
　　sectionData = "＜p＞Your addressbook:＜/p＞";
　　sectionData += "＜ul＞"; 
　　// fetch the address book from the cache
　　// if we don't have it yet
　　if (window.addressBook == undefined) {
　　　window.addressBook = historyStorage.get("addressBook");
　　} 
　　// format the address book for display
　　for (var i = 0; i ＜ window.addressBook.length; i++) {
　　　sectionData += "＜li＞"
　　　　+ window.addressBook[i]
　　　　+ "＜/li＞"; 
　　} 
　　sectionData += "＜/ul＞";
　} 
　// If there is no sectionData, then 
　// remotely retrieve it; in this example
　// we use fake data for everything but the
　// address book
　if (sectionData == null) {
　　// in a real application we would remotely
　　// fetch this section's content
　　sectionData = "＜p＞This is section: " 
+ selectedElement.innerHTML + "＜/p＞"; 
　} 
　// update the content's title and main text
　var contentTitle = document.getElementById("content-title");
　var contentValue = document.getElementById("content-value");
　contentTitle.innerHTML = selectedElement.innerHTML;
　contentValue.innerHTML = sectionData;
} 

结束语

现在我们已经了解了如何使用RSH API来使AJAX应用程序支持书签以及后退和前进按钮，并提供了示例代码，您可参考该示例来创建自己的应用程序。希望您能利用书签和历史记录的支持来增强AJAX应用程序。