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
});
微软ASP.NET产品组的架构师Nikhil Kothari提供了一个服务器端的基于事件的Atlas原型，
Back Button Support for Atlas UpdatePanels
http://www.nikhilk.net/Entry.aspx?id=139
<script runat="server">
private void OnContentListSelectedIndexChanged(object sender, EventArgs e) {
.....
//状态改变，添加历史
history.AddEntry(contentList.SelectedIndex.ToString());
.....
}
private void OnHistoryNavigate(object sender, HistoryEventArgs e) {
//导航改变，调出数据对应数据
.....
//更新页面
mainUP.Update();
listUP.Update();
}
</script>
把客户端浏览器历史的管理封装在服务器端的API里，这样你作为开发人员需要做的是决定用什么信息做导航之用，然后在导航改变之后怎么根据这个信息来调出对应的状态，做法非常干净。
在ASP.NET 1.*的postback模型下，要允许bookmark很难，因为你bookmark的是页面的初始状态。但如果用Atlas以及Nikhil Kothari的思路(或者将来Atlas里的built-in支持)的话，这个问题解决起来就容易多了。

其他一些参考连接：