AJAX技巧：如何處理書簽和后退按鈕 （1）

 

 

 

 

 

 

 

 

　　本文將展示一個開源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。

　　目前有幾個AJAX框架對書簽和歷史記錄問題有所幫助；但這些框架目前都有幾個由于實現而造成的重大Bug。此外，很多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頁面的時候也如此。

　　例子

　　讓我們先從一個簡單的例子開始。

　　首先，任何需要使用RSH框架的頁面都必須包含dhtmlHistory.js腳本：

＜!-- Load the Really Simple History Framework --＞ ＜script type="text/javascript" src="../../framework/dhtmlHistory.js"＞ ＜/script＞

　　DHTML歷史記錄應用程序也必須在與AJAX Web頁面相同的目錄下包含blank.html文件；這個文件與RSH框架打包在一起，且對于Internet Explorer來說是必需的。順便提一下，RSH使用一個隱藏Iframe來跟蹤和添加Internet Explorer的歷史記錄變化；這個Iframe需要我們指定一個實際的文件位置才能正常工作，這就是blank.html。

　　RSH框架創建了一個叫做dhtmlHistory的全局對象，這是操縱瀏覽器歷史記錄的入口點。使用dhtmlHistory的第一步是在Web頁面加載完成后初始化dhtmlHistory對象：

window.onload = initialize; function initialize() { 　// initialize the DHTML History 　// framework 　dhtmlHistory.initialize();

　　然后，開發人員使用dhtmlHistory.addListener()方法訂閱歷史記錄變化事件。這個方法帶有一個JavaScript回調函數，當DHTML歷史記錄變化事件發生時，該函數接收兩個參數：新的頁面位置以及任何可與該事件關聯的可選歷史記錄數據：

window.onload = initialize; function initialize() { 　// initialize the DHTML History 　// framework 　dhtmlHistory.initialize(); 　// subscribe to DHTML history change 　// events 　dhtmlHistory.addListener(historyChange);

　　historyChange()方法很簡單，該函數在用戶導航到一個新位置后接收newLocation以及任何與該事件關聯的可選historyData。

/** Our callback to receive history change events. */ function historyChange(newLocation, historyData) { 　debug("A history change has oclearcase/" target="_blank" >ccurred: " 　　+ "newLocation="+newLocation 　　+ ", historyData="+historyData, 　　true); }

　　上面用到的debug()方法是定義在示例源文件中的一個實用函數，它與完整示例打包在一起供下載。debug()只是用來將消息打印到Web頁面上；第二個布爾型參數（在上述代碼中值為true）控制是否在打印新的調試消息之前清除原有的全部消息。

　　開發人員使用add()方法添加歷史記錄事件。添加歷史記錄事件涉及為歷史記錄變化指定一個新地址，例如edit:SomePage，以及提供一個和該事件一起保存的可選historyData值。

window.onload = initialize; function initialize() { 　// initialize the DHTML History 　// framework 　dhtmlHistory.initialize(); 　// subscribe to DHTML history change 　// events 　dhtmlHistory.addListener(historyChange); 　// 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 data"; 　　complexObject.value3 = new Array(); 　　complexObject.value3[0] = "array 1"; 　　complexObject.value3[1] = "array 2"; 　　dhtmlHistory.add("complexObject", complexObject);

　　在add()被調用之后，新的地址將立即作為一個錨值（鏈接地址）顯示在瀏覽器的URL地址欄中。例如，對地址為http://codinginparadise.org/my_ajax_app的AJAX Web頁面調用dhtmlHistory.add("helloworld", "Hello World Data")之后，用戶將會在其瀏覽器URL地址欄中看到如下的地址：

　　http://codinginparadise.org/my_ajax_app#helloworld

　　然后用戶可以將這個頁面做成書簽，如果以后用到這個書簽，AJAX應用程序可以讀取#helloworld值，并用它來初始化Web頁面。散列后面的地址值是RSH框架可以透明編碼和解碼的URL地址。

1 2 下一頁>>

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