AJAX如何处理书签和翻页按扭(上)

原创 2005年11月01日 22:24:00

AJAX如何处理书签和翻页按扭

原文地址:AJAX: How to Handle Bookmarks and Back Buttons
Making AJAX behave better in the browser
翻译:我要去桂林

本篇文章提供了一个开源JavaScript它提供了给AJAX应用程序中添加书签和会退按钮的功能。在学习完这个教程后,开发者将能够对开发AJAX应用碰到的问题获得一个解决方案,这个特性甚至Google Maps 和 Gmail 现在都不提供:提供一个强大的,可用的书签和前进回退按钮,如同其他的WEB应用一样的行为。

AJAX“如何处理书签和回退按钮”阐述了AJAX应用程序开发书签和回退按钮功能碰到的严重的问题;可以解决以上问题的一个开源框架,并提供真实、简单的历史记录库,还提供了几个运行中的例子。

本文把这个框架提供的重要发现分两个部分来说明:首先,一个隐藏的HTML表单用来缓存大量短暂的在客户端信息。这些缓存为网页导航提供了强大的支持。其次,一个隐藏的IFrame和超级链接用来截取和记录浏览器的历史事件提供回退按钮和向前按钮的支持。以上两个技术都是通过包装在一个简单的JavaScript库中来实现简单开发。

问题:

书签和回退按钮在传统的多页面的Web应用程序中工作的非常好。当用户浏览网站的时候,浏览器的地址栏记录随新的URLs更新,这些记录可以拷贝到email 或者 书签中供以后使用。回退和前进按钮可以帮助用户在他浏览过的网页中向前或向后翻动。

AJAX 应用程序却是不同的,他们是运行在一个网页中的复杂程序。浏览器并不是为这类程序制作的―――这类程序是过去的,在每次鼠标点击的时候需要重新刷新整个页面。

在类似Gmail的AJAX软件中,浏览器的地址栏在用户选择功能和改变程序状态的时候保持不变,这让书签在这类程序中无法使用。未来,如果用户按下“回退”按钮来撤销上次的动作,而浏览器和应用程序分离的状况会让用户很吃惊。

解决方案:

开源Really Simply History (RSH)框架可以用来解决上面的问题,为AJAX应用程序提供书签和控制“回退”、“向前”按钮的功能。RSH 目前还是Beta 状态,可以在Firefox 1.0 , Netscape 7+,Internet Explorer 6+等浏览器上工作,目前还不支持Safari浏览器。可以参考:编码天堂:Safari:不可能的DHTML历史记录。

有几类AJAX框架目前也支持书签和历史访问的问题,但这些框架因为实现方式的不同,目前都有几个大Bug。未来,很多AJAX框架,比如Backbase 和 Dojo 将会整合历史浏览的功能;这些框架为AJAX应用程序采用完全不同的编程模型,强迫程序员使用完全不同的方式来实现历史浏览的功能。

相反,RSH 是一个可以包含在现有AJAX系统的单模块。未来,RSH库会进一步改进避免和其他框架的相关功能冲突。

RSH 历史框架由两个JavaScript类组成:DhtmlHistory 和 HistoryStorage。

DhtmlHistory 类为AJAX应用程序提供历史浏览记录的抽象。AJAX 页面 add() 历史浏览记录事件到浏览器,保存指定新的地址和相关的历史数据。DhtmlHistory 类使用Hash连接更新浏览器当前的URL,比如:#new-location,同时把历史数据和新的URL关联。AJAX 应用程序把自己注册为历史浏览的监听器,当用户使用 “前进”“回退”按钮来浏览时,历史浏览时间被触发,调用 add() 方法来提供给浏览器新的地址,并保存历史数据。

第二个类: HistoryStorage允许程序员保存任意的历史浏览数据。在普通的网页中,当用户浏览到一个新的网址,浏览器卸载并清除当前网页所有的程序和JavaScript状态,如果用户返回时,所有的数据都丢失了。HsitoryStorage 类提供带有Hash表的API通过 put() , get() , hasKey() 等方法来解决这类问题。上面的方法允许程序员保存用户离开网页时的任意数据,当用户按“回退”按钮重新返回时,历史数据可以通过HistoryStorage类来访问。我们起初通过使用隐藏的表单字段来实现,因为浏览器自动保存一个表单中字段值,甚至用户离开网页的时候也如此。

例子:

先从一个简单的例子开始吧:

首先需要RSH框架的网页中需要包含 dhtmlHistory.js 教本

 

