- 浏览: 253748 次
- 性别:
- 来自: 上海
最新评论
-
lazyox_2008:
多谢楼主配对那一段,解决了我的大问题啊
android蓝牙主动发起配对实例 -
yandol:
这个反射的createBond用法很有意思 这个代码能像非an ...
android蓝牙主动发起配对实例 -
hzxlb910:
例子还是短小看着一目了然。不错
初识AOP -
lteb2002:
在WEB中,是使用WebApplicationContext的 ...
[转]Spring中WebApplicationContext的研究 -
Mark_dev:
请问一下楼主,这个UUID是不是和设备有关啊,我使用你的 co ...
android蓝牙主动发起配对实例
时间:2006-05-26
作者:Brad Neuberg
浏览次数: 2086 1422
本文关键字:AJAX, javascript, dom, bookmark, forward button, back button, 历史记录, 书签, 前进按钮, 后退按钮, 表示层 文章工具
本文将展示一个开源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(有关说明,请参见我的文章“Coding in Paradise: Safari: No DHTML History Possible”)。
目前有几个AJAX框架对书签和历史记录问题有所帮助;但这些框架目前都有几个由于实现而造成的重大Bug(有关详细信息,请参见“Coding in Paradise: AJAX History Libraries”)。此外,很多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脚本:
DHTML历史记录应用程序也必须在与AJAX Web页面相同的目录下包含blank.html文件;这个文件与RSH框架打包在一起,且对于Internet Explorer来说是必需的。顺便提一下,RSH使用一个隐藏Iframe来跟踪和添加Internet Explorer的历史记录变化;这个Iframe需要我们指定一个实际的文件位置才能正常工作,这就是blank.html。
RSH框架创建了一个叫做dhtmlHistory的全局对象,这是操纵浏览器历史记录的入口点。使用dhtmlHistory的第一步是在Web页面加载完成后初始化dhtmlHistory对象:
然后,开发人员使用dhtmlHistory.addListener()方法订阅历史记录变化事件。这个方法带有一个JavaScript回调函数,当DHTML历史记录变化事件发生时,该函数接收两个参数:新的页面位置以及任何可与该事件关联的可选历史记录数据:
historyChange()方法很简单,该函数在用户导航到一个新位置后接收newLocation以及任何与该事件关联的可选historyData。
上面用到的debug()方法是定义在示例源文件中的一个实用函数,它与完整示例打包在一起供下载。debug()只是用来将消息打印到Web页面上;第二个布尔型参数(在上述代码中值为true)控制是否在打印新的调试消息之前清除原有的全部消息。
开发人员使用add()方法添加历史记录事件。添加历史记录事件涉及为历史记录变化指定一个新地址,例如edit:SomePage,以及提供一个和该事件一起保存的可选historyData值。
在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地址。
HistoryData非常有用,它保存比简单的URL更为复杂的AJAX地址变化状态。这是一个可选值,可以是任何JavaScript类型,例如Number、String或Object。使用该保存功能的一个例子是在一个富文本编辑器中保存所有文本(比如在用户离开当前页面时)。当用户再回到这个地址时,浏览器将会将该对象返回给历史记录变化监听器。
开发人员可以为historyData提供带有嵌套对象和表示复杂状态的数组的完整JavaScript对象;JSON (JavaScript Object Notation)所支持的在历史记录数据中都支持,包括简单数据类型和null类型。然而,DOM对象以及可用脚本编写的浏览器对象(如XMLHttpRequest)不会被保存。请注意,historyData并不随书签一起保存,当浏览器关闭,浏览器缓存被清空,或者用户清除历史记录的时候,它就会消失。
使用dhtmlHistory的最后一步是isFirstLoad()方法。在某些浏览器中,如果导航到一个Web页面,再跳转到另一个不同的页面,然后按“后退”按钮返回到起始的站点,第一页将完全重新加载,并触发onload事件。这样会对想要在第一次加载页面时用某种方式对其进行初始化(而其后则不使用这种方式重新加载该页面)的代码造成破坏。isFirstLoad()方法可以区分是第一次加载一个Web页面还是用户导航到保存在历史记录中的Web页面时触发的“假加载”事件。
在示例代码中,我们只想在第一次加载页面的时候添加历史记录事件;如果用户在加载页面后按后退按钮返回该页面,我们就不想重新添加任何历史记录事件:
让我们继续使用historyStorage类。类似于dhtmlHistory,historyStorage通过一个叫historyStorage的全局对象来公开它的功能。该对象有几个模拟散列的方法,比如put(keyName、keyValue)、get(keyName)和hasKey(keyName)。键名称必须是字符串,同时键值可以是复杂的JavaScript对象甚至是XML格式的字符串。在我们的源代码例子中,在第一次加载页面时,我们使用put()将简单的XML放入historyStorage:
然后,如果用户离开页面后又通过后退按钮返回该页面,我们可以使用get()方法提取保存的值,或者使用hasKey()方法检查该值是否存在。
prettyPrintXml()是一个定义在完整示例源代码中的实用方法;此函数准备在web页面中显示以便用于调试的简单XML。
请注意,相关数据只在该页面的历史记录中进行持久化;如果浏览器被关闭,或者用户打开一个新窗口并再次键入AJAX应用程序的地址,则该历史记录数据对于新的Web页面不可用。历史记录数据只有在用到后退或前进按钮时才被持久化,当用户关闭浏览器或清空缓存的时候就会消失。如果想真正长期持久化,请参阅Ajax MAssive Storage System (AMASS)。
我们的简单示例已经完成。您可以演示或下载完整源代码。
示例2:O'Reilly Mail
我们的第二个例子是一个简单的AJAX电子邮件模拟应用程序的示例,即O'Reilly Mail,它类似于Gmail。O'Reilly Mail描述了如何使用dhtmlHistory类来控制浏览器的历史记录,以及如何使用historyStorage对象来缓存历史记录数据。
O'Reilly Mail用户界面由两部分组成。在页面的左边是一个带有不同电子邮件文件夹和选项的菜单,例如收件箱、草稿箱等。当用户选择了一个菜单项(如收件箱),就用这个菜单项的内容更新右边的页面。在一个现实应用程序中,我们会远程获取并显示选择的信箱内容,不过在O'Reilly Mail中,我们只显示已选择的选项。
O'Reilly Mail使用RSH框架向浏览器历史记录中添加菜单变化并更新地址栏,允许用户利用浏览器的后退和前进按钮为应用程序做收藏书签和跳到上次变化的菜单。
我们添加一个特殊的菜单项——地址簿,以说明如何来使用historyStorage。地址簿是一个由联系人名称和邮件地址组成的JavaScript数组,在一个现实应用程序中,我们会从一台远程服务器取得这个数组。不过,在O'Reilly Mail中,我们在本地创建这个数组,添加几个名称和电子邮件地址,然后将其保存在historyStorage对象中。如果用户离开Web页面后又返回该页面,那么O'Reilly Mail应用程序将重新从缓存检索地址簿,而不是再次联系远程服务器。
我们用initialize()方法保存和检索地址簿:
处理历史记录变化的代码也很简单。在下面的源代码中,无论用户按后退还是前进按钮,都将调用handleHistoryChange。使用O'Reilly Mail定义的displayLocation实用方法,我们可得到newLocation并使用它将我们的用户界面更新到正确的状态。
您可以演示O'Reilly Mail或者下载O'Reilly Mail源代码。
结束语
现在我们已经了解了如何使用RSH API来使AJAX应用程序支持书签以及后退和前进按钮,并提供了示例代码,您可参考该示例来创建自己的应用程序。希望您能利用书签和历史记录的支持来增强AJAX应用程序。
参考资料
下载此文的所有示例代码。
下载RSH框架。
演示O'Reilly Mail或者下载O'Reilly Mail源代码。完整的示例下载还包括更多供试用的示例。
Coding in Paradise:作者的weblog,内容涵盖了AJAX、DHTML以及Java技术和利用协作技术的新开发,例如WikiWikis。
"Coding in Paradise: AJAX: Bookmarks and Back Buttons, Advanced Example"
"Coding in Paradise: Safari: No DHTML History Possible"
"Coding in Paradise: AJAX Tutorial: Saving Session Across Page Loads Without Cookies, On The Client Side"
"Coding in Paradise: AJAX History Libraries"
原文出处:http://www.onjava.com/pub/a/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html
作者简介
Brad Neuberg 为开源社区做了大量工作,为Mozilla、JXTA、Jakarta Feed Parser等项目贡献了代码。
作者:Brad Neuberg
浏览次数: 2086 1422
本文关键字:AJAX, javascript, dom, bookmark, forward button, back button, 历史记录, 书签, 前进按钮, 后退按钮, 表示层 文章工具
本文将展示一个开源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(有关说明,请参见我的文章“Coding in Paradise: Safari: No DHTML History Possible”)。
目前有几个AJAX框架对书签和历史记录问题有所帮助;但这些框架目前都有几个由于实现而造成的重大Bug(有关详细信息,请参见“Coding in Paradise: AJAX History Libraries”)。此外,很多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 occurred: " + "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地址。
HistoryData非常有用,它保存比简单的URL更为复杂的AJAX地址变化状态。这是一个可选值,可以是任何JavaScript类型,例如Number、String或Object。使用该保存功能的一个例子是在一个富文本编辑器中保存所有文本(比如在用户离开当前页面时)。当用户再回到这个地址时,浏览器将会将该对象返回给历史记录变化监听器。
开发人员可以为historyData提供带有嵌套对象和表示复杂状态的数组的完整JavaScript对象;JSON (JavaScript Object Notation)所支持的在历史记录数据中都支持,包括简单数据类型和null类型。然而,DOM对象以及可用脚本编写的浏览器对象(如XMLHttpRequest)不会被保存。请注意,historyData并不随书签一起保存,当浏览器关闭,浏览器缓存被清空,或者用户清除历史记录的时候,它就会消失。
使用dhtmlHistory的最后一步是isFirstLoad()方法。在某些浏览器中,如果导航到一个Web页面,再跳转到另一个不同的页面,然后按“后退”按钮返回到起始的站点,第一页将完全重新加载,并触发onload事件。这样会对想要在第一次加载页面时用某种方式对其进行初始化(而其后则不使用这种方式重新加载该页面)的代码造成破坏。isFirstLoad()方法可以区分是第一次加载一个Web页面还是用户导航到保存在历史记录中的Web页面时触发的“假加载”事件。
在示例代码中,我们只想在第一次加载页面的时候添加历史记录事件;如果用户在加载页面后按后退按钮返回该页面,我们就不想重新添加任何历史记录事件:
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);
让我们继续使用historyStorage类。类似于dhtmlHistory,historyStorage通过一个叫historyStorage的全局对象来公开它的功能。该对象有几个模拟散列的方法,比如put(keyName、keyValue)、get(keyName)和hasKey(keyName)。键名称必须是字符串,同时键值可以是复杂的JavaScript对象甚至是XML格式的字符串。在我们的源代码例子中,在第一次加载页面时,我们使用put()将简单的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);}
然后,如果用户离开页面后又通过后退按钮返回该页面,我们可以使用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); }
prettyPrintXml()是一个定义在完整示例源代码中的实用方法;此函数准备在web页面中显示以便用于调试的简单XML。
请注意,相关数据只在该页面的历史记录中进行持久化;如果浏览器被关闭,或者用户打开一个新窗口并再次键入AJAX应用程序的地址,则该历史记录数据对于新的Web页面不可用。历史记录数据只有在用到后退或前进按钮时才被持久化,当用户关闭浏览器或清空缓存的时候就会消失。如果想真正长期持久化,请参阅Ajax MAssive Storage System (AMASS)。
我们的简单示例已经完成。您可以演示或下载完整源代码。
示例2:O'Reilly Mail
我们的第二个例子是一个简单的AJAX电子邮件模拟应用程序的示例,即O'Reilly Mail,它类似于Gmail。O'Reilly Mail描述了如何使用dhtmlHistory类来控制浏览器的历史记录,以及如何使用historyStorage对象来缓存历史记录数据。
O'Reilly Mail用户界面由两部分组成。在页面的左边是一个带有不同电子邮件文件夹和选项的菜单,例如收件箱、草稿箱等。当用户选择了一个菜单项(如收件箱),就用这个菜单项的内容更新右边的页面。在一个现实应用程序中,我们会远程获取并显示选择的信箱内容,不过在O'Reilly Mail中,我们只显示已选择的选项。
O'Reilly Mail使用RSH框架向浏览器历史记录中添加菜单变化并更新地址栏,允许用户利用浏览器的后退和前进按钮为应用程序做收藏书签和跳到上次变化的菜单。
我们添加一个特殊的菜单项——地址簿,以说明如何来使用historyStorage。地址簿是一个由联系人名称和邮件地址组成的JavaScript数组,在一个现实应用程序中,我们会从一台远程服务器取得这个数组。不过,在O'Reilly Mail中,我们在本地创建这个数组,添加几个名称和电子邮件地址,然后将其保存在historyStorage对象中。如果用户离开Web页面后又返回该页面,那么O'Reilly Mail应用程序将重新从缓存检索地址簿,而不是再次联系远程服务器。
我们用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 'bkn3@columbia.edu'", "John Doe 'johndoe@example.com'", "Deanna Neuberg 'mom@mom.com'"]; // 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"); }
处理历史记录变化的代码也很简单。在下面的源代码中,无论用户按后退还是前进按钮,都将调用handleHistoryChange。使用O'Reilly Mail定义的displayLocation实用方法,我们可得到newLocation并使用它将我们的用户界面更新到正确的状态。
/** 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; }
您可以演示O'Reilly Mail或者下载O'Reilly Mail源代码。
结束语
现在我们已经了解了如何使用RSH API来使AJAX应用程序支持书签以及后退和前进按钮,并提供了示例代码,您可参考该示例来创建自己的应用程序。希望您能利用书签和历史记录的支持来增强AJAX应用程序。
参考资料
下载此文的所有示例代码。
下载RSH框架。
演示O'Reilly Mail或者下载O'Reilly Mail源代码。完整的示例下载还包括更多供试用的示例。
Coding in Paradise:作者的weblog,内容涵盖了AJAX、DHTML以及Java技术和利用协作技术的新开发,例如WikiWikis。
"Coding in Paradise: AJAX: Bookmarks and Back Buttons, Advanced Example"
"Coding in Paradise: Safari: No DHTML History Possible"
"Coding in Paradise: AJAX Tutorial: Saving Session Across Page Loads Without Cookies, On The Client Side"
"Coding in Paradise: AJAX History Libraries"
原文出处:http://www.onjava.com/pub/a/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html
作者简介
Brad Neuberg 为开源社区做了大量工作,为Mozilla、JXTA、Jakarta Feed Parser等项目贡献了代码。
发表评论
-
用dhtmlHistory解决ajax带来的问题(浏览器不能使用后退按钮)
2006-12-04 21:07 3206百事通信息网 dhtmlHistory应用其实很简单.当页面 ... -
DWR小结DWRUtil篇
2006-11-28 11:46 11571百事通信息网 $();<o:p>< ... -
js时间格式化工具类
2006-11-10 00:01 6238百事通信息网 function DateUtil(){} ... -
js添加Flash方法
2006-10-27 19:43 2693百事通信息网 function Common() {} ... -
注册验证代码整理(dwr+js)
2006-10-27 19:38 4901百事通信息网 1、校验工具类 function ChkUt ... -
js客户端验证的工具类
2006-10-26 22:28 3236common.js //扩展String类功能 //删除 ... -
[转]js常用代码
2006-10-26 17:17 1668click() 对象.click() 使对象被点击。 clos ... -
[转]JavaScript高级应用:使用DOM技术操纵文档
2006-10-26 15:05 2544在前端展现越来越丰富的今天,DOM对象可以说变得非常重要(其实 ... -
[转]为AJAX实现互斥
2006-10-26 11:46 1779为AJAX实现互斥 时间:2 ...
相关推荐
4. **历史记录和书签**:默认情况下,使用Ajax的页面无法添加到浏览器的历史记录中,不利于用户通过书签或后退按钮访问。 在压缩包中,"AJAX开发简略(含续一)2.pdf"可能是详细的Ajax教程,涵盖Ajax的基本概念、使用...
- **搜索**:某些使用了AJAX的搜索引擎不允许用户使用浏览器的后退按钮查看之前的搜索结果,这可能会影响用户体验。 - **基本的导航**:使用AJAX进行网站内部导航不是一个好主意,因为这可能会增加复杂性而不带来...
10. **AJAX的局限性**:提及AJAX不能触发浏览器的前进/后退按钮,以及无法在书签中保存状态等问题。 通过学习这份PDF文档,开发者将能够熟练掌握AJAX技术,从而构建更加动态和交互式的Web应用程序。同时,了解并...
4. 回退功能受限:由于页面没有刷新,使用浏览器的“后退”按钮可能无法回到之前的状态。 **四、AJAX的进阶应用** 1. **jQuery和库支持**:jQuery等库提供了更简洁的API来处理AJAX,简化了跨浏览器的兼容性问题。 ...
8. **Ajax的优缺点**:了解Ajax能提升用户体验,减少服务器负载,但同时也会导致部分页面无法被书签或前进/后退按钮正确处理。理解这些优缺点有助于在实际开发中合理运用Ajax。 9. **AJAX与RESTful API**:随着Web...
3. **历史记录和书签**:不恰当的使用会影响浏览器的前进和后退功能,以及生成书签。 4. **离线状态**:如果用户网络中断,Ajax请求可能会失败。 **Ajax开发步骤:** 1. **创建XMLHttpRequest对象**:`var xhr = ...
- **页面跳转困难**:基于Ajax的页面,无法直接通过书签或后退按钮访问历史状态。 五、Ajax的应用场景 Ajax广泛应用于各种Web应用,如: - 实时聊天系统:发送消息时,无需刷新整个聊天窗口。 - 表单验证:提交前...
6. 重提交:GET请求可以被用户直接通过浏览器的前进/后退按钮重复,可能导致数据的重复提交;POST请求在用户按下后退按钮时,浏览器通常会提示是否重新提交。 在实现Ajax分页时,如果只是简单的获取数据且数据量...
1. **导航后退和前进按钮**:为了保持浏览器的历史记录功能,Ajax应用可以通过存储每次Ajax请求的状态来实现后退和前进功能。当用户点击这些按钮时,应用可以根据存储的状态恢复到之前或之后的页面状态。 2. **书签...
Ajax的核心在于使用`XMLHttpRequest`对象进行异步请求和处理数据。当用户与页面交互时,如点击按钮或修改表单,Ajax会通过JavaScript捕获这些事件,并在后台向服务器发送请求。服务器接收到请求后,返回所需的数据,...
由于Ajax请求不会导致页面整体刷新,所以需要额外处理页面状态管理,确保用户导航和前进/后退按钮能够正常工作。这可能涉及到URL路由、历史记录管理和单页应用程序(SPA)架构。 **9. Ajax的优缺点** 优点:提高...
4. **页面历史和书签问题**:Ajax更新的内容无法被浏览器的历史记录跟踪,不利于书签和后退操作。 ### 四、现代Ajax的改进 现代Web开发中,有新的技术如Fetch API和Promises,以及基于这些技术的库,如Axios,它们...
5. **处理回退和前进**:监听`popstate`事件,以便在用户点击浏览器的前进/后退按钮时,能正确地重新加载之前的状态。 **Pjax的优势** 1. **快速加载**:只加载需要的页面部分,减少数据传输量,提高页面加载速度。...
比如,由于AJAX请求是在后台进行的,因此浏览器不会更新地址栏,用户无法直接通过书签或前进/后退按钮访问这些请求的结果。此外,AJAX请求也无法被搜索引擎爬虫抓取,可能影响网站的SEO(搜索引擎优化)。为了解决...
- 历史记录和书签:使用History API和PushState方法可以解决Ajax页面无法被书签或前进/后退按钮访问的问题。 - SEO(搜索引擎优化):由于搜索引擎爬虫通常不执行JavaScript,所以需要采用服务器端渲染或JSON API...
- 更新URL参数:实现浏览器前进后退功能,以及书签兼容。 - 事件委托:优化性能,避免为每个页码按钮添加单独的事件监听器。 3. **HTML结构(页面标签.txt)**: - HTML(HyperText Markup Language)定义了网页...
2. **历史记录管理**:通过集成浏览器的历史记录管理,用户可以使用前进和后退按钮在页面之间导航,即使这些页面是通过Ajax请求加载的。 3. **URL更改**:Ajaxify可以更新浏览器的URL,使得每个Ajax请求都有一个...
1. **用户界面**:包括地址栏、后退/前进按钮、书签目录等。 2. **浏览器引擎**:负责查询及操作渲染引擎。 3. **渲染引擎**:解析 HTML、CSS 并显示页面。 4. **网络模块**:处理网络调用,如 HTTP 请求。 5. **UI ...
5. **URL管理**:`jquery.address.js`插件可以用来捕获和设置URL,以便用户可以通过浏览器的前进和后退按钮导航到之前选择的地址。同时,URL可以用于书签或分享,方便其他用户直接跳转到特定地址状态。 6. **初始...