本篇文章提供了一個開源javaScript庫，它提供了給Ajax應用程序中添加書簽和會退按鈕的功能。在學習完這個教程后，開發者將能夠對開發AJAX應用碰到的問題獲得一個解決方案，這個特性甚至Google Maps 和 Gmail 現在都不提供：提供一個強大的，可用的書簽和前進回退按鈕，如同其他的WEB應用一樣的行為。

AJAX“如何處理書簽和回退按鈕”闡述了AJAX應用程序開發書簽和回退按鈕功能碰到的嚴重的問題；可以解決以上問題的一個開源框架，并提供真實、簡單的歷史記錄庫，還提供了幾個運行中的例子。

本文把這個框架提供的重要發現分兩個部分來說明：首先，一個隱藏的HTML表單用來緩存大量短暫的在客戶端信息。這些緩存為網頁導航提供了強大的支持。其次，一個隱藏的IFrame和超級鏈接用來截取和記錄瀏覽器的歷史事件提供回退按鈕和向前按鈕的支持。以上兩個技術都是通過包裝在一個簡單的Javascript庫中來實現簡單開發。

問題：書簽和回退按鈕在傳統的多頁面的Web應用程序中工作的非常好。當用戶瀏覽網站的時候，瀏覽器的地址欄記錄隨新的URLs更新，這些記錄可以拷貝到email 或者 書簽中供以后使用。回退和前進按鈕可以幫助用戶在他瀏覽過的網頁中向前或向后翻動。

AJAX 應用程序卻是不同的，他們是運行在一個網頁中的復雜程序。瀏覽器并不是為這類程序制作的———這類程序是過去的，在每次鼠標點擊的時候需要重新刷新整個頁面。

在類似Gmail的AJAX軟件中，瀏覽器的地址欄在用戶選擇功能和改變程序狀態的時候保持不變，這讓書簽在這類程序中無法使用。未來，如果用戶按下“回退”按鈕來撤銷上次的動作，而瀏覽器和應用程序分離的狀況會讓用戶很吃驚。

解決方案：開源Really Simply History (RSH)框架可以用來解決上面的問題，為AJAX應用程序提供書簽和控制“回退”、“向前”按鈕的功能。RSH 目前還是Beta 狀態，可以在Firefox 1.0 , Netscape 7+,Internet Explorer 6+等瀏覽器上工作，目前還不支持Safari瀏覽器。可以參考：編碼天堂：Safari:不可能的DHTML歷史記錄。

有幾類AJAX框架目前也支持書簽和歷史訪問的問題，但這些框架因為實現方式的不同，目前都有幾個大Bug。未來，很多AJAX框架，比如Backbase 和 Dojo 將會整合歷史瀏覽的功能；這些框架為AJAX應用程序采用完全不同的編程模型，強迫程序員使用完全不同的方式來實現歷史瀏覽的功能。

相反，RSH 是一個可以包含在現有AJAX系統的單模塊。未來，RSH庫會進一步改進避免和其他框架的相關功能沖突。

RSH 歷史框架由兩個JavaScript類組成：DhtmlHistory 和 HistoryStorage。

DhtmlHistory 類為AJAX應用程序提供歷史瀏覽記錄的抽象。AJAX 頁面 add() 歷史瀏覽記錄事件到瀏覽器，保存指定新的地址和相關的歷史數據。DhtmlHistory 類使用Hash連接更新瀏覽器當前的URL，比如：#new-location，同時把歷史數據和新的URL關聯。AJAX 應用程序把自己注冊為歷史瀏覽的監聽器，當用戶使用 “前進”“回退”按鈕來瀏覽時，歷史瀏覽時間被觸發，調用 add() 方法來提供給瀏覽器新的地址，并保存歷史數據。

第二個類: HistoryStorage允許程序員保存任意的歷史瀏覽數據。在普通的網頁中，當用戶瀏覽到一個新的網址，瀏覽器卸載并清除當前網頁所有的程序和JavaScript狀態，如果用戶返回時，所有的數據都丟失了。HsitoryStorage 類提供帶有Hash表的API通過 put() , get() , hasKey()　等方法來解決這類問題。上面的方法允許程序員保存用戶離開網頁時的任意數據，當用戶按“回退”按鈕重新返回時，歷史數據可以通過HistoryStorage類來訪問。我們起初通過使用隱藏的表單字段來實現，因為瀏覽器自動保存一個表單中字段值，甚至用戶離開網頁的時候也如此。

例子：先從一個簡單的例子開始吧：

首先，需要RSH框架的網頁中需要包含 dhtmlHistory.js 教本：

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

DHTML 歷史應用程序必須在同級目錄下包含blank.html文件。這個文件自動被RSH框架綁定需要被IE瀏覽器使用。正如剛才提到的，RSH使用一個隱藏的Iframe來保存和增加IE瀏覽器的改變。這個Iframe需要指定一個實際的文件位置才能正常工作，這就是blank.html。

RSH 框架創建了一個叫dhtmlHistory的全局對象，這是控制瀏覽器歷史瀏覽記錄的入口點。第一步在網頁完成裝載后需要初始化 dhtmlHistory 對象。

window.onload = initialize; 
function initialize() { 
// initialize the DHTML History 
// framework 
dhtmlHistory.initialize();

然后，程序員使用 dhtmlHistory.addListener() 方法訂閱歷史瀏覽事件的改變。這個方法使用了一個JavaScript的回調函數，當記錄歷史瀏覽事件發生時這個函數接收兩個參數。網頁的新地址和任何的歷史數據都應該關聯到這個事件：

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

historyChange() 方法很直觀，當用戶瀏覽到一個新的網頁時使用一個方法接收 newLocation ，同時其他的 historyData 可以選擇附加到這個事件上：

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

上面用到的Debug() 是一個工具方法，用來簡單的把消息打印到網頁上。第二個參數是Boolean型的，如果設置為真，在新的消息打印的時候將會清楚原來的信息。

Add() 方法。增加一個包含新地址的歷史事件，比如：“edit:SomePage”，同時也提供了和事件一起存儲的可選 historyDate 值。

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

在add()執行后的同時，新的地址作為一個鏈接地址將顯示在瀏覽器的URL地址欄中。比如：在AJAX網頁中當前地址是： http://codinginparadise.org/my_ajax_app ，執行完： dhtmlHistory.add(“helloworld”,”Hello World Data”)后用戶將會在瀏覽器URL地址欄中看到如下的地址： http://codinginparadise.org/my_ajax_app#helloworld

這是用戶可以給這個頁面做收藏書簽，如果用戶后來用到這個書簽的時候，AJAX應用程序可以讀取到：#helloworld值并用它來初始化網頁。RSH框架透明的對URL地址值進行編碼和解碼。

historyData 在保存比較復雜狀態的時候很有用處。這是一個可選的值，他可以是JavaScript的任何類型，比如：數字，字符串，對象等。使用這個功能的一個例子是在一個網頁字符編輯器中，如果用戶離開當前網頁。當用戶回退時，瀏覽器將會把對象返回給歷史瀏覽變動監聽器。

開發者可以給historyData提供帶有嵌套對象和用數組表示的復雜JavaScript對象。然而，DOM對象和瀏覽器支持的腳本對象xmlHttPRequest，并不保存。注意：historyData 并不隨書簽一起持續化，當瀏覽器關閉，瀏覽器緩存被清除和用戶清除歷史記錄的時候，他也就消失了。

轉載自:http://www.aspnetjia.com