使用Dojo为Ajax应用增添前进 / 后退能力的两种解决方案

简介:基于 Ajax 的 Web 应用最为明显的特征在于使用了浏览器内部原生支持的 XMLHttpRequest 对 象与后台服务器进行数据通信,由于这种通信方式不需要页面的刷新动作,因而无论与后台发生了多少次 通信,浏览器的 URL 会一直保持在初始地址不变。这随之而来的一个问题便是不断变化的页面状态信息 无法记录到浏览器的历史记录堆栈中,从而使得用户无法通过浏览器的前进 / 后退按钮在不同状态页面 间进行切换。Dojo 作为当今最为流行的 JavaScript 开发工具包之一,在其最新发布版本 1.4 中,专门 提供了 dojo.back 和 dojo.hash 的两种方法用于解决此类问题。本文旨在分析比较两种方法背后所采用 技术原理的基础之上,给出基于两种方法构建的示例解决方案,并探讨如何针对不同类型的 Ajax 应用选 择一套合适自身的解决方案。

问题解决的基本思路和技术基础

浏览器能够支持在用户访问过的页面间进行前进 / 后退的操作,依赖于内部维持的 history 对象。 出于安全性的考虑,浏览器并不允许 JavaScript 脚本对该对象进行增删改之类写操作,而只是可以通过 history. back/forward() 等方法进行访问。既然在页面状态发生变化时,无法通过脚本直接去影响浏览 器的历史信息,那么只有通过 URL 的变化来触发浏览器增加一条新的历史记录。这也就是说需要将 Ajax 应用的不同页面状态与 URL 进行一种一对一的映射,并且能够在回退或前进到某一 URL 之时,应用本身 能够在页面无刷新的情况下跳转到正确的页面状态。

那么,如何对 Ajax 应用的初始 URL 进行改变,而同时这种变化的切换又不会引起页面的重新加载呢 ?答案只有一个,那就是借助用于页面内资源片段定位目的的“片段标识符”(fragment identifier) ,即 URL 中“#”符号后的字符串(hash string)。当浏览器向服务器端请求资源时,片段标识符并不 会连同 base URL 一同发往服务器端,而只是在得到服务器返回的结果之后帮助浏览器快速定位到被相应 的锚点(anchor)所标识的资源片段,即使无法找个对应的锚点,浏览器也并不会报错。正是基于浏览器 的这一特性,构建片段标识符与页面状态之间的映射关系成为了解决此类问题的基础。

目前,除 IE 之外的浏览器都能够将因 hash 字符串改变而产生的新 URL 作为一条新的记录加入到浏 览器的历史堆栈中,通过对 window.location.hash 属性的读写,JavaScript 脚本可以获取并设置 hash 字符串,从而间接达到通过脚本了影响浏览器历史记录的目的。这里需要特别指出的是,IE 并不认为有 必要将非法片段标识符引发的变化等同于 URL 发生了变化,也便不会进行任何记录历史信息的操作,这 时最为常见的一种解决方法是在页面中嵌入一个隐藏 iframe,由于浏览器可以对 DOM 树中 iframe 节点 的 src 属性进行历史记录跟踪,这样通过在逻辑上建立一条“页面 URL -- 页面内 iframe URL -- 页面 状态”的对应链,同样可以在 IE 中建立片段标识符与页面状态的联系。

dojo.back 与 dojo.hash 实现原理的比较

既然已经明确了问题的解决方式,那么转到具体实现的角度上来,建立这种页面 URL 与页面状态之间 的映射关系,存在着两种实现方式:其一是以页面状态的迁移为主导,在状态首先改变之后,为页面 URL 添加相应的 hash 字符串,这种方式为 dojo.back 所采用;其二则是以 URL 的变化为主导,在状态变化 之前改变页面的 hash 字符串,而后页面再根据字符串中所包含的信息完成页面状态的迁移任务,这种方 式则是被 dojo.hash 所建议。接下来的部分,本文将对这两种方式背后的实现机理进行一个更为深入透 彻的分析介绍。

dojo.back 实现原理

Dojo 自其 1.0 发行版本起就开始向开发人员提供基于 dojo.back 的关于浏览器历史记录问题的解决 方案。Dojo.back 支持两种表现形式的前进 / 后退操作,二者不同之处体现在当页面状态进行改变的同 时,URL 是否也随之一同发生变化。更具体地来说,就是开发人员可以选择在不改变浏览器 URL 的情况 下,为 Ajax 应用增添前进后退的能力。

之所以这样设计,是因为 dojo.back 认为在不需要为 Ajax 应用增添“书签收藏”这种类似能力时, 没有必要将页面的变化体现到 URL 上面,用户始终面对一个固定不变的 URL 就可以了。而这种灵活的设 计方式,也完全是 dojo.back 内部特定的实现机理所决定的。

