AJAX：如何處理書籤和後退按鈕

本文將展示一個開源JavaScript庫，該指令碼庫給AJAX應用程式帶來了書籤和後退按鈕支援。在學習完這個教程後，開發人員將能夠獲得對一個AJAX問題的解決方案（甚至連Google Maps和Gmail現在都不提供該解決方案）：一個強大的、可用的書籤和後退前進功能，其操作行為如同其他的Web應用程式一樣。

本文將闡述目前AJAX應用程式在使用書籤和後退按鈕方面所面臨的嚴重問題；展示Really Simple History（RSH）庫——一個可以解決以上問題的開源架構，並提供幾個運行中的例子。

本文所展示的這個架構的主要發明分為兩部分。首先是一個隱藏的HTML表單，用於緩衝大量短期會話的用戶端資訊；這種緩衝功能為頁面導航提供了強大的支援。其次是超連結錨點和隱藏Iframe的組合，它們被嵌入後退和前進按鈕，用來截獲和記錄瀏覽器的記錄事件。以上兩種技術都被封裝在一個簡單的JavaScript庫中來簡化開發。

問題

書籤和後退按鈕在傳統的多頁面Web應用程式中運行得非常好。當使用者瀏覽web網站的時候，其瀏覽器的地址欄記錄隨新的URL而更新，這些記錄可以被粘貼到電子郵件或者書籤中供以後使用。後退和前進按鈕也可以正常操作，使使用者可以在訪問過的頁面中向前或向後翻動。

但是AJAX應用程式卻不一樣，它們是運行在單個Web頁面中的複雜程式。瀏覽器並不是為這類程式而構建的——這類Web應用程式已經過時，它們在每次滑鼠點擊的時候都需要重新重新整理整個頁面。

在這種類似於Gmail的AJAX軟體中，瀏覽器的地址欄在使用者選擇功能和改變程式狀態的時候保持不變，這使得無法在特定的應用程式視圖中使用書籤。此外，如果使用者按下“後退”按鈕來“撤銷”上次的操作，他們會驚奇地發現，瀏覽器會完全離開該應用程式的Web頁面。

解決方案

開源RSH架構可以解決這些問題，它為AJAX應用程式提供了書籤和控制後退、前進按鈕的功能。RSH目前還處於Beta階段，可以在Firefox 1.0、Netscape 7+、Internet Explorer 6+等瀏覽器上運行；目前還不支援Safari（有關說明，請參見我的文章“Coding in Paradise: Safari: No DHTML History Possible”）。

目前有幾個AJAX架構對書籤和記錄問題有所協助；但這些架構目前都有幾個由於實現而造成的重大Bug（有關詳細資料，請參見“Coding in Paradise: AJAX History Libraries”）。此外，很多AJAX記錄架構被綁定到較大的庫上，例如Backbase和Dojo；這些架構為AJAX應用程式引入了完全不同的編程模型，迫使開發人員使用全新的方式來獲得記錄功能。

相較之下，RSH是一個可以包含在現有AJAX系統中的簡單模組。此外，RSH庫採用了一些技術以避免產生影響其他記錄架構的Bug。

RSH架構由兩個JavaScript類組成：DhtmlHistory和HistoryStorage。

DhtmlHistory類為AJAX應用程式提供記錄抽象。AJAX頁面使用add()方法添加記錄事件到瀏覽器，指定新的地址和相關的記錄資料。DhtmlHistory類使用一個錨散列（如#new-location）更新瀏覽器當前的URL，同時把記錄資料和該新URL關聯。AJAX應用程式將自己註冊為記錄的監聽器，當使用者使用後退和前進按鈕進行瀏覽時，記錄事件被觸發，為瀏覽器提供新的位置以及與add()調用一起儲存的任何記錄資料。

第二個類：HistoryStorage，允許開發人員儲存任意數量的已存記錄資料。在普通Web頁面中，當使用者導航到一個新的web網站時，瀏覽器卸載並清除web頁面上的所有應用程式和JavaScript狀態；如果使用者用後退按鈕返回，所有的資料都丟失了。HistoryStorage類通過一個包含簡單散列表方法（例如put()、get()、hasKey()）的API來解決這類問題。上面的方法允許開發人員在使用者離開Web頁面之後儲存任意數量的資料；當使用者按後退按鈕重新返回時，記錄資料可以通過HistoryStorage類來訪問。在內部，我們通過使用隱藏的表單欄位來實現此功能，這是因為瀏覽器會自動儲存表單欄位中的值，甚至在使用者離開Web頁面的時候也如此。