ajax载入与浏览器历史的前进与后退

声明：本文摘自张鑫旭博客，原文链接

众所周知，Ajax可以实现页面的无刷新操作——优点；但是，也会造成另外的问题，无法前进与后退！曾几何时，Gmail似乎借助iframe搞定，如今，HTML5让事情变得如同过家家般简单。
当执行Ajax操作的时候，往浏览器history中塞入一个地址（使用pushState）（这是无刷新的）；于是，返回的时候，通过URL或其他传参，我们就可以还原到Ajax之前的模样。
策略如下：

• 每次手动点击左侧的菜单，我将Ajax地址的查询内容(?后面的)附在demo HTML页面地址后面，使用history.pushState塞到浏览器历史中。
• 浏览器的前进与后退，会触发window.onpopstate事件，通过绑定popstate事件，就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入，实现Ajax的前进与后退效果。
• 页面首次载入的时候，如果没有查询地址、或查询地址不匹配，则使用第一个菜单的Ajax地址的查询内容，并使用history.replaceState更改当前的浏览器历史，然后触发Ajax操作。