Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)归海一刀published in(发表于) 2014/3/16 2:53:10 AJAX:如何处理书签和后退按钮_[AJAX教程]
在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页面时触发的“假加载”事件。 在示例代码中,我们只想在第一次加载页面的时候添加历史记录事件;如果用户在加载页面后按后退按钮返回该页面,我们就不想重新添加任何历史记录事件:
示例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()方法保存和检索地址簿:
赞