Ajax usage Tips: How to handle Bookmarks and page-flipping buttons

This article provides an open source JavaScript library that provides the ability to add bookmarks and fallback buttons to AJAX applications. After completing this tutorial, developers will be able to get a solution to the problems encountered in developing AJAX applications that even Google Maps and Gmail do not now offer: A powerful, available bookmark and forward rollback button, like other web apps.

Ajax "How to handle Bookmarks and rollback buttons" illustrates a serious problem with Ajax application development bookmarks and fallback button features, an open source framework that addresses the above issues, and provides a real, simple history library, as well as several running examples.

This article presents the important findings of this framework in two parts: first, a hidden HTML form is used to cache a large amount of ephemeral information on the client. These caches provide strong support for Web navigation. Second, a hidden iframe and hyperlink used to intercept and record the browser's historical events provide support for fallback buttons and forward buttons. All two of these technologies are packaged in a simple JavaScript library to achieve simple development.

Problem: Bookmarks and fallback buttons work very well in traditional, multiple-page Web applications. When the user browses the Web site, the browser's address bar record is updated with the new URLs, which can be copied to the email or bookmark for later use. The fallback and forward buttons help the user to flip forward or backward through the pages he browses.

AJAX applications are different, they are complex programs that run on a Web page. Browsers are not made for such programs ——— such programs are the past and need to refresh the entire page each time the mouse clicks.

In Gmail-like Ajax software, the browser's address bar stays the same when users select features and change the state of the program, making bookmarks unusable in such programs. In the future, users will be surprised if the user presses the fallback button to undo the last action, and the browser and application are separated.

Solution: The open source really Simply History (RSH) framework can be used to address the above problems, provide bookmarks for AJAX applications and control the "fallback" and "forward" buttons. RSH is currently in beta and can work in browsers such as Firefox 1.0, Netscape 7+,internet Explorer 6+, and does not currently support safari browsers. can refer to: Coding Paradise: Safari: Impossible DHTML History.

There are several types of AJAX frameworks that currently support bookmarks and historical access issues, but these frameworks have several major bugs because of the way they are implemented. In the future, many Ajax frameworks, such as Backbase and Dojo, will integrate historical browsing capabilities, which use a completely different programming model for AJAX applications, forcing programmers to use a completely different approach to historical browsing.

Instead, RSH is a single module that can be included in an existing AJAX system. In the future, the RSH library will further improve the avoidance of related functional conflicts with other frameworks.

The RSH historical framework consists of two JavaScript classes: Dhtmlhistory and Historystorage.

The Dhtmlhistory class provides an abstraction of historical browsing records for AJAX applications. AJAX page Add () History browsing logs events to the browser, saving the specified new address and related historical data. The Dhtmlhistory class uses a hash connection to update the current URL of the browser, such as: #new-location, while associating historical data with a new URL. The AJAX application registers itself as a history-browsing listener, and when the user browses using the "forward" fallback button, the history browsing time is triggered, the Add () method is invoked to provide a new address to the browser, and the historical data is saved.

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 unloads and clears all the programs and JavaScript state of the current page, and if the user returns, all the data is lost. The Hsitorystorage class provides APIs with a hash table to solve such problems by put (), get (), Haskey (), and so on. The above method allows the programmer to save arbitrary data when the user leaves the page, and the history data can be accessed through the Historystorage class when the user presses the rollback button to return. We started by using hidden form fields, because browsers automatically save field values in a form, even when the user leaves the page.

Example: Let's start with a simple example:

First, you need to include dhtmlhistory.js textbooks in a Web page that requires a RSH framework:

The following are the referenced contents: Src= ". /.. /framework/dhtmlhistory.js ">

The DHTML history application must contain the blank.html file under the sibling directory. This file is automatically bound by the RSH framework and needs to be used by IE browsers. As mentioned earlier, RSH uses a hidden iframe to save and increase the change in IE browsers. This iframe needs to specify an actual file location to work properly, which is blank.html.

The 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 finishes loading.

The following are the referenced contents: Window.onload = Initialize; function Initialize () { Initialize the DHTML History Framework Dhtmlhistory.initialize ();

Total 2 page: previous 1 [2] Next page