AJAX處理書籤和翻頁按扭的方法

ajax|翻頁|翻頁按扭|書籤

本篇文章提供了一個開源JavaScript庫，它提供了給AJAX應用程式中添加書籤和會退按鈕的功能。AJAX“如何處理書籤和回退按鈕”闡述了AJAX應用程式開發書籤和回退按鈕功能碰到的嚴重的問題；可以解決以上問題的一個開源架構，並提供真實、簡單的記錄庫，還提供了幾個運行中的例子。

在學習完這個教程後，開發人員將能夠對開發AJAX應用碰到的問題獲得一個解決方案，這個特性甚至Google Maps 和 Gmail 現在都不提供：提供一個強大的，可用的書籤和前進回退按鈕，如同其他的WEB應用一樣的行為。

本文把這個架構提供的重要發現分兩個部分來說明：首先，一個隱藏的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 教本：

<!-- Load the Really Simple History framework --> <script type="text/javascript" src="../../framework/dhtmlHistory.js"> </script>

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 並不隨書籤一起持續化，當瀏覽器關閉，瀏覽器緩衝被清除和使用者清除記錄的時候，他也就消失了。