导读：这个功能到学习是在之前到工作中遇到到，场景：页面数据在整个页面中某个区块进行分页显示，如果进行整体刷新，则会造成页面空白一段时间，所以，采用来无刷新。后来，需求说，如果我在第十页，想要发给朋友看，还得找半天。于是，这个功能就迫切需要来。
详细：
1 建立index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery AJAX History - 无刷新更新，支持前进后退</title>
<style type="text/css">
#content {
border: 1px #666 solid;
width: 300px;
height: 300px;
padding:0.5em;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://xoyo.sinaapp.com/jquery.history.js"></script>
<script type="text/javascript" src="http://xoyo.sinaapp.com/ajax.js"></script>
</head>
<body>
<h1>无刷新更新，支持前进后退</h1>
<div id="ajax-links">
<ul>
<li><a href="#1">load Page a</a></li>
<li><a href="#2">load Page b</a></li>
<li><a href="#3">load Page c</a></li>
</ul>
<div id="content"></div>
<div>可以在更新后点击前进后退按钮测试</div>
</div>
</body>
</html>
2 加载来jquery.history.js插件
<script type="text/javascript" src="http://xoyo.sinaapp.com/jquery.history.js"></script>
3 页面js代码
jQuery(document).ready(function($) {
function load(num) {
$('#content').load('http://xoyo.sinaapp.com/ajax.php?page=' + num);
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});