大熊君学习html5系列之------History API（SPA单页应用的必备）

时间 2019-12-08

标签学习 html5 html 系列 history api spa 单页应用必备栏目 HTML5 繁體版

原文原文链接

一，开篇分析javascript

Hi，你们好！大熊君又和你们见面了，(*^__^*) 嘻嘻……，这系列文章主要是学习Html5相关的知识点，以学习API知识点为入口，由浅入深的引入实例，html

让你们一步一步的体会"h5"可以作什么，以及在实际项目中如何去合理的运用达到使用自如，完美驾驭O(∩_∩)O~，好了，废话很少说，直接进入今天的主题，java

今天主要讲的是“History API”及在单页应用中的做用，而且会引入一个实际的例子作为讲解的原型范例，先来看看“History API”：git

　　为了提升Web页面的响应速度，愈来愈多的开发者开始采用单页面结构（single-page application）的解决方案。所谓的单页面结构就是指多个页面间切换时，不刷新当前整个页面，更新页面展现数据，而且相应地改变地址栏中的url，以使用户能够分享这个url。github

　　若是你使用chrome或者firefox等浏览器访问"github.com、plus.google.com"等网站时，细心的你会发现页面之间的点击是经过ajax异步请求的，web

同时页面的URL发生了了改变。而且可以很好的支持浏览器前进和后退。是什么有这么强大的功能呢？恩，这就会说到今天的主角，HTML5里引用了新的API：ajax

“history.pushState”和“history.replaceState”，就是经过这个接口作到无刷新改变页面URL的。先来看看"history"接口的详细方法：chrome

1 interface History {
2   readonly attribute long length;
3   readonly attribute any state;
4   void go(optional long delta);
5   void back();
6   void forward();
7   void pushState(any data, DOMString title, optional DOMString? url = null);
8   void replaceState(any data, DOMString title, optional DOMString? url = null);
9 };

（二），重点API说明json

　　在这里说明一点："window.history.replaceState"和"window.history.pushState"相似，不一样之处在于replaceState不会在window.history里新增历史记录点，其效果相似于window.location.replace(url)，都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操做，而要更新当前历史记录条目的状态对象或URL时，使用replaceState()方法会特别合适。浏览器

（三），引入实例

　　今天说说单页应用中咱们一般会这样作，有一个菜单列表，点击相关菜单项而后动态加载相关模块，全部方式都是基于异步请求的，美中不足是，咱们会发现地址栏不会有任何变化，以及浏览器中的前进和后退操做也不会有任何响应，这对用户不是很友好，因此为了解决这个问题“History”就有用武之地了，那么如何作到的那？不急先看一下例子中的效果图展现，而后一步步分析,以下所示：

　　如下是监测数据，相同的url再次刷新不会重复请求。

　　咱们梳理一下流程：

　　　　页面首次载入，虽然咱们访问的URL是"http://localhost:8888/bbSPA.html"，可是，实际URL确是：

"http://localhost:8888/bbSPA.html#shanghai"，”history.replaceState“完成了初始化url切换工做，而且初始作了加载

"shanghai.data"的数据工做，鼠标点击左边的任意一个菜单项，右侧内容是Ajax载入，而且页面的URL随之发生改变，例如，点击北京。

此时，咱们点击地址栏的后退按钮，又回到了上海，而且显示内容。原理很简单，就是经过监听”window.onpopstate“，达到了自由切换的做用。

好了！其实很简单你们也尝试本身实践一下，如下是完整代码：

　　（1），html部分代码　　

 1 <body>    
 2     <center>
 3         <Strong>bbSPA测试页面</strong>
 4     </center>
 5     <hr>
 6     <ul 
 7         id="list" 
 8         style="float:left;
 9         list-style:none;"
10     >
11         <li><a href="#beijing">北京</a></li>
12         <li><a href="#shanghai">上海</a></li>
13         <li><a href="#shenzhen">深圳</a></li>
14         <li><a href="#guangzhou">广州</a></li>
15         <li><a href="#tianjin">天津</a></li>
16     </ul>
17     <div 
18         id="content-main" 
19         style="margin-left:50px;
20         float:left;
21         width:220px;
22         border:1px solid #ccc;
23         height:120px;
24         color:#ff3300;"
25     >
26     </div>
27 </body>

（2），Js部分代码

$(function(){
	_init() ;
}) ;
var _history = [] ; // 记录hash的活动数据容器
function _init(){
	var root = $("#list") ;
	var defaultHash = root.find("li a").eq(1).attr("href") ;
	var currentHash = window.location.hash ;
	_addToHistory(defaultHash,true) ;
	if(currentHash && currentHash != defaultHash){
		_showContent((currentHash.split("#")[1])) ;
	}
	else{
		_showContent((defaultHash.split("#")[1])) ;
	}
	$("#list").on("click","a",function(e){
		var action = ($(this).attr("href").split("#")[1]) ;
		_showContent(action) ;
		e.preventDefault() ;
	}) ;
	window.addEventListener("popstate",function(e){
		if(e.state && e.state.hash){
			var hash = e.state.hash ;
			if(_history[1] && hash === _history[1].hash){//存在历史记录，证实是后退事件
				_showContent(hash.split("#")[1].toLowerCase()) ;
			}else{ // 其它认为是非法后退或者前进
				return ;
			}
		}
		else{
			return ;
		}
	},false) ;
} ;
function _showContent(action){
	var samePage = _history[0]["hash"] == "#" + action ;
	if(samePage){ // 同页面,则不从新加载
		return ;
	}
	_loadContent(action + ".data").done(function(data){
		_renderContent(data["content"]) ;
		_addToHistory("#" + action,samePage) ;
	}).fail(function(){
		throw new Error("load content error !") ;
	}) ;	
} ;
function _loadContent(url){
	return $.ajax({
		url : url ,
		dataType : "json"
	}) ;
} ;
function _renderContent(text){
	$("#content-main").text(text) ;
} ;
function _addToHistory(hash,noState){
	var obj = {
		hash : hash
	} ;
	if(noState){
		_history.shift(obj) ;
		window.history.replaceState(obj,"",hash) ;
	}
	else{
		 window.history.pushState(obj,"",hash) ;
	}
	 _history.unshift(obj) ;
} ;

（四），最后总结

　　（1），理解History Api的使用方式以及具体实例中使用的目的是为了解决哪些问题。

　　（2），两个核心Api的不一样之处在哪。

　　（3），测试本例子的注意事项以下。

　　测试须要搭建一个web服务器，以http://host/的形式去访问才能生效，若是你在本地测试以file://这样的方式在浏览器打开，就会出现以下的问题：

Uncaught SecurityError: A history state object with URL 'file:///C:/xxx/xxx/xxx/xxx.html' cannot be created in a document with origin 'null'.

　　由于你要pushState的url与当前页面的url必须是同源的，而file://形式打开的页面是没有origin的，因此会报这个错误。

　　　　　　　　　　　　　　哈哈哈，本篇结束，未完待续，但愿和你们多多交流够沟通，共同进步。。。。。。呼呼呼……(*^__^*)　　　　　　　