AJAX: How to Handle Bookmarks and Back Buttons
Pages: 1, 2, 3, 4, 5, 6

A developer adds history events using the add() method. Adding a history event involves specifying a new location for the history change, such as "edit:SomePage", as well as providing an optional historyData value that will be stored with this event:

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);

Immediately after add() is called, the new location will be shown to the user in the browser's URL toolbar as an anchor value. For example, after calling dhtmlHistory.add("helloworld", "Hello World Data") for an AJAX web page that lives at http://codinginparadise.org/my_ajax_app, the user would see the following in their browser's URL toolbar:

http://codinginparadise.org/my_ajax_app#helloworld

They can then bookmark this page; later, if they use this bookmark, your AJAX application can read the #helloworld value and use it to initialize the web page. Location values after the hash are URL encoded and decoded transparently by the Really Simple History framework.

historyData is useful for saving more complicated state with an AJAX location change than what can easily fit on a URL. It is an optional value that can be any JavaScript type, such as a Number, String, or Object. One example use of this is saving all of the text in a rich text editor, for example, if the user navigates away from the page. When a user navigates back to this location, the browser will return the object to the history change listener.

Developers can provide a full JavaScript object for historyData, with nested objects and arrays representing complex state; whatever is allowed by JSON (JavaScript Object Notation) is allowed in the history data, including simple data types and the null type. References to DOM objects and scriptable browser objects like XMLHttpRequest, however, are not saved. Note that historyData is not persisted with bookmarks, and disappears if the browser is closed, if the browser's cache is cleared, or if the user erases the history.

The last step in working with dhtmlHistory is the isFirstLoad() method. In some browsers, if you navigate to a web page, jump to a different page, and then press the back button to return to the initial site, the first page will completely reload and fire an onload event. This can create havoc with code that wants to initialize the page in a certain way the first time it loads, but not on subsequent reloads of the page. The isFirstLoad() method makes it possible to differentiate between the very first time a web page has loaded versus a false load event fired if the user navigates back to a web page saved in his or her browser's history.

Pages: 1, 2, 3, 4, 5, 6

Next Page