用Ajax来控制书签和回退按钮

/** 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;
}

　　演示(Demo)O'Reilly Mail或者下载(download)O'Reilly Mail的源代码。

　　结束语

　　你现在已经学习了使用Really Simple History API 让你的AJAX应用响应书签和前进回退按钮，而且有代码可以作为创建你自己的应用的素材。我热切地期待你利用书签和历史的支持完成你的AJAX创造。