中国站长_站,为中文网站提供动力
prettyPrintXml()是一个定义在完整示例源代码中的实用方法;此函数准备在web页面中显示以便用于调试的简单XML。
中国.站.长站
请注意,相关数据只在该页面的历史记录中进行持久化;如果浏览器被关闭,或者用户打开一个新窗口并再次键入AJAX应用程序的地址,则该历史记录数据对于新的Web页面不可用。历史记录数据只有在用到后退或前进按钮时才被持久化,当用户关闭浏览器或清空缓存的时候就会消失。如果想真正长期持久化,请参阅Ajax MAssive Storage System (AMASS)。
中国.站长站
我们的简单示例已经完成。 Chinaz.com
示例2:O'Reilly Mail
Chinaz_com
我们的第二个例子是一个简单的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()方法保存和检索地址簿:
Chinaz@com
以下为引用的内容:
/** 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);
Www@Chinaz@com
// 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'"];
Chinaz^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"); } 中.国.站长站
|
Chinaz~com
处理历史记录变化的代码也很简单。在下面的源代码中,无论用户按后退还是前进按钮,都将调用handleHistoryChange。使用O'Reilly Mail定义的displayLocation实用方法,我们可得到newLocation并使用它将我们的用户界面更新到正确的状态。 Chinaz
以下为引用的内容:
/** 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"; }
Www~Chinaz~com
// 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);
Chinaz@com
// 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 = ""; } }
Chinaz
// 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"); } Www_Chinaz_com
// 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>"; }
Chinaz@com
// 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; } Chinaz~com
|
Www@Chinaz@com
结束语 中国.站长站
现在我们已经了解了如何使用RSH API来使AJAX应用程序支持书签以及后退和前进按钮,并提供了示例代码,您可参考该示例来创建自己的应用程序。希望您能利用书签和历史记录的支持来增强AJAX应用程序。 中国.站长站
文章整理:西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!