DHTML 历史应用程序必须在同级目录下包含blank.html文件。这个文件自动被RSH框架绑定需要被IE浏览器使用。正如刚才提到的,RSH使用一个隐藏的Iframe来保存和增加IE浏览器的改变。这个Iframe需要指定一个实际的文件位置才能正常工作,这就是blank.html。

RSH 框架创建了一个叫dhtmlHistory的全局对象这是控制浏览器历史浏览记录的入口点。第一步在网页完成装载后需要初始化 dhtmlHistory 对象。

 

然后程序员使用 dhtmlHistory.addListener() 方法订阅历史浏览事件的改变。这个方法使用了一个JavaScript的回调函数,当记录历史浏览事件发生时这个函数接收两个参数。网页的新地址和任何的历史数据都应该关联到这个事件:

 

historyChange() 方法很直观当用户浏览到一个新的网页时使用一个方法接收 newLocation 同时其他的 historyData 可以选择附加到这个事件上

 

 上面用到的Debug() 是一个工具方法用来简单的把消息打印到网页上。第二个参数是Boolean型的,如果设置为真,在新的消息打印的时候将会清楚原来的信息。

Add() 方法。增加一个包含新地址的历史事件比如:“edit:SomePage”,同时也提供了和事件一起存储的可选 historyDate 值。

add()执行后的同时新的地址作为一个链接地址将显示在浏览器的URL地址栏中。比如:在AJAX网页中当前地址是:http://codinginparadise.org/my_ajax_app,执行完: dhtmlHistory.add(helloworld,Hello World Data)后用户将会在浏览器URL地址栏中看到如下的地址:

这是用户可以给这个页面做收藏书签如果用户后来用到这个书签的时候AJAX应用程序可以读取到#helloworld值并用它来初始化网页。RSH框架透明的对URL地址值进行编码和解码。

historyData 在保存比较复杂状态的时候很有用处。这是一个可选的值,他可以是JavaScript的任何类型,比如:数字,字符串,对象等。使用这个功能的一个例子是在一个网页字符编辑器中,如果用户离开当前网页。当用户回退时,浏览器将会把对象返回给历史浏览变动监听器。

 

开发者可以给historyData提供带有嵌套对象和用数组表示的复杂JavaScript对象。然而,DOM对象和浏览器支持的脚本对象XMLHttpRequest,并不保存。注意:historyData 并不随书签一起持续化,当浏览器关闭,浏览器缓存被清除和用户清除历史记录的时候,他也就消失了。

版权声明:本文为博主原创文章,在不删除、修改文章内容的情况下,可以自由转载。

一个很好用的Ajax翻页控件

  • 2009年05月14日 14:31
  • 69KB
  • 下载

ajax无翻页刷新简单实例2

1,HTML页面: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">...

Ajax+Jquery+Json 翻页

  • 2012年12月06日 20:40
  • 4.64MB
  • 下载

不需要ajax实现搜索数据保留翻页

今天突发奇想,不需要ajax实现翻页效果,并且保留页面搜索数据及其他填写数据,在DZ框架中实现,效果一样! html{_overflow-y:scroll} .one {background-col...

PHP Ajax 页面无刷新 翻页

相信学习php的大部分都了解ajax实现网页局部刷新技术。因为互联网的发展需求要求我们必须做到。如果连基本的ajax都不会。用户体验该会是多么的糟糕啊!网站中用到ajax的时候很多。例如:用户留言评论...

ajax(三)之省市二级菜单联动(从sql获取数据),无刷新翻页

分析:二级菜单栏,主要是数据库的设计,设计好就非常简单。第2级菜单栏中带有1级菜单栏的索引,只要有一级菜单栏的索引,就可以找到城市。上代码 思路:获取一级菜单省份de值,在Servlet中收集到...

[Python爬虫]利用Selenium等待Ajax加载及模拟自动翻页,爬取东方财富网公司公告

1.背景 首先,打开东方财富网公司公告页面(“http://data.eastmoney.com/notices/”)。 单击右键,选择检查“长江电力”处的源代码,如图: 点击右键,查看源代码...

使用Ajax动态添加表格获得后台数据翻页异步刷新(struts2下)

用Ajax生成表格不能使用Jquery动作 ,只能用js,因为没法获得id 和name属性 如果有三层字符串双单引号嵌套的话可以用转义符‘’\‘’ 一开始在js中[注解Mark问题处]一开始在ap...
  • i9577
  • i9577
  • 2016年03月21日 17:46
  • 1444

封装ajax请求数据翻页效果

优惠券管理 首页 Hideric退出  收起菜单 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX如何处理书签和翻页按扭(上)
举报原因:
原因补充:

(最多只允许输入30个字)