AJAX 网页保留浏览器前进后退等功能

AJAX页面保留浏览器前进后退等功能

在大量使用AJAX技术的网页中，用户往往不敢随意刷新页面，因为刷新后可能看到与之前完全不同的内容。暂且不讨论在内容大量更新时是否应该使用AJAX的问题，本文主要探讨如何保留浏览器的前进、后退以及刷新等功能。

假设有一个包含两个Tab标签的页面，每个Tab中包含大量文字，甚至可能有图片。如果用户当前认为Tab2的内容很好，并将其加入收藏夹或分享给朋友。下次通过收藏夹打开或朋友点击链接时，很可能看到的是Tab1的内容，需要再次点击Tab2才能看到想要的内容。如果页面逻辑更复杂，可能需要多步操作才能回到期望的内容，这样的体验显然不佳。

要使刷新、加入收藏夹等功能正常工作，需要让当前的操作在URI上有所体现。但改变URI的同时不能引起页面刷新，因此可以通过修改URI中的片段（fragment）来实现。例如，点击Tab1后将URI改为http://www.example.com/example.html#tab1，点击Tab2则将URI改为http://www.example.com/example.html#tab2。

 
function ShowTab1() {
"#tab2").hide();
"#tab1").show();
window.location.hash = "#tab1";
}; 
function ShowTab2() {
"#tab1").hide();
"#tab2").show();
window.location.hash = "#tab2";
}; 

这样做已经使得URI产生了变化，但是无论通过http://www.example.com/example.html#tab1还是http://www.example.com/example.html#tab2访问页面都是显示Tab1的内容，所以还需要在页面载入时读取#后的内容。

 
(document).ready(ShowTab());
function ShowTab() {
if (window.location.hash == "#tab2")
ShowTab2();
else
ShowTab1();
} 

这样，刷新和加入收藏夹等功能都已经可以使用了，不过前进和后退还是会有麻烦。虽然这两个按钮已经变得可用，但是点击时网页的内容并没有发生变化。我们需要用到body的onhashchange事件。onhashchange事件并不是所有浏览器都支持的，如果要使不支持该事件的浏览器也检测#后内容的变化，可能需要写一个函数定期检测window.location.hash的变化或者自己实现onhashchange事件。

示例代码打包下载 (Visual Studio 2010)