使用Dojo為Ajax應用增添前進 / 後退能力的兩種解決方案

來源:互聯網
上載者:User

簡介:基於 Ajax 的 Web 應用程式最為明顯的特徵在於使用了瀏覽器內部原生支援的 XMLHttpRequest 對 象與後台伺服器進行資料通訊,由於這種通訊方式不需要頁面的重新整理動作,因而無論與後台發生了多少次 通訊,瀏覽器的 URL 會一直保持在初始地址不變。這隨之而來的一個問題便是不斷變化的頁面狀態資訊 無法記錄到瀏覽器的記錄堆棧中,從而使得使用者無法通過瀏覽器的前進 / 後退按鈕在不同狀態頁面 間進行切換。Dojo 作為當今最為流行的 JavaScript 開發套件之一,在其最新發行版本 1.4 中,專門 提供了 dojo.back 和 dojo.hash 的兩種方法用於解決此類問題。本文旨在分析比較兩種方法背後所採用 技術原理的基礎之上,給出基於兩種方法構建的樣本解決方案,並探討如何針對不同類型的 Ajax 應用選 擇一套合適自身的解決方案。

問題解決的基本思路和技術基礎

瀏覽器能夠支援在使用者訪問過的頁面間進行前進 / 後退的操作,依賴於內部維持的 history 對象。 出於安全性的考慮,瀏覽器並不允許 JavaScript 指令碼對該對象進行增刪改之類寫操作,而只是可以通過 history. back/forward() 等方法進行訪問。既然在頁面狀態發生變化時,無法通過指令碼直接去影響瀏覽 器的曆史資訊,那麼只有通過 URL 的變化來觸發瀏覽器增加一條新的記錄。這也就是說需要將 Ajax 應用的不同頁面狀態與 URL 進行一種一對一的映射,並且能夠在回退或前進到某一 URL 之時,應用本身 能夠在頁面無重新整理的情況下跳轉到正確的頁面狀態。

那麼,如何對 Ajax 應用的初始 URL 進行改變,而同時這種變化的切換又不會引起頁面的重新載入呢 ?答案只有一個,那就是藉助用於頁面內資源片段定位目的的“片段標識符”(fragment identifier) ,即 URL 中“#”符號後的字串(hash string)。當瀏覽器向伺服器端請求資源時,片段標識符並不 會連同 base URL 一同發往伺服器端,而只是在得到伺服器返回的結果之後協助瀏覽器快速定位到被相應 的錨點(anchor)所標識的資源片段,即使無法找個對應的錨點,瀏覽器也並不會報錯。正是基於瀏覽器 的這一特性,構建片段標識符與頁面狀態之間的映射關係成為瞭解決此類問題的基礎。

目前,除 IE 之外的瀏覽器都能夠將因 hash 字串改變而產生的新 URL 作為一條新的記錄加入到瀏 覽器的曆史堆棧中,通過對 window.location.hash 屬性的讀寫,JavaScript 指令碼可以擷取並設定 hash 字串,從而間接達到通過指令碼了影響瀏覽器記錄的目的。這裡需要特別指出的是,IE 並不認為有 必要將非法片段標識符引發的變化等同於 URL 發生了變化,也便不會進行任何記錄曆史資訊的操作,這 時最為常見的一種解決方案是在頁面中嵌入一個隱藏 iframe,由於瀏覽器可以對 DOM 樹中 iframe 節點 的 src 屬性進行記錄跟蹤,這樣通過在邏輯上建立一條“頁面 URL -- 頁面內 iframe URL -- 頁面 狀態”的對應鏈,同樣可以在 IE 中建立片段標識符與頁面狀態的聯絡。

dojo.back 與 dojo.hash 實現原理的比較

既然已經明確了問題的解決方式,那麼轉到具體實現的角度上來,建立這種頁面 URL 與頁面狀態之間 的映射關係,存在著兩種實現方式:其一是以頁面狀態的遷移為主導,在狀態首先改變之後,為頁面 URL 添加相應的 hash 字串,這種方式為 dojo.back 所採用;其二則是以 URL 的變化為主導,在狀態變化 之前改變頁面的 hash 字串,而後頁面再根據字串中所包含的資訊完成頁面狀態的遷移任務,這種方 式則是被 dojo.hash 所建議。接下來的部分,本文將對這兩種方式背後的實現機理進行一個更為深入透 徹的分析介紹。

dojo.back 實現原理

Dojo 自其 1.0 發行版本起就開始向開發人員提供基於 dojo.back 的關於瀏覽器記錄問題的解決 方案。Dojo.back 支援兩種表現形式的前進 / 後退操作,二者不同之處體現在當頁面狀態進行改變的同 時,URL 是否也隨之一同發生變化。更具體地來說,就是開發人員可以選擇在不改變瀏覽器 URL 的情況 下,為 Ajax 應用增添前進後退的能力。

之所以這樣設計,是因為 dojo.back 認為在不需要為 Ajax 應用增添“書籤收藏”這種類似能力時, 沒有必要將頁面的變化體現到 URL 上面,使用者始終面對一個固定不變的 URL 就可以了。而這種靈活的設 計方式,也完全是 dojo.back 內部特定的實現機理所決定的。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.