這篇文章描述了一個支持AJAX應用書簽和回退按鈕的開源的javascript庫。在這個指南的最後,開發者將會得出一個甚至不是Google Maps 或者 Gmail那樣處理的AJAX的解決方案:健壯的,可用的書簽和向前向後的動作能夠象其他的web頁面一樣正確的工作。
AJAX:怎樣去控制書簽和回退按鈕 這篇文章說明了一個重要的成果,AJAX應用目前面對著書簽和回退按鈕的應用,描述了非常簡單的歷史庫(Really Simple History),一個開源的解決這類問題的框架,並提供了一些能夠運行的例子。
這篇文章描述的主要問題是雙重的,一是一個隱藏的html 表單被用作一個大而短生命周期的客戶端信息的session緩存,這個緩存對在這個頁面上前進回退是強壯的。二是一個錨連接和隱藏的iframes的組合用來截取和記錄浏覽器的歷史事件,來實現前進和回退的按鈕。這兩個技術都被用一個簡單的javascript庫來封裝,以利於開發者的使用。
存在的問題 書簽和回退按鈕在傳統的多頁面的web應用上能順利的運行。當用戶在網站上沖浪時,他們的浏覽器地址欄能更新URL,這些URL可以被粘貼到的email或者添加到書簽以備以後的使用。回退和前進按鈕也可以正常運行,這可以使用戶在他們訪問的頁面間移動。
AJAX應用是與眾不同的,然而,他也是在單一web頁面上成熟的程序。浏覽器不是為AJAX而做的—AJAX他捕獲過去的事件,當web應用在每個鼠標點擊時刷新頁面。
在象Gmail那樣的AJAX軟件裡,浏覽器的地址欄正確的停留就象用戶在選擇和改變應用的狀態時,這使得作書簽到特定的應用視圖裡變得不可能。此外,如果用戶按下了他們的回退按鈕去返回上一個操作,他們會驚奇的發現浏覽器將完全離開原來他所在的應用的web頁面。
解決方案 開源的Really Simply History(RSH)框架解決了這些問題,他帶來了AJAX應用的作書簽和控制前進後退按鈕的功能。RSH目前還是beta版,在Firefox1.0上,Netscape7及以上,和IE6及以上運行。Safari現在還不支持(要得到更詳細的說明,請看我的weblog中的文章Coding in Paradise: Safari: No DHTML History Possible).
目前存在的幾個AJAX框架可以幫助我們做書簽和發布歷史,然而所有的框架都因為他們的實現而被幾個重要的bug困擾(請看Coding in Paradise: AJAX History Libraries 得知詳情)。此外,許多AJAX歷史框架集成綁定到較大的庫上,比如Backbase 和 Dojo,這些框架提供了與傳統AJAX應用不同的編程模型,強迫開發者去采用一整套全新的方式去獲得浏覽器的歷史相關的功能。
相應的,RSH是一個簡單的模型,能被包含在已經存在的AJAX系統中。而且,Really Simple History庫使用了一些技巧去避免影響到其他歷史框架的bug.
Really Simple History框架由2個javascript類庫組成,分別叫DhtmlHistory 和 HistoryStorage.
DhtmlHistory 類提供了一個對AJAX應用提取歷史的功能。.AJAX頁面add() 歷史事件到浏覽器裡,指定新的地址和關聯歷史數據。DhtmlHistory 類用一個錨的hash表更新浏覽器現在的URL,比如#new-location ,然後用這個新的URL關聯歷史數據。AJAX應用注冊他們自己到歷史監聽器裡,然後當用戶用前進和後退按鈕導航的時候,歷史事件被激發,提供給浏覽器新的地址和調用add()持續保留數據。
第二個類HistoryStorage,允許開發者存儲任意大小的歷史數據。一般的頁面,當一個用戶導航到一個新的網站,浏覽器會卸載和清除所有這個頁面的應用和javascript狀態信息。如果用戶用回退按鈕返回過來了,所有的數據已經丟失了。HistoryStorage 類解決了這個問題,他有一個api 包含簡單的hashtable方法比如put(),get(),hasKey()。這些方法允許開發者在離開web頁面時存儲任意大小的數據,當用戶點了回退按鈕返回時,數據可以通過HistoryStorage 類被訪問。我們通過一個隱藏的表單域(a hidden form field),利用浏覽器即使在用戶離開web頁面也會自動保存表單域值的這個特性,完成這個功能。
讓我們立即進入一個簡單的例子吧。
示例1 首先,任何一個想使用Really Simple History框架的頁面必須包含(include)dhtmlHistory.js 腳本。
<!-- Load the Really Simple History framework --><script type="text/javascript" src="../../framework/dhtmlHistory.js"></script>
DHTML History 應用也必須在和AJAX web頁面相同的目錄下包含一個叫blank.html 的指定文件,這個文件被Really Simple History框架綁定而且對IE來說是必需的。另一方面,RSH使用一個hidden iframe 來追蹤和加入IE歷史的改變,為了正確的執行功能,這個iframe需要指向一個真正的地址,不需要blank.html。
RSH框架創建了一個叫dhtmlHistory 的全局對象,作為操作浏覽器歷史的入口。使用dhtmlHistory 的第一步需要在頁面加載後初始化這個對象。
window.onload = initialize; function initialize() { // initialize the DHTML History // framework dhtmlHistory.initialize();
然後,開發者使用dhtmlHistory.addListener()方法去訂閱歷史改變事件。這個方法獲取一個javascript回調方法,當一個DHTML歷史改變事件發生時他將收到2個自變量,新的頁面地址,和任何可選的而且可以被關聯到這個事件的歷史數據。
indow.onload = initialize; function initialize() { // initialize the DHTML History // framework dhtmlHi