ajax与HTML5 history pushState/replaceState实例

　　前言：最近在做项目的过程中，做到与搜索引擎相关的问题， 当搜索一个关键词时， 我们通过ajax请求获取到数据，然后填充到当前页面，这样做的好处是可以实现页面的无刷新操作，但是ajax请求存在一个问题 --- 在浏览器中无法前进和后退！！

　　导致的问题： 这样，如果用户希望下次可以返回到之前的浏览记录就是不可能的了，这样用户体验会大大下降。

　　最终目的： 我们希望做到的就是： 每次的ajax请求可以存到历史中去，这样，用户就可以在浏览器中通过前进和后退按钮来查看浏览过的历史了。

 　 解决思路： 曾经，google的做法是使用iframe来解决这样的问题，即模仿页面没有被刷新的状态，这样就可以使用前进和后退按钮了。但是HTML5出来之后，解决问题就会轻松很多了 --- ajax无前进和后退的本质是历史记录不会保存，所以我们可以利用html5的方法 pushState 强行给浏览器添加一个历史记录， 然后再点击前进和后退的时候通过给url传参的形式就可以返回到之前pushState的历史记录中了。 这个方法妙啊！

　　

　　争议： 有人说了: 我可以每次在查询的时候不使用ajax请求，而是导航到一个新页面，这样不就成功的规避了ajax请求没有自行保存历史记录的问题了吗？  

　　回答： 这个思路是没有问题的，但是试想，每次再我们搜索的时候，我们只是希望改变内容部分， 而不需要重新刷新整个页面（包括header和footer）。如果使用导航到新页面，就不可避免的导致刷新整个页面造成资源浪费。

　　解决方法：

　　　　1.  在搜索栏中输入关键词并点击搜索按钮后， 就将ajax查询的内容附在url的？之后作为查询字符串， 然后再使用history.pushState即可将当前的“独一无二”的url保存在历史记录中。

　　　　2.  当我们点击浏览器的返回按钮时，或者执行相应的返回操作时，就会触发 window.onpopstate 事件， 通过绑定popstate事件，我们就可以再将历史中的查询字符串中的之前ajax查询的内容使用js提取出来然后再执行ajax载入，这个载入是不需要使用window.pushState的，否则就会进入死循环，通过这种方式我们就可以模仿实现返回的效果。对于前进也是一样的思路。

　　　　3.  当页面首次载入的时候，如果没有查询地址或者查询地址不匹配，则使用第一个菜单的Ajax地址的查询内容，并使用history.replaceState更改当前的浏览器历史，然后触发Ajax操作。 注： 这个方法可能在某些内容必须有的情况下是这样的，但是对于我目前的项目而言， 这个histoty.replaceState似乎并没有太大的必要，准确的说是不需要。

　　　　

　　使用方法：

　　1.history.pushState

　　history.pushState({}, "页面标题", "xxx.html");

var state = {
    title: title,
    url: options.url,
    otherkey: othervalue
};
window.history.pushState(state, document.title, url);

　　2.history.replaceState

　　history.replaceState(null, "页面标题", "xxx.html");

　　

 　 3.window.onpopstate

　　window.addEventListener("popstate", function() {

　　  var currentState = history.state;

　　　 /*

     * 干点啥
    */	
　　});

 
4. history.state
　　　
    当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的，那么history.state是null。 我们直接打开console控制台, 然后输入history.state得到的就是null，因为我们还没有利用pushState和replaceState。

 　　

 

参考文章：

http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

http://blog.csdn.net/oyiboy/article/details/44258477