解决ajax前进后退功能
最近的项目中大量使用了ajax技术，但ajax应用中容易导致浏览器的前进后退按钮失效，不产生前进后退功能，这是个很头疼的问题，它严重的破坏了用户美好的体验，但通过改变location.hash值来解决Ajax过程中导致的浏览器前进后退按键失效的问题
Ybole.hash={
url:'',
setHash:function(a){
if(a.join)a=a.join('/');
$.browser.msie?$.locationHash(a):location.hash=a;
},
doHash:function(){
var h = location.hash.replace('#','').split('/');
if(Ybole.hash.url.join()!=h.join()){
Y.searchKeyword(h[0],h[1],h[2]);
}
}
}
$(window).hashchange(function(){
Ybole.hash.doHash();
});
这里主要说的是如何解决以前别人常遇到的重复加载的问题，主要是比较前后的hash值，看其是否相等，再判断是否要触发ajax.
Ybole.hash.url=[p.data.search,p.cate,Ybole.page.curpage];
Ybole.hash.setHash(Ybole.hash.url);这是ajax回调函数里的，保存ajax出发后的hash值避免hash值改变时重复触发
还用到了jquery的一个hashchange插件
因为Javascript对dom的操作是不持久化的，刷新后就恢复原状，而且也不保存历史记录，也就无法前进后退来查看历史了。但是可以采用“地址栏加hash”技术来解决。
地址栏中敲入“页面地址#aaa”就表示跳转到“页面地址 ”的“aaa”这个页内锚点（英文叫做hash）。只要改变“aaa”这个锚点内容，浏览器就认为URL变化，也就会放入浏览历史，这样前进后退问题就解决了。我们只要把不同的AJAX状态通过不同的hash写到地址栏就可以了，当页面加载的时候检测是否有hash值，有的话就读取hash进行相应的ajax还原操作。
location.hash可以取到或者设置hash的值，当hash改变的时候window.onhashchange事件会被触发，但是页面加载的时候哪怕有hash值，onhashchange事件也不会触发，因此需要在onload事件中也读取hash进行同样的处理，保证刷新页面也能恢复ajax的页面显示。
下面是例子代码，为了简单的突出问题，这里没有使用ajax，只是通过dom来修改页面状态。点击文本框，文本框的内容会加1（注意观察地址栏），刷新页面后值也还是增加后的值，而且页面可以前进后退。
代码如下：
[html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>TestDemo</title>
<script src="jquery-1.4.2-min.js"></script>
<script type="text/javascript">
var processHash = function () {
var hashStr = location.hash.replace("#", "");
if (hashStr) $("#txt1").val(hashStr);
}
$(function () {
$("#txt1").click(function () {
var i = parseInt($("#txt1").val());
i++;
$("#txt1").text(i);
location.hash = "#" + i;
});
window.onload = processHash;
window.onhashchange = processHash;
});
</script>
</head>
<body>
<input type="text" id="txt1" value="1" />
</body>
</html>
浙公网安备 33010602011771号