AJAX使用技巧：如何處理書籤和翻頁按扭

本篇文章提供了一個開源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