html5 history解决ajax不能加入历史记录的问题

最近抽空研究了html5 history，并写了个小测试，由于只在前端展示，我把对于ajax的处理换为了简单的JS事件，直接复制代码，可以在静态页面查看。

一、基本操作

// 浏览器后退

window.history.back();
window.history.go(-1);

// 浏览器前进

window.history.forward();
window.history.go(1);

// 浏览器刷新

window.history.go(0);

二、history方法

1、history.pushState()

pushState(state,title,url)方法有三个参数;

state(第一个参数)：放入需要保存在历史记录的数据，以对象形式封装；

title (第二个参数)：目前可以忽略，基本不需要；

url (第三个参数) ：添加在原始url地址的尾缀，可以问号隔开原始url，问号与其后参数便是此处值

2、history.replaceState()

替换当前页的历史记录，用法与 pushState 相同;

注：如果只替换数据，则第三个值不需要

3、popstate

每当活动的历史记录项发生变化（pushState或者replaceState）时，popstate事件都会被传递给window对象,尔后浏览器操作时读取的便是改变后的值;

注：记得还要在popstate里面写入对数据的处理，浏览器才会正常展示之前看到的页面；

4、window.onpopstate()

当浏览器操作（前进/后退）时，会触发 window.onpopstate() 事件，从window的历史记录调取数据；

三、简单的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		div{
			position: fixed;
			top: 100px;
			font-size: 22px;
		}
	</style>
	<body>
		<div id="text">这是第0个页面</div>
		<button onclick="change(this)" page="0">点击变化</button>
		<button onclick="change(this)" page="1">点击变化</button>
		<button onclick="change(this)" page="2">点击变化</button>
		<button onclick="change(this)" page="3">点击变化</button>
		<script>
			var obj={};	
			function url_deal(){
//				获取url,模拟后台解码传递数据
				var url = window.location.href,
					_page = url.split("?")[1].split("&");
					_page.map(function(str){
						var arr = str.split("=");
						obj[arr[0]] = arr[1]	
					})
				return obj	
			}
			url_deal();
			var value =	[
					"这是第0个页面",
					"这是第1个页面",
					"这是第2个页面",
					"这是第3个页面",					
				];
//				数据处理 
				document.getElementById("text").innerHTML = value[obj.page||0];
//				替换当前页面的历史记录并存入数据
				history.replaceState({text:document.getElementById("text").innerHTML}, '');
//				console.log(obj)
		</script>
		<script>	
			function change(_self){
//				_self.getAttribute("page") 为button内 page属性的值
				url_deal();//重新获取url并解码

//				备注：这里可以换为请求ajax获取数据 
				var text1 = "这是第"+_self.getAttribute("page")+"个页面";
				document.getElementById("text").innerHTML = text1;
				
				
//				history.pushState是给浏览器添加历史记录，可以把需要保存的值放入history.state(第一个参数)里面(数据放入历史记录)
				if(obj.page && obj.page == _self.getAttribute("page")){
//					判断如果当前页面与要请求的页面是同一个则调用浏览器刷新
					window.location.reload();
					return;
				}
				else if(!obj.page && "0" == _self.getAttribute("page")){
					window.location.reload();
					return;
				}
				
//				获取的数据放入pushState后的第一个参数内  这里的例子为：{text:text1}				
				history.pushState({text:text1}, '', '?page='+_self.getAttribute("page"));
				obj = {}//清空内容,便于下次的填入数据
				
			}
//			 popstate，当浏览器变化(前进、后退、刷新)时运行
			window.addEventListener("popstate", function() {
//				history.state指向上面history.pushState的第一个值
//				前进/后退/刷新的时候，可以引入这里的数据
			    var result = history.state;
//              这里要对存入的数据进行处理,在需要的位置填入相应的数据，才会正常展示保存时的界面
				document.getElementById("text").innerHTML = result.text;
			});
		</script>
	</body>
</html>