Ajax保留浏览器历史的解决方案

解决方案如下：

方案一：使用window.Onhashchange事件

如下面Html片段，点击不同的连接，在mainPanel中加载不同的页面：

< ul class ="menu" >
< li >< a href ="/home/index#page=1" >page1 </ a ></ li >
< li >< a href ="/home/index#page=2" >page2 </ a ></ li >
< li >< a href ="/home/index#page=3" >page3 </ a ></ li >
</ ul >

< div id ="mainPanel" >
</ div >

首先写一个方法来获取当前url中指定key的hash值，如下：

<scripttype="text/javascript">
// 获取指定key的hash值
functiongetHash(key,url){
varhash;
if(!!url){
hash=url.replace(/^.*?[#](.+?)(?:\?.+)?$/,"$1");
hash=(hash==url)?"":hash;
} else{
hash=self.location.hash;
}

hash=""+hash;
hash=hash.replace(/^[?#]/,'');
hash="&"+hash;
varval=hash.match( newRegExp("[\&]"+key+"=([^\&]+)","i"));
if(val== null||val.length<1){
return null;
} else{
returndecodeURIComponent(val[1]);
}
}
</script>

使用onhashchange事件触发ajax请求：

<scripttype="text/javascript">
functionloadPanel(){
varpage=getHash("page");
if(page==1){
$("#mainPanel").load("/home/page1");
}
if(page==2){
$("#mainPanel").load("/home/page2");
}
if(page==3){
$("#mainPanel").load("/home/page3");
}
}
$(window).bind("hashchange",loadPanel);
</script>

到这里工作已经完成了80%，为什么是80%呢，这里面还有一个问题：

当你直接在浏览器(新开的标签页)的地址栏里输入这样的地址：http://localhost:3859/home/index#page=3或者通过QQ发给你的好友，看到的并不是如你所想的应该是page=3的内容，而是http://localhost:3859/home/index的内容。原因很简单——页面加载的时候不会触发onhashchange事件。

所以我们要在上面的代码追加一行：

$(loadPanel);
// 或者
$( function(){$(window).trigger("hashchange");});

onhashchange事件location.hash发生改变的时候触发，可以很好解决AJAX刷新后退/前进键失效的问题，是一个新的事件，

目前chrome,firefox,Opera,Safari,IE8及以上版本浏览器都兼容。

其实对于那些死抱着IE6,IE7不放的用户，咱也没必要给他们提供这样的用户体验。

方案二：使用jQuery.History.js

对于要兼容IE6、IE7的情况，笔者一直使用jquery.history.js这个插件（https://github.com/tkyk/jquery-history-plugin）。

这个插件它会去判断浏览器是否支持onhashchange事件，如果不支持，就定时(每个100毫秒)循环判断hash有没有变化，从而执行相应处理。

如：

<scriptsrc="/Scripts/jquery.history.js"type="text/javascript"></script>
<scripttype="text/javascript">
$( function(){
$.history.init( function(hash){
varpage=getHash("page");
if(page==1){
$("#mainPanel").load("/home/page1");
}
if(page==2){
$("#mainPanel").load("/home/page2");
}
if(page==3){
$("#mainPanel").load("/home/page3");
}
});
});
</script>

另外，这个插件已经不再继续更新维护了。

方案三：jquery.ba-hashchange.js

jquery.ba-hashchange.js(http://benalman.com/projects/jquery-hashchange-plugin/)

这个插件的实现原理和jquery.history.js完全一样。循环间隔为50毫秒。

它overwrite了window.hashchange事件，使其能够兼容全部浏览器。

使用如下：

<scriptsrc="/Scripts/jquery.ba-hashchange.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(window).hashchange( function(){
varpage=getHash("page");
if(page==1){
$("#mainPanel").load("/home/page1");
}
if(page==2){
$("#mainPanel").load("/home/page2");
}
if(page==3){
$("#mainPanel").load("/home/page3");
}
});
$(window).hashchange();
</script>