Ajax局部页面刷新和history

ajax能实现页面的无刷新加载，但是会造成无法前进后退的问题。

我们可以人为的使用history.pushState来人造历史信息， 并且通过监听popstate事件来知道用户点击了浏览器后退或前进按钮，然后将页面元素还原到历史上的某个状态。

// 点击查询按钮的时候人为构造一个浏览器历史
$('#a').click(function() {
$(targetSelector).load(url);
history.pushState({
container : targetSelector,
content   : $(targetSelector).html()
}, null, url);

});

// 当浏览器后退后者前进的时候，我们把当时的结果重新加载到container里来
window.addEventListener('popstate', function() {
var state = history.state
$(state.container).html(state.content);
})

注释：上述js在实现时会有陷阱，但此处只是让读者能够了解，history.pushState（replaceState也一样）的用法，和history.pushState(state,document.title,url)中的各个参数的作用及意义。

另附window.onpopstate的说明：

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