时间: 2024-12-30 10:16:36

使用Dojo为Ajax应用增添前进 / 后退能力的两种解决方案的相关文章

jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)_jquery

在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理 简单的介绍下WebMethod方法的用法 1.修饰符主要用public static修饰 2.方法前面加上[WebMethod]属性表明这是WebMethod方法 3.前台html页面(Client端)访问时要使用post方法,和后台.cs文件进行数据交互,否则会返回整个html页面. 4.当后台页面返回数据后

Ajax保留浏览器历史的两种解决方案(Hash&Pjax)

总是在github down点东西,github整个界面做的不错,体验也很好~对于其中的源代码滑动的特效最为喜欢了~刚开始以为这个只是普通的ajax请求效果,但是发现这个特效能够导致浏览器地址栏跟随变化,并且再点击前进后退按钮后又可以将代码滑回滑出~~于是乎就来研究下吧~ 一.通过锚点Hash实现: 在这方面其实国内很早就有做了,比如淘宝画报,通过的是在地址栏后面加#锚点实现的,浏览器是可以识别锚点为单位的历史记录的.但不是说页面本身有这个锚点,锚点的Hash只是起到一个引导浏览器将这次的记录推

如何使用Ajax解决书签和后退按钮失效问题

本文将展示一个开源JavaScript库,该脚本库给AJAX应用程序带来了书签和后退按钮支持.在学习完这个教程后,开发人员将能够获得对一个AJAX问题的解决方案(甚至连Google Maps和Gmail现在都不提供该解决方案):一个强大的.可用的书签和后退前进功能,其操作行为如同其他的Web应用程序一样. 本文将阐述目前AJAX应用程序在使用书签和后退按钮方面所面临的严重问题:展示Really Simple History(RSH)库--一个可以解决以上问题的开源框架,并提供几个运行中的例子.

使用Dojo的Ajax应用开发进阶教程,第2部分: 富含语义的HTML

相关文章:使用Dojo的Ajax应用开发进阶教程,第1部分 HTML 是开发 Web 应用的基础.目前已经有数以千亿的使用 HTML 语言编写的网页.HTML 语言的规范也不断在演进和更新.HTML 语言虽然上手比较简单,但是如何开发出组织良好.结构清晰和可维护性高的 HTML 文档,对很多Web开发人员来说,也是一个值得探讨的话题.随着 Ajax 应用的流行,一种称为"富含语义的 HTML(Semantic HTML)"的最佳实践,逐渐被广大 Web开发人员所推崇.这种实践的主要思想

pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新_AJAX相关

使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash锚点 来解决 不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的问题 再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度 2. 随后出现一种 hashbang 的技术,即在url后加上标记 #!/myPath 来解决上述的问题 通过一个路径定

pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash锚点 来解决 不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的问题 再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度 2. 随后出现一种 hashbang 的技术,即在url后加上标记 #!/myPath 来解决上述的问题 通过一个路径定

用Dojo实现Ajax请求:XH“.NET研究”R、跨域、及其他

在任何浏览器上方便地实现Ajax请求是每一个Ajax框架的初衷.Dojo在这方面无疑提供了非常丰富的支持.除了XMLHttpRequest之外,动态script.iframe.RPC也应有尽有,并且接口统一,使用方便,大多数情况下都只需要一句话就能达到目的,从而免除重复造轮子的麻烦.而且,Dojo一贯追求的概念完整性也在这里有所体现,换句话说,在使用Dojo的Ajax工具的过程中不会感到任何的不自然,相反更容易有触类旁通的感觉,因为API的模式是统一的,而且这里涉及到的某些概念(如Deferre

一起谈.NET技术,用Dojo实现Ajax请求:XHR、跨域、及其他

在任何浏览器上方便地实现Ajax请求是每一个Ajax框架的初衷.Dojo在这方面无疑提供了非常丰富的支持.除了XMLHttpRequest之外,动态script.iframe.RPC也应有尽有,并且接口统一,使用方便,大多数情况下都只需要一句话就能达到目的,从而免除重复造轮子的麻烦.而且,Dojo一贯追求的概念完整性也在这里有所体现,换句话说,在使用Dojo的Ajax工具的过程中不会感到任何的不自然,相反更容易有触类旁通的感觉,因为API的模式是统一的,而且这里涉及到的某些概念(如Deferre

通过history解决ajax不支持前进/后退/刷新的问题

前言: 现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有个小小的劣势,即:不支持浏览器"后退"和"前进"键. 但是,现在我们可以通过H5的histroy属性 解决ajax在交互请求的这个小bug. 事件描述: H5增加了一个事件window.onpopstate,当用户点击那两个按钮就会触 发这个事件.但是光检测到这个事件是不够的,还得能够传些参数,也就是说返回到之前那个页面的时候得知道那个页面的pageIndex.通过 history的pu