ajax与HTML5 history pushState/replaceState实例

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=3432

1、本文就是个实例展现

三点：

1. 我就TM想找个例子，知道如何个使用，使用语法什么的滚粗
2. 跟搜索引擎搞基
3. 本身备忘

精力老是有限的，昨天一冲动，在上海浦东外环以外订了个90米的房子，要借钱筹首付、贷款和领证什么的。HTML5 history相关知识点啪啦啪啦讲起来也是一条又臭又长的裹脚布，精气神实在不够用，这里，直接一个实例。

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

众所周知，Ajax能够实现页面的无刷新操做——优势；可是，也会形成另外的问题，没法前进与后退！曾几什么时候，Gmail彷佛借助iframe搞定，现在，HTML5让事情变得如同过家家般简单。

当执行Ajax操做的时候，往浏览器history中塞入一个地址（使用pushState）（这是无刷新的）；因而，返回的时候，经过URL或其余传参，咱们就能够还原到Ajax以前的模样。

本demo所展现的就是ajax的内容载入与地址栏的前进与后退，典型应用，对于熟悉相关知识点颇有帮助。

3、demo实例

您能够狠狠地点击这里：HTML5 history API与ajax分页实例

demo结构大体以下：左边导航菜单，右侧详细内容。

若是咱们想偷懒，导航直接URL地址，点击刷新得了。但头尾内容都是同样的，刷新总显得浪费。从体验上讲，点击导航，右侧Ajax局部刷新是更优的策略。

Ajax局部刷新小菜，稍有经验都能轻松应对。如今若是提出以下需求：每次ajax刷新就若是页面刷新同样，能够后退查看以前内容，怎么破？

个人策略以下：

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

因而，你会看到：

• 页面首次载入，虽然咱们访问的URL的后缀是光秃秃的.html，可是，实际URL最后是：
  

  由于被history.replaceState摆了一道。

• 鼠标点击左边的任意一个菜单，会发现，右侧内容虽然是Ajax载入，可是，页面的URL地址却变了，例如，点击宝山区：
  

  由于历史记录被history.pushState插了一刀。

• 此时，咱们点击地址栏的后退按钮，就是这个：
  

  奇迹般的，页面无刷新的，又回到了浦东菜单：
  

  由于window.onpopstate让菊花刀又拔了出来。

4、其它点什么

• history.pushState
  菊花插一刀之意，用法举例：

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

• history.pushStatehistory.replaceState
  换把菊花刀之意，用法举例：

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

• window.onpopstate
  在菊花刀拔插的时候……，用法举例：

  window.addEventListener("popstate", function() {
      var currentState = history.state;
      /*
       * 该干吗干吗
      */											
  });

浏览器兼容性表：

Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari

replaceState, pushState
5
4.0 (2.0)
10
11.50
5.0

history.state
18
4.0 (2.0)
10
11.50
6.0

恩，就这些！