分享
 
 
 

AJAX:如何处理书签和后退按钮

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

本文将展示一个开源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。

目前有几个AJAX框架对书签和历史记录问题有所帮助;但这些框架目前都有几个由于实现而造成的重大Bug。此外,很多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"?>'

+ '

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有