ajax 浏览器后退,几种方法实现ajax请求内容时使用浏览器后退和前进功能

ajax是一个非常好玩的小东西，不过用起来也会存在一些问题。

我们可以利用ajax进行无刷新改变文档内容，但是没办法去修改URL，即无法实现浏览器的前进与后退、书签的收藏功能。

利用location的hash部分和使用window.onhashchange来实现

hash就是uri中#及后面的部分，例如：www.google.com.hk#123的#123。当只有hash部分发生变化时，浏览器的历史记录会产生记录，但不会向服务器发出请求，这时按后退键地址栏的uri会变化但页面内容不变。

通过window.onhashchange事件来监听hash值的更改。

ie6、7均不支持onhashchange，但可以用setInterval定期检查hash的改变，或者onload中检查的方法

曾今经典场景：Gmail借助ifram和hash实现前进和后退功能

而这样的方式对搜索引擎是十分不友好的，twitter和google约定使用hash bang (#!xxx)，也就是hash后面的第一个字符为感叹号，这样的网址他们是会爬取的，但是其他搜索引擎不支持。

html5的history

在HTML4，Histroy对象有下面属性方法：

length：历史堆栈中的记录数。

back()：返回上一页。

forward()：前进到下一页。

go([delta])：delta是个数字，如果不写或为0，则刷新本页；如果为正数，则前进到相应数目的页面；若为负数，则后退到相应数目的页面。

在HTML5中，新增了两个方法：

pushState(data, title [, url])：往历史堆栈的顶部添加一条记录。data为一个对象或null，它会在触发window的popstate事件(window.onpopstate)时，作为参数的state属性传递过去；title为页面的标题，但当前所有浏览器都忽略这个参数；url为页面的URL，不写则为当前页。

replaceState(data, title [, url])：更改当前页面的历史记录。参数同上。这种更改并不会去访问该URL。

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera Safari

replaceState, pushState

5

4.0 (2.0)

10

11.50

history.state

18

4.0 (2.0)

10

11.50

三、开源的PJAX库

welefen封装的库，对jquery、qwrap和kissy都做了封装，github地址

Yahoo团队 PJAX地址

并不是页面中所有的链接都需要使用PJAX加载，所有在需要这个东西的a标签上加一个属性，如data-pjax=true，然后统一添加事件。