AJAX：如何处理书签和后退按钮(1)(3)

window.onload = initialize;
    
function initialize() {
  // initialize the DHTML History
  // framework
  dhtmlHistory.initialize();
  
  // subscribe to DHTML history change
  // events
  dhtmlHistory.addListener(historyChange);
      
  // if this is the first time we have
  // loaded the page...
  if (dhtmlHistory.isFirstLoad()) {
    debug("Adding values to browser "
          + "history", false);
    // start adding history
    dhtmlHistory.add("helloworld", 
                     "Hello World Data");
    dhtmlHistory.add("foobar", 33);
    dhtmlHistory.add("boobah", true);
      
    var complexObject = new Object();
    complexObject.value1 = 
                  "This is the first value";
    complexObject.value2 = 
                  "This is the second data";
    complexObject.value3 = new Array();
    complexObject.value3[0] = "array 1";
    complexObject.value3[1] = "array 2";
      
    dhtmlHistory.add("complexObject", 
                     complexObject);
                     
    // cache some values in the history
    // storage
    debug("Storing key 'fakeXML' into " 
          + "history storage", false);
    var fakeXML = 
      ''
      +      ''
      +         ''
      +      '';
    historyStorage.put("fakeXML", fakeXML);
  } 
  
  // retrieve our values from the history
  // storage
  var savedXML = 
              historyStorage.get("fakeXML");
  savedXML = prettyPrintXml(savedXML);
  var hasKey = 
           historyStorage.hasKey("fakeXML");
  var message =
    "historyStorage.hasKey('fakeXML')="
    + hasKey + "
"
    + "historyStorage.get('fakeXML')=
"
    + savedXML;
  debug(message, false);
}

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

/** 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 = "
Your addressbook:
";
      sectionData += "
";
      
      // 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 += "
"
                        + window.addressBook[i]
                        + "";                  
      }
      
      sectionData += "
";
   }
   
   // 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 = "
This is section: " 
         + selectedElement.innerHTML + "
";  
   }
   
   // 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;
}