AJax技术

AJAX技巧:如何处理书签和后退按钮(4)

字号+ 作者:H5之家 来源:H5之家 2015-11-11 08:22 我要评论( )

/** Handles history change events. */ function handleHistoryChange(newLocation, historyData) { // if there is no location then display // the default, which is the inbox if (newLocation == "") { newL

/** 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应用程序。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评