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

共2頁: 上一頁 1 [2] 下一頁