怎樣處理書(shū)簽和后退按鈕_AJAX教程
教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!
推薦：打造Ajax簡(jiǎn)單相冊(cè)演示地址 源文件下載 AJAX(Asynchronous JavaScript And XML)是一種運(yùn)用JavaScript和可擴(kuò)展標(biāo)記語(yǔ)言(XML)，在網(wǎng)絡(luò)瀏覽器和服務(wù)器之間傳送或接受數(shù)據(jù)的技術(shù)。主要應(yīng)用于Ria(Rich internet applications)的開(kāi)發(fā)上。 xml問(wèn)題終于在今天還是解決了。最后在FireFo
本文將展示一個(gè)開(kāi)源JavaScript庫(kù)，該腳本庫(kù)給AJAX應(yīng)用程序帶來(lái)了書(shū)簽和后退按鈕支持。在學(xué)習(xí)完這個(gè)教程后，開(kāi)發(fā)人員將能夠獲得對(duì)一個(gè)AJAX問(wèn)題的解決方案（甚至連Google Maps和Gmail現(xiàn)在都不提供該解決方案）：一個(gè)強(qiáng)大的、可用的書(shū)簽和后退前進(jìn)功能，其操作行為如同其他的Web應(yīng)用程序一樣。本文將闡述目前AJAX應(yīng)用程序在使用書(shū)簽和后退按鈕方面所面臨的嚴(yán)重問(wèn)題；展示Really Simple History（RSH）庫(kù)——一個(gè)可以解決以上問(wèn)題的開(kāi)源框架，并提供幾個(gè)運(yùn)行中的例子。
本文所展示的這個(gè)框架的主要發(fā)明分為兩部分。首先是一個(gè)隱藏的HTML表單，用于緩存大量短期會(huì)話的客戶端信息；這種緩存功能為頁(yè)面導(dǎo)航提供了強(qiáng)大的支持。其次是超鏈接錨點(diǎn)和隱藏Iframe的組合，它們被嵌入后退和前進(jìn)按鈕，用來(lái)截獲和記錄瀏覽器的歷史記錄事件。以上兩種技術(shù)都被包裝在一個(gè)簡(jiǎn)單的JavaScript庫(kù)中來(lái)簡(jiǎn)化開(kāi)發(fā)。
問(wèn)題
書(shū)簽和后退按鈕在傳統(tǒng)的多頁(yè)面Web應(yīng)用程序中運(yùn)行得非常好。當(dāng)用戶瀏覽web站點(diǎn)的時(shí)候，其瀏覽器的地址欄記錄隨新的URL而更新，這些記錄可以被粘貼到電子郵件或者書(shū)簽中供以后使用。后退和前進(jìn)按鈕也可以正常操作，使用戶可以在訪問(wèn)過(guò)的頁(yè)面中向前或向后翻動(dòng)。
但是AJAX應(yīng)用程序卻不一樣，它們是運(yùn)行在單個(gè)Web頁(yè)面中的復(fù)雜程序。瀏覽器并不是為這類程序而構(gòu)建的——這類Web應(yīng)用程序已經(jīng)過(guò)時(shí)，它們?cè)诿看问髽?biāo)點(diǎn)擊的時(shí)候都需要重新刷新整個(gè)頁(yè)面。
在這種類似于Gmail的AJAX軟件中，瀏覽器的地址欄在用戶選擇功能和改變程序狀態(tài)的時(shí)候保持不變，這使得無(wú)法在特定的應(yīng)用程序視圖中使用書(shū)簽。此外，如果用戶按下“后退”按鈕來(lái)“撤銷”上次的操作，他們會(huì)驚奇地發(fā)現(xiàn)，瀏覽器會(huì)完全離開(kāi)該應(yīng)用程序的Web頁(yè)面。
解決方案
開(kāi)源RSH框架可以解決這些問(wèn)題，它為AJAX應(yīng)用程序提供了書(shū)簽和控制后退、前進(jìn)按鈕的功能。RSH目前還處于Beta階段，可以在Firefox 1.0、Netscape 7+、Internet Explorer 6+等瀏覽器上運(yùn)行；目前還不支持Safari。
目前有幾個(gè)AJAX框架對(duì)書(shū)簽和歷史記錄問(wèn)題有所幫助；但這些框架目前都有幾個(gè)由于實(shí)現(xiàn)而造成的重大Bug。此外，很多AJAX歷史記錄框架被綁定到較大的庫(kù)上，例如Backbase和Dojo；這些框架為AJAX應(yīng)用程序引入了完全不同的編程模型，迫使開(kāi)發(fā)人員使用全新的方式來(lái)獲得歷史記錄功能。
相較之下，RSH是一個(gè)可以包含在現(xiàn)有AJAX系統(tǒng)中的簡(jiǎn)單模塊。此外，RSH庫(kù)采用了一些技術(shù)以避免產(chǎn)生影響其他歷史記錄框架的Bug。
RSH框架由兩個(gè)JavaScript類組成：DhtmlHistory和HistoryStorage。
DhtmlHistory類為AJAX應(yīng)用程序提供歷史記錄抽象。AJAX頁(yè)面使用add()方法添加歷史記錄事件到瀏覽器，指定新的地址和相關(guān)的歷史記錄數(shù)據(jù)。DhtmlHistory類使用一個(gè)錨散列（如#new-location）更新瀏覽器當(dāng)前的URL，同時(shí)把歷史記錄數(shù)據(jù)和該新URL關(guān)聯(lián)。AJAX應(yīng)用程序?qū)⒆约鹤?cè)為歷史記錄的監(jiān)聽(tīng)器，當(dāng)用戶使用后退和前進(jìn)按鈕進(jìn)行瀏覽時(shí)，歷史記錄事件被觸發(fā)，為瀏覽器提供新的位置以及與add()調(diào)用一起保存的任何歷史記錄數(shù)據(jù)。
第二個(gè)類：HistoryStorage，允許開(kāi)發(fā)人員保存任意數(shù)量的已存歷史記錄數(shù)據(jù)。在普通Web頁(yè)面中，當(dāng)用戶導(dǎo)航到一個(gè)新的web站點(diǎn)時(shí)，瀏覽器卸載并清除web頁(yè)面上的所有應(yīng)用程序和JavaScript狀態(tài)；如果用戶用后退按鈕返回，所有的數(shù)據(jù)都丟失了。HistoryStorage類通過(guò)一個(gè)包含簡(jiǎn)單散列表方法（例如put()、get()、hasKey()）的API來(lái)解決這類問(wèn)題。上面的方法允許開(kāi)發(fā)人員在用戶離開(kāi)Web頁(yè)面之后保存任意數(shù)量的數(shù)據(jù)；當(dāng)用戶按后退按鈕重新返回時(shí)，歷史記錄數(shù)據(jù)可以通過(guò)HistoryStorage類來(lái)訪問(wèn)。在內(nèi)部，我們通過(guò)使用隱藏的表單字段來(lái)實(shí)現(xiàn)此功能，這是因?yàn)闉g覽器會(huì)自動(dòng)保存表單字段中的值，甚至在用戶離開(kāi)Web頁(yè)面的時(shí)候也如此。
例子
讓我們先從一個(gè)簡(jiǎn)單的例子開(kāi)始。
首先，任何需要使用RSH框架的頁(yè)面都必須包含dhtmlHistory.js腳本：
＜!-- Load the Really Simple
History framework --＞
＜script type="text/javascript"
src="../../framework/dhtmlHistory.js"＞
＜/script＞
History framework --＞
＜script type="text/javascript"
src="../../framework/dhtmlHistory.js"＞
＜/script＞
DHTML歷史記錄應(yīng)用程序也必須在與AJAX Web頁(yè)面相同的目錄下包含blank.html文件；這個(gè)文件與RSH框架打包在一起，且對(duì)于Internet Explorer來(lái)說(shuō)是必需的。順便提一下，RSH使用一個(gè)隱藏Iframe來(lái)跟蹤和添加Internet Explorer的歷史記錄變化；這個(gè)Iframe需要我們指定一個(gè)實(shí)際的文件位置才能正常工作，這就是blank.html。
RSH框架創(chuàng)建了一個(gè)叫做dhtmlHistory的全局對(duì)象，這是操縱瀏覽器歷史記錄的入口點(diǎn)。使用dhtmlHistory的第一步是在Web頁(yè)面加載完成后初始化dhtmlHistory對(duì)象：
window.onload = initialize;
function initialize() {
// initialize the DHTML History
// framework
dhtmlHistory.initialize();
function initialize() {
// initialize the DHTML History
// framework
dhtmlHistory.initialize();
然后，開(kāi)發(fā)人員使用dhtmlHistory.addListener()方法訂閱歷史記錄變化事件。這個(gè)方法帶有一個(gè)JavaScript回調(diào)函數(shù)，當(dāng)DHTML歷史記錄變化事件發(fā)生時(shí)，該函數(shù)接收兩個(gè)參數(shù)：新的頁(yè)面位置以及任何可與該事件關(guān)聯(lián)的可選歷史記錄數(shù)據(jù)：
window.onload = initialize;
function initialize() {
// initialize the DHTML History
// framework
dhtmlHistory.initialize();
// subscribe to DHTML history change
// events
dhtmlHistory.addListener(historyChange);
function initialize() {
// initialize the DHTML History
// framework
dhtmlHistory.initialize();
// subscribe to DHTML history change
// events
dhtmlHistory.addListener(historyChange);
historyChange()方法很簡(jiǎn)單，該函數(shù)在用戶導(dǎo)航到一個(gè)新位置后接收newLocation以及任何與該事件關(guān)聯(lián)的可選historyData。
/** Our callback to receive history change
events. */
function historyChange(newLocation,
historyData) {
debug("A history change has occurred: "
+ "newLocation="+newLocation
+ ", historyData="+historyData,
true);
}
events. */
function historyChange(newLocation,
historyData) {
debug("A history change has occurred: "
+ "newLocation="+newLocation
+ ", historyData="+historyData,
true);
}
上面用到的debug()方法是定義在示例源文件中的一個(gè)實(shí)用函數(shù)，它與完整示例打包在一起供下載。debug()只是用來(lái)將消息打印到Web頁(yè)面上；第二個(gè)布爾型參數(shù)（在上述代碼中值為true）控制是否在打印新的調(diào)試消息之前清除原有的全部消息。
開(kāi)發(fā)人員使用add()方法添加歷史記錄事件。添加歷史記錄事件涉及為歷史記錄變化指定一個(gè)新地址，例如edit:SomePage，以及提供一個(gè)和該事件一起保存的可選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);
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()被調(diào)用之后，新的地址將立即作為一個(gè)錨值（鏈接地址）顯示在瀏覽器的URL地址欄中。例如，對(duì)地址為http://codinginparadise.org/my_ajax_app的AJAX Web頁(yè)面調(diào)用dhtmlHistory.add("helloworld", "Hello World Data")之后，用戶將會(huì)在其瀏覽器URL地址欄中看到如下的地址：
http://codinginparadise.org/my_ajax_app#helloworld
然后用戶可以將這個(gè)頁(yè)面做成書(shū)簽，如果以后用到這個(gè)書(shū)簽，AJAX應(yīng)用程序可以讀取#helloworld值，并用它來(lái)初始化Web頁(yè)面。散列后面的地址值是RSH框架可以透明編碼和解碼的URL地址。
HistoryData非常有用，它保存比簡(jiǎn)單的URL更為復(fù)雜的AJAX地址變化狀態(tài)。這是一個(gè)可選值，可以是任何JavaScript類型，例如Number、String或Object。使用該保存功能的一個(gè)例子是在一個(gè)富文本編輯器中保存所有文本（比如在用戶離開(kāi)當(dāng)前頁(yè)面時(shí)）。當(dāng)用戶再回到這個(gè)地址時(shí)，瀏覽器將會(huì)將該對(duì)象返回給歷史記錄變化監(jiān)聽(tīng)器。
開(kāi)發(fā)人員可以為historyData提供帶有嵌套對(duì)象和表示復(fù)雜狀態(tài)的數(shù)組的完整JavaScript對(duì)象；JSON (JavaScript Object Notation)所支持的在歷史記錄數(shù)據(jù)中都支持，包括簡(jiǎn)單數(shù)據(jù)類型和null類型。然而，DOM對(duì)象以及可用腳本編寫的瀏覽器對(duì)象（如XMLHttpRequest）不會(huì)被保存。請(qǐng)注意，historyData并不隨書(shū)簽一起保存，當(dāng)瀏覽器關(guān)閉，瀏覽器緩存被清空，或者用戶清除歷史記錄的時(shí)候，它就會(huì)消失。
使用dhtmlHistory的最后一步是isFirstLoad()方法。在某些瀏覽器中，如果導(dǎo)航到一個(gè)Web頁(yè)面，再跳轉(zhuǎn)到另一個(gè)不同的頁(yè)面，然后按“后退”按鈕返回到起始的站點(diǎn)，第一頁(yè)將完全重新加載，并觸發(fā)onload事件。這樣會(huì)對(duì)想要在第一次加載頁(yè)面時(shí)用某種方式對(duì)其進(jìn)行初始化（而其后則不使用這種方式重新加載該頁(yè)面）的代碼造成破壞。isFirstLoad()方法可以區(qū)分是第一次加載一個(gè)Web頁(yè)面還是用戶導(dǎo)航到保存在歷史記錄中的Web頁(yè)面時(shí)觸發(fā)的“假加載”事件。
在示例代碼中，我們只想在第一次加載頁(yè)面的時(shí)候添加歷史記錄事件；如果用戶在加載頁(yè)面后按后退按鈕返回該頁(yè)面，我們就不想重新添加任何歷史記錄事件：
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);
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);
讓我們繼續(xù)使用historyStorage類。類似于dhtmlHistory，historyStorage通過(guò)一個(gè)叫historyStorage的全局對(duì)象來(lái)公開(kāi)它的功能。該對(duì)象有幾個(gè)模擬散列的方法，比如put(keyName、keyValue)、get(keyName)和hasKey(keyName)。鍵名稱必須是字符串，同時(shí)鍵值可以是復(fù)雜的JavaScript對(duì)象甚至是XML格式的字符串。在我們的源代碼例子中，在第一次加載頁(yè)面時(shí)，我們使用put()將簡(jiǎn)單的XML放入historyStorage：
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);
// cache some values in the history
// storage
debug("Storing key 'fakeXML' into " + "history storage", false);
var fakeXML =
'＜?xml version="1.0" '
+ 'encoding="ISO-8859-1"?＞'
+ '＜foobar＞'
+ '＜foo-entry/＞'
+ '＜/foobar＞';
historyStorage.put("fakeXML", fakeXML);
}
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);
// cache some values in the history
// storage
debug("Storing key 'fakeXML' into " + "history storage", false);
var fakeXML =
'＜?xml version="1.0" '
+ 'encoding="ISO-8859-1"?＞'
+ '＜foobar＞'
+ '＜foo-entry/＞'
+ '＜/foobar＞';
historyStorage.put("fakeXML", fakeXML);
}
然后，如果用戶離開(kāi)頁(yè)面后又通過(guò)后退按鈕返回該頁(yè)面，我們可以使用get()方法提取保存的值，或者使用hasKey()方法檢查該值是否存在。
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);
// cache some values in the history
// storage
debug("Storing key 'fakeXML' into " + "history storage", false);
var fakeXML = '＜?xml version="1.0" ' + 'encoding="ISO-8859-1"?＞'
+ '＜foobar＞' + '＜foo-entry/＞' + '＜/foobar＞';
historyStorage.put("fakeXML", fakeXML);
}
// retrieve our values from the history
// storage
var savedXML = historyStorage.get("fakeXML");
savedXML = prettyPrintXml(savedXML);
var hasKey = historyStorage.hasKey("fakeXML");
var message = "historyStorage.hasKey('fakeXML')="
+ hasKey + "＜br＞"
+ "historyStorage.get('fakeXML')=＜br＞"
+ savedXML;
debug(message, false);
}
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);
// cache some values in the history
// storage
debug("Storing key 'fakeXML' into " + "history storage", false);
var fakeXML = '＜?xml version="1.0" ' + 'encoding="ISO-8859-1"?＞'
+ '＜foobar＞' + '＜foo-entry/＞' + '＜/foobar＞';
historyStorage.put("fakeXML", fakeXML);
}
// retrieve our values from the history
// storage
var savedXML = historyStorage.get("fakeXML");
savedXML = prettyPrintXml(savedXML);
var hasKey = historyStorage.hasKey("fakeXML");
var message = "historyStorage.hasKey('fakeXML')="
+ hasKey + "＜br＞"
+ "historyStorage.get('fakeXML')=＜br＞"
+ savedXML;
debug(message, false);
}
prettyPrintXml()是一個(gè)定義在完整示例源代碼中的實(shí)用方法；此函數(shù)準(zhǔn)備在web頁(yè)面中顯示以便用于調(diào)試的簡(jiǎn)單XML。
請(qǐng)注意，相關(guān)數(shù)據(jù)只在該頁(yè)面的歷史記錄中進(jìn)行持久化；如果瀏覽器被關(guān)閉，或者用戶打開(kāi)一個(gè)新窗口并再次鍵入AJAX應(yīng)用程序的地址，則該歷史記錄數(shù)據(jù)對(duì)于新的Web頁(yè)面不可用。歷史記錄數(shù)據(jù)只有在用到后退或前進(jìn)按鈕時(shí)才被持久化，當(dāng)用戶關(guān)閉瀏覽器或清空緩存的時(shí)候就會(huì)消失。如果想真正長(zhǎng)期持久化，請(qǐng)參閱Ajax MAssive Storage System (AMASS)。
我們的簡(jiǎn)單示例已經(jīng)完成。
示例2：O'Reilly Mail
我們的第二個(gè)例子是一個(gè)簡(jiǎn)單的AJAX電子郵件模擬應(yīng)用程序的示例，即O'Reilly Mail，它類似于Gmail。O'Reilly Mail描述了如何使用dhtmlHistory類來(lái)控制瀏覽器的歷史記錄，以及如何使用historyStorage對(duì)象來(lái)緩存歷史記錄數(shù)據(jù)。
O'Reilly Mail用戶界面由兩部分組成。在頁(yè)面的左邊是一個(gè)帶有不同電子郵件文件夾和選項(xiàng)的菜單，例如收件箱、草稿箱等。當(dāng)用戶選擇了一個(gè)菜單項(xiàng)（如收件箱），就用這個(gè)菜單項(xiàng)的內(nèi)容更新右邊的頁(yè)面。在一個(gè)現(xiàn)實(shí)應(yīng)用程序中，我們會(huì)遠(yuǎn)程獲取并顯示選擇的信箱內(nèi)容，不過(guò)在O'Reilly Mail中，我們只顯示已選擇的選項(xiàng)。
O'Reilly Mail使用RSH框架向?yàn)g覽器歷史記錄中添加菜單變化并更新地址欄，允許用戶利用瀏覽器的后退和前進(jìn)按鈕為應(yīng)用程序做收藏書(shū)簽和跳到上次變化的菜單。
我們添加一個(gè)特殊的菜單項(xiàng)——地址簿，以說(shuō)明如何來(lái)使用historyStorage。地址簿是一個(gè)由聯(lián)系人名稱和郵件地址組成的JavaScript數(shù)組，在一個(gè)現(xiàn)實(shí)應(yīng)用程序中，我們會(huì)從一臺(tái)遠(yuǎn)程服務(wù)器取得這個(gè)數(shù)組。不過(guò)，在O'Reilly Mail中，我們?cè)诒镜貏?chuàng)建這個(gè)數(shù)組，添加幾個(gè)名稱和電子郵件地址，然后將其保存在historyStorage對(duì)象中。如果用戶離開(kāi)Web頁(yè)面后又返回該頁(yè)面，那么O'Reilly Mail應(yīng)用程序?qū)⒅匦聫木彺鏅z索地址簿，而不是再次聯(lián)系遠(yuǎn)程服務(wù)器。
我們用initialize()方法保存和檢索地址簿：
/** Our function that initializes when the page
is finished loading. */
function initialize() {
// initialize the DHTML History framework
dhtmlHistory.initialize();
// add ourselves as a DHTML History listener
dhtmlHistory.addListener(handleHistoryChange);
// if we haven't retrieved the address book
// yet, grab it and then cache it into our
// history storage
if (window.addressBook == undefined) {
// Store the address book as a global
// object.
// In a real application we would remotely
// fetch this from a server in the
// background.
window.addressBook =
["Brad Neuberg '[email protected]'",
"John Doe '[email protected]'",
"Deanna Neuberg '[email protected]'"];
// cache the address book so it exists
// even if the user leaves the page and
// then returns with the back button
historyStorage.put("addressBook", addressBook);
}
else {
// fetch the cached address book from
// the history storage
window.addressBook = historyStorage.get("addressBook");
}
is finished loading. */
function initialize() {
// initialize the DHTML History framework
dhtmlHistory.initialize();
// add ourselves as a DHTML History listener
dhtmlHistory.addListener(handleHistoryChange);
// if we haven't retrieved the address book
// yet, grab it and then cache it into our
// history storage
if (window.addressBook == undefined) {
// Store the address book as a global
// object.
// In a real application we would remotely
// fetch this from a server in the
// background.
window.addressBook =
["Brad Neuberg '[email protected]'",
"John Doe '[email protected]'",
"Deanna Neuberg '[email protected]'"];
// cache the address book so it exists
// even if the user leaves the page and
// then returns with the back button
historyStorage.put("addressBook", addressBook);
}
else {
// fetch the cached address book from
// the history storage
window.addressBook = historyStorage.get("addressBook");
}
處理歷史記錄變化的代碼也很簡(jiǎn)單。在下面的源代碼中，無(wú)論用戶按后退還是前進(jìn)按鈕，都將調(diào)用handleHistoryChange。使用O'Reilly Mail定義的displayLocation實(shí)用方法，我們可得到newLocation并使用它將我們的用戶界面更新到正確的狀態(tài)。
/** Handles history change events. */
function handleHistoryChange(newLocation,
historyData) {
// if there is no location then display
// the default, which is the inbox
if (newLocation == "") {
newLocation = "section:inbox";
}
// extract the section to display from
// the location change; newLocation will
// begin with the word "section:"
newLocation = newLocation.replace(/section\:/, "");
// update the browser to respond to this
// DHTML history change
displayLocation(newLocation, historyData);
}
/** Displays the given location in the
right-hand side content area. */
function displayLocation(newLocation,sectionData) {
// get the menu element that was selected
var selectedElement = document.getElementById(newLocation);
// clear out the old selected menu item
var menu = document.getElementById("menu");
for (var i = 0; i ＜ menu.childNodes.length; i++) {
var currentElement = menu.childNodes[i];
// see if this is a DOM Element node
if (currentElement.nodeType == 1) {
// clear any class name
currentElement.className = "";
}
}
// cause the new selected menu item to
// appear differently in the UI
selectedElement.className = "selected";
// display the new section in the right-hand
// side of the screen; determine what
// our sectionData is
// display the address book differently by
// using our local address data we cached
// earlier
if (newLocation == "addressbook") {
// format and display the address book
sectionData = "＜p＞Your addressbook:＜/p＞";
sectionData += "＜ul＞";
// fetch the address book from the cache
// if we don't have it yet
if (window.addressBook == undefined) {
window.addressBook = historyStorage.get("addressBook");
}
// format the address book for display
for (var i = 0; i ＜ window.addressBook.length; i++) {
sectionData += "＜li＞"
+ window.addressBook[i]
+ "＜/li＞";
}
sectionData += "＜/ul＞";
}
// If there is no sectionData, then
// remotely retrieve it; in this example
// we use fake data for everything but the
// address book
if (sectionData == null) {
// in a real application we would remotely
// fetch this section's content
sectionData = "＜p＞This is section: "
+ selectedElement.innerHTML + "＜/p＞";
}
// update the content's title and main text
var contentTitle = document.getElementById("content-title");
var contentValue = document.getElementById("content-value");
contentTitle.innerHTML = selectedElement.innerHTML;
contentValue.innerHTML = sectionData;
}
function handleHistoryChange(newLocation,
historyData) {
// if there is no location then display
// the default, which is the inbox
if (newLocation == "") {
newLocation = "section:inbox";
}
// extract the section to display from
// the location change; newLocation will
// begin with the word "section:"
newLocation = newLocation.replace(/section\:/, "");
// update the browser to respond to this
// DHTML history change
displayLocation(newLocation, historyData);
}
/** Displays the given location in the
right-hand side content area. */
function displayLocation(newLocation,sectionData) {
// get the menu element that was selected
var selectedElement = document.getElementById(newLocation);
// clear out the old selected menu item
var menu = document.getElementById("menu");
for (var i = 0; i ＜ menu.childNodes.length; i++) {
var currentElement = menu.childNodes[i];
// see if this is a DOM Element node
if (currentElement.nodeType == 1) {
// clear any class name
currentElement.className = "";
}
}
// cause the new selected menu item to
// appear differently in the UI
selectedElement.className = "selected";
// display the new section in the right-hand
// side of the screen; determine what
// our sectionData is
// display the address book differently by
// using our local address data we cached
// earlier
if (newLocation == "addressbook") {
// format and display the address book
sectionData = "＜p＞Your addressbook:＜/p＞";
sectionData += "＜ul＞";
// fetch the address book from the cache
// if we don't have it yet
if (window.addressBook == undefined) {
window.addressBook = historyStorage.get("addressBook");
}
// format the address book for display
for (var i = 0; i ＜ window.addressBook.length; i++) {
sectionData += "＜li＞"
+ window.addressBook[i]
+ "＜/li＞";
}
sectionData += "＜/ul＞";
}
// If there is no sectionData, then
// remotely retrieve it; in this example
// we use fake data for everything but the
// address book
if (sectionData == null) {
// in a real application we would remotely
// fetch this section's content
sectionData = "＜p＞This is section: "
+ selectedElement.innerHTML + "＜/p＞";
}
// update the content's title and main text
var contentTitle = document.getElementById("content-title");
var contentValue = document.getElementById("content-value");
contentTitle.innerHTML = selectedElement.innerHTML;
contentValue.innerHTML = sectionData;
}
結(jié)束語(yǔ)
現(xiàn)在我們已經(jīng)了解了如何使用RSH API來(lái)使AJAX應(yīng)用程序支持書(shū)簽以及后退和前進(jìn)按鈕，并提供了示例代碼，您可參考該示例來(lái)創(chuàng)建自己的應(yīng)用程序。希望您能利用書(shū)簽和歷史記錄的支持來(lái)增強(qiáng)AJAX應(yīng)用程序。
分享：談更正用AJAX實(shí)現(xiàn)IE TREE無(wú)刷新取值的方法前一段時(shí)間寫了一篇文章，是關(guān)于用AJAX技術(shù)實(shí)現(xiàn)IE TREE無(wú)刷新的方法。 在原文中我說(shuō)的是用JAVASCRIPT語(yǔ)法，當(dāng)IE TREE被 onCLICK 時(shí)，取得IE TREE的VALUE值。 因?yàn)楫?dāng)時(shí)我取的VALUE值中，包含IE TREE所點(diǎn)擊的節(jié)點(diǎn)的INDEX值，所以，取得VALUE值后，用字符串截取
相關(guān)AJAX教程：
- Ajax中瀏覽器的緩存問(wèn)題解決方法
- AJAX和WebService實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)具體代碼
- ajax 登錄功能簡(jiǎn)單實(shí)現(xiàn)(未連接數(shù)據(jù)庫(kù))
- AJAX和WebService實(shí)現(xiàn)郵箱驗(yàn)證(無(wú)刷新驗(yàn)證郵件地址是否合法)
- AJAX和三層架構(gòu)實(shí)現(xiàn)分頁(yè)功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實(shí)現(xiàn)
- AJAX獲取服務(wù)器當(dāng)前時(shí)間及時(shí)間格式輸出處理
- ajax傳遞多個(gè)參數(shù)具體實(shí)現(xiàn)
- ajax傳遞一個(gè)參數(shù)具體實(shí)現(xiàn)
- 滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
AJAX教程Rss訂閱編程教程搜索
AJAX教程推薦
- Ajax方式提交帶文件上傳的表單及隱藏iframe應(yīng)用
- 怎樣解決ajax中文亂碼問(wèn)題
- 怎樣使用JavaScript和Ajax發(fā)出異步請(qǐng)求
- 使用JavaScript和Ajax發(fā)出異步請(qǐng)求(1)
- jquery ajax實(shí)現(xiàn)批量刪除具體思路及代碼
- 如何用Ajax和RSS制作一個(gè)首頁(yè)新聞
- 談Ajax 中的高級(jí)請(qǐng)求和響應(yīng)
- 打造Ajax簡(jiǎn)單相冊(cè)
- 使用Ajax技術(shù)開(kāi)發(fā)Web應(yīng)用程序
- 使用AJAX技術(shù)打造博客無(wú)刷新搜索引擎
猜你也喜歡看這些
- Ajax入門Tags標(biāo)記
- 70個(gè)AJAX應(yīng)用的演示 附源碼下載
- 利用iframe實(shí)現(xiàn)ajax跨域通信的實(shí)現(xiàn)原理(圖解)
- ajax中文亂碼問(wèn)題解決方案
- 用Ajax和RSS制作一個(gè)首頁(yè)新聞
- 利用Ajax實(shí)現(xiàn)在腳本里傳值實(shí)例介紹
- AJAX教程之AJAX的jQuery實(shí)現(xiàn)入門(二)
- 看圖理解 普通交互方式和Ajax交互方式區(qū)別
- 在AJAX開(kāi)發(fā)中集成數(shù)據(jù)庫(kù)技術(shù)
- jPager一個(gè)適合Ajax+JSON+jQuery環(huán)境使用的多功能頁(yè)碼欄
- 相關(guān)鏈接：
- 教程說(shuō)明：
AJAX教程-怎樣處理書(shū)簽和后退按鈕
。