AJAX usage tips: How to handle bookmarks and page turning buttons

This article provides an open source javaScript library, which provides the function of adding bookmarks and back buttons to Ajax applications. After following this tutorial, developers will be able to get a solution to the problem of developing AJAX applications, a feature that even Google Maps and Gmail do not currently provide: providing a powerful, usable bookmark and forward

This article provides an open source javaScript library, which provides the function of adding bookmarks and back buttons to Ajax applications. After completing this tutorial, developers will be able to obtain a solution to the problem of developing AJAX applications, a feature that even Google Maps and Gmail do not currently provide: providing a powerful, usable bookmark and forward and back buttons, The same behavior as other WEB applications.

AJAX "How to deal with bookmarks and back buttons" explains the serious problems encountered in developing bookmarks and back button functions in AJAX applications; an open source framework that can solve the above problems and provide a real and simple history library , and several running examples are provided.

This article explains the important findings provided by this framework in two parts: First, a hidden HTML form is used to cache a large amount of transient information on the client side. These caches provide powerful support for web page navigation. Secondly, a hidden IFrame and hyperlink are used to intercept and record the browser's historical events to provide support for the back button and the forward button. Both of the above technologies are packaged in a simple Javascript library to achieve simple development.

Problem: Bookmarks and back buttons work perfectly well in traditional multi-page web applications. As the user browses the website, the browser's address bar records are updated with new URLs, and these records can be copied to email or bookmarks for later use. Back and forward buttons help the user to flip forward or backward through the web pages he has browsed.

AJAX applications are different, they are complex programs that run in a web page. Browsers weren't made for this type of program—this type of program was from the past, requiring a full page refresh on every mouse click.

In AJAX software like Gmail, the browser's address bar remains unchanged when the user selects functions and changes the program state, which makes bookmarks unusable in such programs. In the future, users will be surprised if the browser and application are separated if they press the "back" button to undo their last action.

Solution: The open source Really Simply History (RSH) framework can be used to solve the above problems, providing bookmarks and controlling the "Back" and "Forward" buttons for AJAX applications. RSH is still in Beta status and can work on Firefox 1.0, Netscape 7, Internet Explorer 6 and other browsers. It does not currently support Safari browser. You can refer to: Coding Paradise: Safari: Impossible DHTML History.

Several types of AJAX frameworks currently support bookmarks and history access issues, but these frameworks currently have several big bugs due to different implementation methods. In the future, many AJAX frameworks, such as Backbase and Dojo, will integrate the history browsing function; these frameworks adopt completely different programming models for AJAX applications, forcing programmers to use completely different ways to implement the history browsing function.

In contrast, RSH is a single module that can be included in an existing AJAX system. In the future, the RSH library will be further improved to avoid conflicts with related functions of other frameworks.

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

The DhtmlHistory class provides an abstraction of browsing history for AJAX applications. AJAX page add() historical browsing record events to the browser, saving the specified new address and related historical data. The DhtmlHistory class uses Hash connection to update the browser's current URL, such as #new-location, and associates historical data with the new URL. The AJAX application registers itself as a listener for historical browsing. When the user uses the "forward" and "back" buttons to browse, the historical browsing time is triggered, and the add() method is called to provide the browser with a new address and save it. historical data.

The second class: HistoryStorage allows programmers to save arbitrary historical browsing data. In an ordinary web page, when the user browses to a new URL, the browser uninstalls and clears all programs and JavaScript status of the current web page. If the user returns, all data is lost. The HsitoryStorage class provides an API with a Hash table to solve this type of problem through put(), get(), hasKey() and other methods. The above method allows programmers to save any data when the user leaves the web page. When the user presses the "Back" button to return, the historical data can be accessed through the HistoryStorage class. We initially did this by using hidden form fields, because the browser automatically saves the value of a form field even when the user navigates away from the page.

Example: Let’s start with a simple example:

First of all, web pages that require the RSH framework need to include the dhtmlHistory.js textbook:

src="../../framework/dhtmlHistory.js"＞

DHTML history application must contain blank.html file in the same directory. This file is automatically bound by the RSH framework and needs to be used by IE browser. As mentioned earlier, RSH uses a hidden Iframe to save and add IE changes. This Iframe needs to specify an actual file location to work properly, which is blank.html.

RSH framework creates a global object called dhtmlHistory, which is the entry point for controlling browser history browsing records. The first step 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, the programmer uses the dhtmlHistory.addListener() method to subscribe to changes in history browsing events. This method uses a JavaScript callback function that receives two parameters when a historical browsing event occurs. The new address of the page and any historical data should be associated with this event:

window.onload = initialize;
function initialize() {
// initialize the DHTML History
// framework
dhtmlHistory.initialize();
// subscribe to DHTML history change
// events
dhtmlHistory.initialize();

The historyChange() method is very intuitive. When the user browses to a new web page, a method is used to receive newLocation. At the same time, other historyData can be optionally attached to this event:

/**Our callback to receive history change 
events.*/
function historyChange(newLocation,
historyData) {
debug("A history change has occurred: "
"newLocation=" newLocation
" , historyData=" historyData,
true);
}

The Debug() used above is a tool method used to simply print messages to the web page. The second parameter is of type Boolean. If set to true, the original information will be clear when the new message is printed.

Add() method. Adds a history event containing a new address, such as "edit:SomePage", and also provides an optional historyDate value to be stored with the event.

window.onload = initialize;
function initialize() {
// initialize the DHTML History
// framework
dhtmlHistory.initialize();
// subscribe to DHTML history change
// events
dhtmlHistory.initialize();
// 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 value";
complexObject.value3 = new Array();
complexObject.value3 = new Array() ;
complexObject.value3[1] = ¡°array 2¡±;
dhtmlHistory.add("complexObject",
complexObject);

At the same time after add() is executed, the new address will be displayed in the browser's URL address bar as a link address. For example: the current address in the AJAX web page is: http://codinginparadise.org/my_ajax_app. After executing: dhtmlHistory.add("helloworld", "Hello World Data"), the user will see it in the browser URL address bar. The following address: http://codinginparadise.org/my_ajax_app#helloworld

This is where the user can bookmark this page. If the user uses this bookmark later, the AJAX application can read the #helloworld value and use it to initialize the web page. The RSH framework transparently encodes and decodes URL address values.

historyData is useful when saving more complex states. This is an optional value, which can be any JavaScript type, such as numbers, strings, objects, etc. An example of using this feature is in a web page character editor, if the user leaves the current web page. When the user logs back, the browser will return the object to the historical browsing change listener.

Developers can provide historyData with complex JavaScript objects represented by nested objects and arrays. However, DOM objects and the script object xmlHttPRequest supported by the browser are not saved. Note: historyData is not persisted along with the bookmark, it disappears when the browser is closed, the browser cache is cleared and the user clears the history.

Reprinted from: http://www.aspnetjia.com