ajax与前进后退

Ajax可以实现页面的无刷新操作但是，也会造成另外的问题，无法前进与后退，
如果想既可以使用ajax做数据传输右想实现前进后退该怎么办？？

1 .利用location.hash

location.hash可以取到或者设置hash的值，当hash改变的时候window.onhashchange事件会被触发，但是页面加载的时候哪怕有hash值，onhashchange事件也不会触发，因此需要在onload事件中也读取hash进行同样的处理，保证刷新页面也能恢复ajax的页面显示。

测试代码如下
  
  
  
  
      
      
      
  
   
  
   1
  
  

2.利用HTML5 history pushState/replaceState

history.state

当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的，那么history.state是null。

history.pushState(state, title, url)

将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。

• state：与要跳转到的URL对应的状态信息。
• title：页面的题目,假如没有就穿空字符串就可以。
• url：要跳转到的URL地址，不能跨域。

history.replaceState

用新的state和URL替换当前。不会造成页面刷新。

• state：与要跳转到的URL对应的状态信息。
• title：页面的题目,假如没有就穿空字符串就可以。
• url：要跳转到的URL地址，不能跨域。

window.onpopstate

history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。

支持性判断

if ('pushState' in history) {...}