本篇文章提供了一個開源javascript庫,它提供了給ajax應用程序中添加書簽和會退按鈕的功能。在學習完這個教程后,開發(fā)者將能夠?qū)﹂_發(fā)ajax應用碰到的問題獲得一個解決方案,這個特性甚至google maps 和 gmail 現(xiàn)在都不提供:提供一個強大的,可用的書簽和前進回退按鈕,如同其他的web應用一樣的行為。
ajax“如何處理書簽和回退按鈕”闡述了ajax應用程序開發(fā)書簽和回退按鈕功能碰到的嚴重的問題;可以解決以上問題的一個開源框架,并提供真實、簡單的歷史記錄庫,還提供了幾個運行中的例子。
本文把這個框架提供的重要發(fā)現(xiàn)分兩個部分來說明:首先,一個隱藏的html表單用來緩存大量短暫的在客戶端信息。這些緩存為網(wǎng)頁導航提供了強大的支持。其次,一個隱藏的iframe和超級鏈接用來截取和記錄瀏覽器的歷史事件提供回退按鈕和向前按鈕的支持。以上兩個技術(shù)都是通過包裝在一個簡單的javascript庫中來實現(xiàn)簡單開發(fā)。
問題:書簽和回退按鈕在傳統(tǒng)的多頁面的web應用程序中工作的非常好。當用戶瀏覽網(wǎng)站的時候,瀏覽器的地址欄記錄隨新的urls更新,這些記錄可以拷貝到email 或者 書簽中供以后使用。回退和前進按鈕可以幫助用戶在他瀏覽過的網(wǎng)頁中向前或向后翻動。
ajax 應用程序卻是不同的,他們是運行在一個網(wǎng)頁中的復雜程序。瀏覽器并不是為這類程序制作的———這類程序是過去的,在每次鼠標點擊的時候需要重新刷新整個頁面。
在類似gmail的ajax軟件中,瀏覽器的地址欄在用戶選擇功能和改變程序狀態(tài)的時候保持不變,這讓書簽在這類程序中無法使用。未來,如果用戶按下“回退”按鈕來撤銷上次的動作,而瀏覽器和應用程序分離的狀況會讓用戶很吃驚。
解決方案:開源really simply history (rsh)框架可以用來解決上面的問題,為ajax應用程序提供書簽和控制“回退”、“向前”按鈕的功能。rsh 目前還是beta 狀態(tài),可以在firefox 1.0 , netscape 7+,internet explorer 6+等瀏覽器上工作,目前還不支持safari瀏覽器。可以參考:編碼天堂:safari:不可能的dhtml歷史記錄。
有幾類ajax框架目前也支持書簽和歷史訪問的問題,但這些框架因為實現(xiàn)方式的不同,目前都有幾個大bug。未來,很多ajax框架,比如backbase 和 dojo 將會整合歷史瀏覽的功能;這些框架為ajax應用程序采用完全不同的編程模型,強迫程序員使用完全不同的方式來實現(xiàn)歷史瀏覽的功能。
相反,rsh 是一個可以包含在現(xiàn)有ajax系統(tǒng)的單模塊。未來,rsh庫會進一步改進避免和其他框架的相關(guān)功能沖突。
rsh 歷史框架由兩個javascript類組成:dhtmlhistory 和 historystorage。
dhtmlhistory 類為ajax應用程序提供歷史瀏覽記錄的抽象。ajax 頁面 add() 歷史瀏覽記錄事件到瀏覽器,保存指定新的地址和相關(guān)的歷史數(shù)據(jù)。dhtmlhistory 類使用hash連接更新瀏覽器當前的url,比如:#new-location,同時把歷史數(shù)據(jù)和新的url關(guān)聯(lián)。ajax 應用程序把自己注冊為歷史瀏覽的監(jiān)聽器,當用戶使用 “前進”“回退”按鈕來瀏覽時,歷史瀏覽時間被觸發(fā),調(diào)用 add() 方法來提供給瀏覽器新的地址,并保存歷史數(shù)據(jù)。
第二個類: historystorage允許程序員保存任意的歷史瀏覽數(shù)據(jù)。在普通的網(wǎng)頁中,當用戶瀏覽到一個新的網(wǎng)址,瀏覽器卸載并清除當前網(wǎng)頁所有的程序和javascript狀態(tài),如果用戶返回時,所有的數(shù)據(jù)都丟失了。hsitorystorage 類提供帶有hash表的api通過 put() , get() , haskey() 等方法來解決這類問題。上面的方法允許程序員保存用戶離開網(wǎng)頁時的任意數(shù)據(jù),當用戶按“回退”按鈕重新返回時,歷史數(shù)據(jù)可以通過historystorage類來訪問。我們起初通過使用隱藏的表單字段來實現(xiàn),因為瀏覽器自動保存一個表單中字段值,甚至用戶離開網(wǎng)頁的時候也如此。
例子:先從一個簡單的例子開始吧:
首先,需要rsh框架的網(wǎng)頁中需要包含 dhtmlhistory.js 教本:
以下為引用的內(nèi)容: src="../../framework/dhtmlhistory.js"> |
rsh 框架創(chuàng)建了一個叫dhtmlhistory的全局對象,這是控制瀏覽器歷史瀏覽記錄的入口點。第一步在網(wǎng)頁完成裝載后需要初始化 dhtmlhistory 對象。
以下為引用的內(nèi)容: window.onload = initialize; function initialize() { // initialize the dhtml history // framework dhtmlhistory.initialize(); |
共2頁: 上一頁 1 [2] 下一頁
新聞熱點
疑難解答
圖片精選