HTML5： History API 无刷新更改地址栏

标签：赋值   页面   title   int   索引   也有   bsp   常用   attr   

HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接，配合 AJAX 可以做到无刷新跳转。

简单来说：假设当前页面为renfei.org/，那么执行下面的 JavaScript 语句：

window.history.pushState(null, null, "/profile/");

之后，地址栏的地址就会变成renfei.org/profile/，但同时浏览器不会刷新页面，甚至不会检测目标页面是否存在。

应用：全站 AJAX，并使浏览器能够抓取 AJAX 页面

这个可以干啥用？一个比较常用的场景就是，配合 AJAX。

假设一个页面左侧是若干导航链接，右侧是内容，同时导航时只有右侧的内容需要更新，那么刷新整个页面无疑是浪费的。这时我们可以使用 AJAX 来拉取右面的数据。但是如果仅仅这样，地址栏是不会改变的，用户无法前进、后退，也无法收藏当前页面或者把当前页面分享给他人；搜索引擎抓取也有困难。这时，就可以使用 HTML5 的 History API 来解决这个问题。

思路：首先绑定click事件。当用户点击一个链接时，通过preventDefault函数防止默认的行为（页面跳转），同时读取链接的地址（如果有 jQuery，可以写成$(this).attr(‘href‘)），把这个地址通过pushState塞入浏览器历史记录中，再利用 AJAX 技术拉取（如果有 jQuery，可以使用$.get方法）这个地址中真正的内容，同时替换当前网页的内容。

为了处理用户前进、后退，我们监听popstate事件。当用户点击前进或后退按钮时，浏览器地址自动被转换成相应的地址，同时popstate事件发生。在事件处理函数中，我们根据当前的地址抓取相应的内容，然后利用 AJAX 拉取这个地址的真正内容，呈现，即可。

最后，整个过程是不会改变页面标题的，可以通过直接对document.title赋值来更改页面标题。

参考来源：http://www.renfei.org/blog/html5-introduction-3-history-api.html

HTML5： History API 无刷新更改地址栏

标签：赋值   页面   title   int   索引   也有   bsp   常用   attr   

原文地址：http://www.cnblogs.com/njqa/p/7000209.html