AJAX: how to process bookmarks and backend buttons

This article will show an open-source JavaScript library that provides bookmarks and backend buttons for AJAX exploitation programs. After learning this tutorial, developers will be able to get a solution to an AJAX title (even if Google Maps and Gmail

This article will show an open-source JavaScript library that provides bookmarks and backend buttons for AJAX exploitation programs. After learning this tutorial, developers will be able to get a solution to an AJAX title (even Google Maps and Gmail are not currently available to this solution ): A powerful, usable bookmarkdonet and backward-moving function, and its control actions are the same as those of other Web application programs.

This article will discuss the severe titles of AJAX exploitation programs in applying bookmarks and back-up buttons; display the Really Simple History (RSH) Library-an open-source framework that can solve the above titles, and provides several running examples.

The important invention of this framework presented in this article is divided into two parts. The first is a hidden HTML form used to cache client information of a large number of short-term Sessions. this cache function provides strong support for page navigation. The second is the combination of hyperlink anchor and hidden Iframe. they are embedded in the back and forward buttons to intercept and record browser history events. The above two techniques are encapsulated in a simple JavaScript library to simplify development.

Title

The bookmarks and the back button run very well in the traditional multi-page Web application. 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 application. The back and forward buttons can also be properly controlled. Users can flip forward or backward on the visited page.

However, AJAX exploitation programs are different. they are complex programs running on a single Web page. Browsers are not built for such programs-these Web applications have expired, and they need to refresh all the pages each 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 apply bookmarks in a specific view of the application. In addition, if the user presses the "back" button to "undo" the previous hold, they will be surprised to find that the browser will completely leave the Web page of the exploitation program.

Solution

The open-source RSH framework can solve these headers. It provides AJAX exploitation programs with the ability to bookmarks and hold 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 supported yet.

Currently, several AJAX frameworks are helpful for bookmarks and historical record titles. 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 different programming models for AJAX applications, forces developers to apply a brand new method to get 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 records for AJAX applications. The add () method is applied to the AJAX page to add historical events to the browser, specifying the new address and related historical records. The DhtmlHistory class applies an anchor hash (for example, # new-location) to update the current URL of the browser, and associates historical data with the new URL. AJAX uses a program to register itself as a listener for historical records. when the user browses the app back and forward buttons, the history events are triggered to provide a new position for the browser and add () call any history data retained together.

Category 2: HistoryStorage, which allows developers to retain any number of historical data stored in the target. On a common Web page, when you navigate to a new web site, the browser uninstalls and clears all exploitation programs 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 titles. The above method allows developers to retain any number of target 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 applying hidden form fields, because the browser will retain 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 apply the RSH framework must contain the dhtmlHistory. js script:

Reference content is as follows:
<! -- Load the Really Simple
History framework -->
<Script type = "text/javascript"
Src = "../framework/dhtmlHistory. js">
</Script>

The DHTML history exploitation program must also include the blance.html file in the same directory as the AJAX web page. This file is packaged together with the RSH framework and is required for Internet Explorer. By the way, RSH uses a hidden Iframe to track and add historical records of the Internet Erder. this iframe.pdf we specify a specific file location for normal operations. here, it refers to "blance.html.

The RSH framework creates a global object named dhtmlHistory, which is the import point that controls the browser's historical records. The first step of applying dhtmlHistory is to initialize the dhtmlHistory object after the Web page is loaded:

Reference content is as follows:

Window. onload = initialize;

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

Then, the developer applies the dhtmlHistory. addListener () method to subscribe to historical change events. This method has a JavaScript callback function. when a DHTML history change event is generated, the function receives two parameters: New page status and any optional history data that can be associated with the event:

Reference content is as follows:

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 very simple. this function receives newLocation and any optional historyData associated with the event after the user navigating to a new position.

/** 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.

The developer uses the add () method to add historical events. To add a history event, you need to specify a new address for the change, for example, edit: SomePage, and provide an optional historyData value that is retained with the event.

Reference content is as follows:

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