How Ajax handles bookmarks and flip-through buttons

ajax| page | Flip Button | bookmark

This article provides an open source JavaScript library that provides the ability to add bookmarks and fallback buttons to AJAX applications. 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.

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.

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.

question :

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 this type of program--a program that used to refresh the entire page each time the mouse clicked.

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 function of 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:

<!--Load the really Simple History Framework--> <script type= "Text/javascript" Src= ". /.. /framework/dhtmlhistory.js "> </script>

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.

Window.onload = Initialize; function Initialize () { Initialize the DHTML History Framework Dhtmlhistory.initialize ();

The programmer then uses the Dhtmlhistory.addlistener () method to subscribe to changes to historical browsing events. This method uses a JavaScript callback function that receives two parameters when a record history browsing event occurs. The new address of the Web 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 intuitive, using a method to receive newlocation when a user browses to a new page, while other historydata can optionally attach 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 for simply printing messages to a Web page. The second argument is Boolean, and if set to true, the original information will be clear when the new message is printed.

Add () method. Adds a history event that contains a new address, such as "Edit:somepage", and also provides optional historydate values that are stored with the event.

window.onload = initialize; Function Initialize () { //Initialize the DHTML History //Framework Dhtmlhistory.initialize (); //Subscribe to DHTML history change //Events Dhtmlhistory.initialize (); The //If this is the the "a" 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 '" "; Complexobject.value2 = "This is the second value"; Complexobject.value3 = new Array (); Complexobject.value3 = new Array (); Complexobject.value3[1] =¡°array 2¡±; Dhtmlhistory.add ("Complexobject", Complexobject);

When add () is executed, the new address as a link address is displayed in the browser's URL address bar. For example: The current address in an AJAX Web page is: Http://codinginparadise.org/my_ajax_app, finished: Dhtmlhistory.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

This is the user can bookmark this page, if the user later use this bookmark, AJAX applications can read: #helloworld值并用它来初始化网页. The RSH framework transparently encodes and decodes URL address values.

Historydata is useful when saving more complex states. This is an optional value, he can be any type of JavaScript, 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 page. When the user is rolled back, the browser returns the object to the history viewer change listener.

Developers can provide Historydata with nested objects and complex JavaScript objects represented by arrays. However, Dom objects and browser-supported script objects are XMLHttpRequest and are not saved. Note: Historydata is not persisted with the bookmark, and when the browser is closed, the browser cache is cleared and the user clears the history, he disappears.