HTML5 API——无刷新更新地址 history.pushState/replaceState 方法

在《JavaScript高级程序设计》(第二版)中提到，BOM中的location.path/query……(window.location)在通过JavaScript更改以后，浏览器都会通过刷新来到达你更改后的URL(location的意思就是位置。。)

而在JavaScript MVC开始流行之后，通过刷新来修改URL的方法，不禁让人感到烦躁。然而HTML5中就制定了一个这样的API，可以通过方法的方式来修改URL，而又不会使浏览器刷新，就是History API。

熟悉JavaScript开发的同学，对History肯定不会陌生，其中最经典的方法就是go，通过第一个类型为整数的传输参数，可以使浏览器到达当前页面之前或之后，曾经浏览过的页面。当然，这个也是要刷新来实现的。

现在History API新增了两个方法，分别是pushState和replaceState，其实用法都一样，看Mozilla的文档也没看到它们有多大不同，哈哈。

用法如下：

var  state = {  //这里可以是你想给浏览器的一个State对象，为后面的StateEvent做准备。

title :  "HTML 5 History API simple demo" ,
 url :  "yourpage"
};

history.pushState(state,  "HTML 5 History API simple demo" ,  "yourpage" );

还算简单吧，那么replaceState也是同样的用法：

var  state = {  //这里可以是你想给浏览器的一个State对象，为后面的StateEvent做准备。
 title :  "HTML 5 History API simple demo" ,
 url :  "yourpage"
};
history.replaceState(state,  "HTML 5 History API simple demo" ,  "yourpage" );

State Event

既然有无刷新改变URL的方法，当然也要有响应这个改变的时间啦。

嗯，没错。就有一个popstate事件，而传入的handler函数有一个参数，就是之前在pushState的第一个参数，一个State obj。开发者可以通过这个State obj来识别行为。详细代码如下：

var  state = {  //这里可以是你想给浏览器的一个State对象，为后面的StateEvent做准备。
title :  "HTML 5 History API simple demo" ,
url :  "yourpage"
};

history.pushState(state,  "HTML 5 History API simple demo" ,  "yourpage" );
window.onpopstate =  function  (e) { document.title = e.state.title;}

当然还可以这样：

var  state = {  //这里可以是你想给浏览器的一个State对象，为后面的StateEvent做准备。

action :  "page" ,

 title :  "HTML 5 History API simple demo" ,

url :  "yourpage"

};

history.pushState(state,  "HTML 5 History API simple demo" ,  "yourpage" );

window.onpopstate =  function  (e) {

switch  (e.state.action) {

 case  "home"  :

    document.title =  "HOME ……" ;

    $.get( "index.php" ).done( function  (data) { $( "#wrapper" ).html(data); });

     break ;

   case  "page"  :

     document.title = e.state.title;

     $.get(e.state.url).done( function  (data) { $( "#wrapper" ).html(data); });

   break ;

 }

}

上面这个是结合pushState和Ajax做的一个导航相应器(Navigation Handler)，其实已经有一个不错的jQuery插件了，jQuery-Pjax(pushState and Ajax)。