| |
AJAX：如何处理书签和后退按钮 |
|
时间: 2006-05-29 来自：bea |
 |
|
示例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;
} |
您可以下载O'Reilly
Mail源代码。
结束语
现在我们已经了解了如何使用RSH
API来使AJAX应用程序支持书签以及后退和前进按钮，并提供了示例代码，您可参考该示例来创建自己的应用程序。希望您能利用书签和历史记录的支持来增强AJAX应用程序。
|
|
|
|
|
|
|
|
