AJAX技術之如何處理書簽和翻頁按扭 （1）

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

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

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

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

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

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

　　解決方案：開源Really Simply History (RSH)框架可以用來解決上面的問題，為AJAX應用程序提供書簽和控制“回退”、“向前”按鈕的功能。RSH 目前還是Beta 狀態，可以在Firefox 1.0 , Netscape 7+,Internet Explorer 6+等瀏覽器上工作，目前還不支持Safari瀏覽器?？梢詤⒖迹壕幋a天堂：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 教本：


javascript"
src="../../framework/dhtmlHistory.js">

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

1 2 下一頁>>

原文轉自：http://www.anti-gravitydesign.com