AJAX中的Back Button/Bookmarking问题和Nikhil Kothari的Atlas解决方案

最新推荐文章于 2024-11-02 12:42:04 发布

weixin_30500289

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量70

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Grisson/archive/2006/09/13/502773.html

版权

AJAX中的Back Button/Bookmarking问题和Nikhil Kothari的Atlas解决方案

传统的web应用一般含有多个页面，用户在浏览时，浏览器地址框里的地址会随着页面的变动而更新。用户可以bookmark页面把网页地址收藏，之后通过收藏夹里的地址回到同个页面。用户在网站浏览时，也可以使用浏览器的向前/向后按钮来回访问多个网页。

然而，AJAX的web应用存在于单个页面中。用户在操作AJAX应用时，页面的内容会变，但浏览器地址框里的地址是不变的，用户也无法使用向前/向后按钮来往返于当前页面的各个状态。很明显，从表面上看，AJAX应用好像破坏了World Wide Web的规矩 ── 一个URL代表一个资源。虽然，从本质上来说，AJAX应用是个web应用，而不是普通的web文件系统，不支持bookmarking和向前/向后按钮也情有可原。但如果用户的期望有所不同，或者需要对这些中间状态bookmark或者需要能够在这些状态间往返，那么这就是个需要解决的问题。

很明显，要支持bookmarking中间状态，那么AJAX必须能改变这些中间状态对应的浏览器地址框里的地址的值，但又不能改变AJAX应用对应的页面的URL，解决方案是利用客户端的anchor hash ，即在URL上添加或改变#后面的东西。这样，

http://www.dogwood.com.cn#abc
http://www.dogwood.com.cn#english

从客户端来看，这是2个可以bookmark的不同的地址，但对服务器来说，却是同样的请求。#是个客户端的东西，在服务器端得不到#后面的值，因为浏览器是不把#后面这部分传回服务器的。

在FireFox里，用脚本改变#后面的值就会往浏览器的历史里添加一项，这样AJAX应用在用户做了什么操作改变页面状态时，如果同时改变这个#值的话，用户就能通过Back Button回到早先的#值。假如这个值足够详细，那么AJAX应用就能凭这个值返回对应这个值的页面状态。当然你需要一个机制来检测当前页面的#值是否改变了，常用的做法是用一个timer来做。可惜，在IE里，光是改变#值是无法生成新的历史项的，解决办法是在页面内嵌一个IFRAME，在用户做了什么操作改变页面状态时，改变这个IFRAME的src属性，这样就能生成一个新的历史项。用户按Back Button时，AJAX应用就可以通过查看这个src属性来返回对应的页面状态。

常见的解决方案都要求你写不少的Javascript，譬如在dojo工具包里 (参考 http://dojotoolkit.org/intro_to_dojo_io.html)，

var sampleFormNode = document.getElementById("formToSubmit");

dojo.io.bind({
url: "http://foo.bar.com/sampleData.js",
load: function(type, evaldObj){
// hide the form when we hear back that it submitted successfully
sampleFormNode.style.display = "none"
},
backButton: function(){
//在这里，你处理用户点击Back Button后的情形
// ...and then when the user hits "back", re-show the form
sampleFormNode.style.display = ""
},
forwardButton: function(){
//在这里，你处理用户点击Forward Button后的情形
// and if they hit "forward" before making another request, this
// happens:
sampleFormNode.style.display = "none" // we don't re-submit
},
formNode: sampleFormNode
});