AJAX tips: how to deal with bookmarks and flip button, ajax tips

AJAX tips: how to deal with bookmarks and flip button, ajax tips

This article provides an open-source JavaScript library that provides the ability to add bookmarks and return buttons to AJAX applications. After learning this tutorial, developers will be able to obtain a solution to the problems encountered in the development of AJAX applications. This feature is not even provided by Google Maps and Gmail: it provides a powerful, the available bookmarks and the forward and backward buttons act the same way as other WEB applications.

AJAX "How to Deal with bookmarks and rollback buttons" describes the serious problems encountered by the AJAX application in developing the bookmarks and rollback button functions. An open-source framework that can solve the above problems, it also provides a real and simple history database and several running examples.

This article describes the important findings provided by this framework in two parts: first, a hidden HTML form is used to cache a large amount of Temporary Information on the client. These caches provide powerful support for webpage navigation. Secondly, a hidden IFrame and hyperlink are used to capture and record historical events of the browser and provide support for the rollback button and forward button. The above two technologies are packaged in a simple JavaScript library for simple development.

Problem: bookmarks and rollback buttons work very well in traditional multi-page Web applications. When a user browses a website, the address bar record of the browser is updated with the new URLs. These records can be copied to an email or bookmarks for future use. The rollback and Forward buttons help you flip forward or backward in the web page that you have browsed.

AJAX applications are different. They are complex programs running on a web page. Browsers are not made for such programs-these programs are in the past, and you need to refresh the entire page every time you click the mouse.

In AJAX software similar to Gmail, the address bar of the browser remains unchanged when the user selects the function and changes the state of the program, which makes bookmarks unavailable in such programs. In the future, if the user presses the "back" button to cancel the previous action, and the browser and application separation will surprise the user.

Solution: the open-source Really Simply History (RSH) framework can be used to solve the above problems. It provides the AJAX application with the ability to bookmarks and control the "back" and "Forward" buttons. RSH is still in Beta status. It can work in Firefox 1.0, Netscape 7 +, Internet Explorer 6 +, and other browsers. Currently, Safari is not supported. For details, refer to: Coding heaven: Safari: Impossible DHTML history.

There are several types of AJAX frameworks that currently support bookmarks and access history. However, these frameworks currently have several major bugs due to different implementation methods. In the future, many AJAX frameworks, such as Backbase and Dojo, will integrate historical browsing functions. These frameworks use completely different programming models for AJAX applications, forces programmers to use completely different methods to implement the historical browsing function.

Instead, 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 functional conflicts with other frameworks.

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

The DhtmlHistory class abstracts historical browsing records for AJAX applications. Add () events on the AJAX page to the browser to save the specified address and related historical data. The DhtmlHistory class uses a Hash connection to update the current URL of the browser, for example, # new-location. It also associates historical data with new URLs. The AJAX application registers itself as a listener for historical browsing. When you use the "Forward" and "back" buttons to browse, the historical browsing time is triggered and add () is called () method to provide a new address to the browser and save historical data.

Class 2: HistoryStorage allows programmers to save any historical browsing data. In a normal webpage, when a user browses a new website, the browser uninstalls and clears all programs and JavaScript status on the current webpage. If the user returns, all data is lost. The HsitoryStorage class provides APIs with Hash tables to solve such problems through put (), get (), hasKey (), and other methods. The preceding method allows programmers to save arbitrary data when a user leaves the web page. When a user presses the "back" button to return the data again, the historical data can be accessed through the HistoryStorage class. At first, we realized this by using hidden form fields, because the browser automatically saves the field values in a form, even when the user leaves the webpage.

Example: start with a simple example:

First, the webpage that requires the RSH framework must contain the dhtmlHistory. js Tutorial:

Src = "../framework/dhtmlHistory. js">

The DHTML history application contains the blance.html file in the same directory. This file is automatically bound by the RSH framework and needs to be used by IE. As mentioned earlier, RSH uses a hidden Iframe to save and add changes to IE browsers. This iframeameindicates that a specific file location can work normally. this parameter is "blank.html.

The RSH framework creates a global object named dhtmlHistory, which is the entry point for controlling browser history browsing records. The first step is to initialize the dhtmlHistory object after the webpage is loaded.

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

Then, programmers subscribe to changes in historical browsing events using the dhtmlHistory. addListener () method. This method uses a JavaScript callback function. When a history browsing event is recorded, this function receives two parameters. The new address of the webpage 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 intuitive. When you browse a new web page, use one method to receive newLocation. Other historyData can be appended 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 () method used above is a tool method used to print messages to webpages. The second parameter is Boolean. If it is set to true, the original information will be clear when the new message is printed.

Add () method. Add a historical event that contains the new address, such as "edit: SomePage". It also provides an optional historyDate value 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] = & iexcl; ° array 2 & iexcl; ±;
DhtmlHistory. add ("complexObject ",
ComplexObject );

When add () is executed, the new address is displayed as a link in the URL address bar of the browser. For example, in the AJAX web page, the current address is: http://codinginparadise.org/my_ajax_app. after add ("helloworld", "Hello World Data"), the user will see the following address in the browser URL address bar: http://codinginparadise.org/my_ajax_app#helloworld

You can add bookmarks to this page. If you later use the bookmarks, the AJAX application can read the: # helloworld value and use it to initialize the webpage. The RSH framework transparently encodes and decodes URL values.

HistoryData is useful for storing complex states. This is an optional value. It can be any type of JavaScript, such as numbers, strings, and objects. An example of using this function is in a web character editor if the user leaves the current web page. When the user rolls back, the browser returns the object to the historical browsing change listener.

Developers can provide historyData with nested objects and complex JavaScript Objects represented by arrays. However, the DOM object and the script object XMLHttpRequest supported by the browser are not saved. Note: historyData is not extended along with bookmarks. When the browser is closed, the browser cache is cleared, and the user clears historical records, it disappears.

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