AJAX tips: how to deal with bookmarks and backend buttons

This article will show an open-source JavaScript library that provides bookmarks and back-button support for AJAX applications. After learning this tutorial, developers will be able to get a solution to an AJAX problem (even Google Maps and Gmail do not provide this solution now ): A powerful and available bookmarkdonefile and forward-backward function, and its operation behavior is the same as that of other Web applications.

This article will describe the serious problems that AJAX applications face when using bookmarks and backend buttons. It will show the Really Simple History (RSH) Library-an open-source framework that can solve the above problems, and provides several running examples.

The main invention of this framework presented in this article is divided into two parts. First, a hidden HTML form is used to cache client information of a large number of short-term sessions. This cache function provides powerful support for page navigation. The second is the combination of Hyperlink anchor and hidden Iframe. They are embedded with the back and forward buttons to intercept and record browser history events. The above two technologies are encapsulated in a simple JavaScript library to simplify development.

　　Problem

Bookmarks and backend buttons run very well in traditional multi-page Web applications. When a user browses a web site, the address bar record of the browser is updated with the new URL. These records can be pasted into an email or bookmarks for future use. The back and forward buttons can also be operated normally, allowing you to flip forward or backward in the accessed page.

However, AJAX applications are different. They are complex programs running on a single Web page. Browsers are not built for these types of applications-these Web applications are outdated and they need to refresh the entire page every time you click the mouse.

In this kind of Gmail-like AJAX software, the address bar of the browser remains unchanged when the user selects the function and changes the state of the program, which makes it impossible to use bookmarks in a specific application view. In addition, if you press the "back" button to "undo" the previous operation, they will be surprised to find that the browser will completely leave the Web page of the application.

　　Solution

The open-source RSH framework can solve these problems. It provides AJAX applications with the ability to bookmark and control the backward and forward buttons. RSH is currently in Beta stage and can run on Firefox 1.0, Netscape 7 +, Internet Explorer 6 +, and other browsers. Safari is not yet supported.

Currently, several AJAX frameworks are helpful for bookmarking and history. However, these frameworks currently have several major bugs caused by implementation. In addition, many AJAX history frameworks are bound to large libraries, such as Backbase and Dojo. These frameworks introduce completely different programming models for AJAX applications, forces developers to use a new way to obtain the history function.

In contrast, RSH is a simple module that can be included in the existing AJAX system. In addition, the RSH library uses some techniques to avoid bugs that affect other history frameworks.

The RSH framework consists of two JavaScript classes: DhtmlHistory and HistoryStorage.

The DhtmlHistory class provides abstract history for AJAX applications. The AJAX page uses the add () method to add history events to the browser, specifying the new address and related history data. The DhtmlHistory class uses an anchor Hash (for example, # new-location) to update the current URL of the browser, and associates historical data with the new URL. The AJAX application registers itself as a listener for history. When you use the back and forward buttons for browsing, the history event is triggered to provide a new location for the browser and add () call any history data stored together.

Type 2: HistoryStorage, which allows developers to save any number of stored historical records. On a common Web page, When you navigate to a new web site, the browser uninstalls and clears all applications and JavaScript states on the Web page. If you use the back button to return, all data is lost. The HistoryStorage class uses an API that contains simple hash methods (such as put (), get (), and hasKey () to solve such problems. The above method allows developers to save any amount of data after the user leaves the Web page. When the user presses the back button to return the data again, the historical data can be accessed through the HistoryStorage class. Internally, we implement this function by using hidden form fields, because the browser automatically saves the values in the form fields, even when the user leaves the web page.

　　Example

Let's start with a simple example.

First, any page that needs to use the RSH framework must contain the dhtmlHistory. js script:

<! -- Load the Really Simple History Framework --> <Script type = "text/javascript" Src = "../framework/dhtmlHistory. js"> </Script>

DHTML history applications must also include the blance.html file in the same directory as the AJAX web page. This file is packaged with the RSH framework and is required for Internet Explorer. By the way, RSH uses a hidden Iframe to track and add historical record changes of Internet operators. In this iframepattern, we specify a specific file location to work normally. Here, we will see "blance.html.

The RSH framework creates a global object named dhtmlHistory, which is the entry point for manipulating browser history records. The first step to use dhtmlHistory is to initialize the dhtmlHistory object after the Web page is loaded:

Window. onload = initialize; Function initialize (){ // Initialize the DHTML History // Framework DhtmlHistory. initialize ();

Then, developers use the dhtmlHistory. addListener () method to subscribe to historical change events. This method has a JavaScript callback function. When a DHTML history change event occurs, the function receives two parameters: New Page location and any optional history data that can be associated with the event:

Window. onload = initialize; Function initialize (){ // Initialize the DHTML History // Framework DhtmlHistory. initialize (); // Subscribe to DHTML history change // Events DhtmlHistory. addListener (historyChange );

The historyChange () method is simple. This function receives newLocation and any optional historyData associated with the event after the user navigating to a new location.

/** Our callback to receive history change Events .*/ Function historyChange (newLocation, HistoryData ){ Debug ("A history change has occurred :" + "NewLocation =" + newLocation + ", HistoryData =" + historyData, True ); }

The debug () method used above is a practical function defined in the sample source file. It is packaged with the complete example for download. Debug () is only used to print messages to the web page. The second Boolean parameter (true in the preceding Code) controls whether to clear all original messages before printing new debugging messages.

Developers use the add () method to add historical events. To add a history event, you need to specify a new address for the change of the history, such as edit: SomePage, and provide an optional historyData value that is saved with the 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 );

After add () is called, the new address is immediately displayed as an anchor (link address) in the URL address bar of the browser. For example, after calling dhtmlHistory. add ("helloworld", "Hello World Data") on the Ajax Web page with the address http://codinginparadise.org/my_ajax_app, you will see the following address in the URL address bar of your browser:

Http://codinginparadise.org/my_ajax_app#helloworld

Then, you can make the page a bookmarkdonefile. If you use this bookmarkdonefile later, the AJAX application can read the # helloworld value and use it to initialize the Web page. The address value after the hash is the URL address that can be transparently encoded and decoded by the RSH framework.


HistoryData is very useful. It saves AJAX address changes that are more complex than simple URLs. This is an optional value, which can be any JavaScript type, such as Number, String, or Object. An example of using the Save function is to save all the text in a Rich Text Editor (for example, when the user leaves the current page ). When the user returns to this address, the browser will return this object to the history change listener.

Developers can provide complete JavaScript objects with nested objects and arrays representing Complex States for historyData. JSON (JavaScript Object Notation) supports all historical data, including simple data type and null type. However, DOM objects and browser objects (such as XMLHttpRequest) written with scripts are not saved. Please note that history