HTML5 history API实践
一、history API知识点总结
在HTML4中，我们已经可以使用window.history对象来控制历史记录的跳转，可以使用的方法包括：
history.forward();//在历史记录中前进一步
history.back();//在历史记录中后退一步
history.go(n);//在历史记录中跳转n步，n=0则刷新当前页，n=-1则后退一步
在HTML5中，又新增了四个可用的API，包括：
history.pushState(data[,title][,url]);//向历史记录中追加一条记录，data是一个js对象，可以是任何格式的json数据，title参数暂时不起作用，我亲自试了也确实如此。参数url是指地址栏中的地址值，不填则保持当前url history.replaceState(data[,title][,url]);//替换当前页在历史记录中的信息。参数与上面一致。 history.state;//是一个属性，可以得到当前页的state信息。 window.onpopstate;//是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数。
二、新API在实际中的使用
知道了有这些新API，我们可以如何利用它们呢？以下是两个相关的使用案例：
① 还原ajax程序中浏览器后退按钮的功能。其实这个应用已经被大家广泛熟知了，由于ajax的固有缺点（无法使用浏览器后退按钮返回上一页），通过在发起ajax请求时在历史记录中添加一条记录并修改地址栏中的值，来模拟一个正常的跳转，同时仍然保留ajax异步加载的优点。方法如下：
var title = '另一篇随笔'; var url = 'http://www.cnblogs.com/lvdabao/p/另一篇随笔.html'; var state = {title:title,url:url}; history.pushState(state,title,url);//第三个参数url的值将会出现在地址栏
点击下面按钮，注意地址栏的变化：
②保存异步请求的参数，在页面返回时重现原来页面上的动态数据。具体需求是这样的：比如我们处在一个搜索结果列表页，页面上的内容是根据搜索条件动态得到的，我们可以点击其中一项进行详情预览（发ajax请求），在详情页点击“返回”时，我们希望原来的搜索数据还在，而不是变回列表页初始加载时的数据。以前，我们可以用回传参数的方式解决这样的需求，但那样做的缺点就是有大量的数据需要来回传递，如果页面层级较多，将会很不方便。那么现在，我们结合使用history的onpopstate事件，便可用完成这样的功能。举例来说：
我要做一个介绍HTML5 history的页面，index.html中的代码如下：
<body> <p>HTML5 history API 介绍</p> <a href="javascript:void(0)" id="pushstate">history.pushState(data, title [, url])</a> <a href="javascript:void(0)" id="replacestate">history.replaceState(data, title [, url]) </a> <a href="javascript:void(0)" id="onpopstate">window.onpopstate</a> <a href="javascript:void(0)" id="back">返回</a> <div id="loaddiv"></div> <script> $(function(){ var loaddiv = $('#loaddiv');
//点击不同的链接，分别在loaddiv中加载不同的内容
$('#pushstate').click(function(){ loaddiv.load('1.php?stype=push'); history.pushState({title:'push',url:'1.php?stype=push'}); }); $('#replacestate').click(function(){ loaddiv.load('1.php?stype=replace'); history.pushState({title:'replace',url:'1.php?stype=replace'}); }); $('#onpopstate').click(function(){ loaddiv.load('1.php?stype=onpop'); history.pushState({title:'onpop',url:'1.php?stype=onpop'}); });
//点击返回，让浏览器后退一步 $('#back').click(function(){ history.back(); });
//兼听popstate事件，可以取到e.state的值，其中保存了你调用pushState方法时传入的数据，根据数据中的url异步加载相应内容。便实现了点击返回时页面上的数据保持是上次加载过的。 window.onpopstate = function(e){ if(e.state){ loaddiv.load(e.state.url); } } }); </script> </body>
我要分别介绍history的三个新特性，通过调用jquery的load方法来异步加载，发送一个请求到1.php，同时传递对应的参数。后台接受到请求后根据不同的参数返回不同的数据，php代码如下：
<?php $type = $_REQUEST['stype']; switch($type){ case 'push' : echo 'history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会 忽略此参数；url为页面地址，可选，缺省为'; break; case 'replace' : echo 'history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上'; break; case 'onpop' : echo 'window.onpopstate：响应pushState或replaceState的调用；'; break; } ?>
我在这里无法上传php文件，你可以将代码复制到本地服务器测试。如此一来，便可以实现像github那样的页面加载机制。
以上便是我所见到过的关于history的两点使用方法。有发现错误欢迎指正，其他观点也欢迎交流。
