一，开篇分析

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

让大家一步一步的体会"h5"能够做什么，以及在实际项目中如何去合理的运用达到使用自如，完美驾驭O(∩_∩)O~，好了，废话不多说，直接进入今天的主题，

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

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

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

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

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

 interface History {

   readonly attribute long length;

   readonly attribute any state;

   void go(optional long delta);

   void back();

   void forward();

   void pushState(any data, DOMString title, optional DOMString? url = null);

   void replaceState(any data, DOMString title, optional DOMString? url = null);

 };

　

（二），重点API说明

　

　　在这里说明一点："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部分代码　　

 <body>

     <center>

         <Strong>bbSPA测试页面</strong>

     </center>

     <hr>

     <ul

         id="list"

         style="float:left;

         list-style:none;"

     >

         <li><a href="#beijing">北京</a></li>

         <li><a href="#shanghai">上海</a></li>

         <li><a href="#shenzhen">深圳</a></li>

         <li><a href="#guangzhou">广州</a></li>

         <li><a href="#tianjin">天津</a></li>

     </ul>

     <div

         id="content-main"

         style="margin-left:50px;

         float:left;

         width:220px;

         border:1px solid #ccc;

         height:120px;

         color:#ff3300;"

     >

     </div>

 </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的，所以会报这个错误。

　　

　　     　　　　　　　　　　　　哈哈哈，本篇结束，未完待续，希望和大家多多交流够沟通，共同进步。。。。。。呼呼呼……(*^__^*)　　　　　　　

大熊君学习html5系列之------History API（SPA单页应用的必备）的更多相关文章

  1. 大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  2. 大熊君学习html5系列之------Online && Offline（在线状态检测）

    一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的 ...

  3. 大熊君学习html5系列之------requestAnimationFrame（实现动画的另一种方案）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  4. 大熊君学习html5系列之------XHR2（XMLHttpRequest Level 2）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  5. 大熊君学习html5系列之------WebStorage（客户端轻量级存储方案）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  6. 【ASP.NET MVC 5】第27章 Web API与单页应用程序

    注:<精通ASP.NET MVC 3框架>受到了出版社和广大读者的充分肯定,这让本人深感欣慰.目前该书的第4版不日即将出版,现在又已开始第5版的翻译,这里先贴出该书的最后一章译稿,仅供大家 ...

  7. 【单页应用巨坑之History】细数History带给单页应用的噩梦

    前言 在我们日常的网页浏览中,我们非常喜欢做一个操作:点击浏览器的前进后退在Ajax技术出现后,有些时候前进后退就会给开发者带来困扰,甚至一些开发者试图去干掉History随着Html5的发展,移动端 ...

  8. 前端学习之路之SPA(单页应用)设计原理

    SPA设计 1.设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离:前端做业务逻辑,后端处理数据和接口,耦合度减少,开发效率提高. 减轻服务器压力:一个 ...

  9. 跟我一起学习vue2（使用命令行搭建单页应用）[二]

    第一步:运行git命令,全局安装 vue-cli $ cnpm install --global vue-cli 第二步: 创建一个基于 webpack 模板的新项目 $ vue init webpa ...

随机推荐

  1. 代码提交时让svn忽略classpath、target、.project等

    在用eclipse操作时,经常用到svn的与资源同步这个操作,但是打开的时候会有很多生成的class文件,其实这些并不需要提交的,因为svn原则上是用来管理源代码的.每次资源同步时看到很多class文 ...

  2. 配置TortoiseSVN客户端, 强制签入前加注释

    正如上篇提到, 总有一些人在签入代码到SVN前没有加注释, 然后, 像这样: 鬼才知道改了什么东西. ①有些人可能就是没有写注释的习惯, ②有些人可能是忘记写注释 && SVN服务端和 ...

  3. TFS修改项目名称

    引言 如何让TFS管理的项目更名后不丢失修改历史记录? 在工作中有时由于前期考虑不足,某个Project的名字在项目开发过程中需要修改以更准备表达它的功能.本文就对此进行抛砖引玉 操作 在Source ...

  4. 帆软报表FineReport中数据连接之Websphere配置JNDI连接

    以oracle9i数据源制作的模板jndi.cpt为例来说明如何在FineReport中的Websphere配置JNDI连接.由于常用服务器的JNDI驱动过大,帆软报表FineReport中没有自带, ...

  5. markdown编辑器

    经过一番探索终于找到两个可以实时预览的markdown编辑器 一,sublime text 3 + MarkDown Editing + OmniMarkupPreviwer 安装方法网上均有,这里要 ...

  6. transactionManager的type与dataSource的type

    1. 在ibatis的配置文件中dataSource 节点有这么个配置<datasource type="SIMPLE"></datasource>,根据原 ...

  7. UVA11021 Tribles[离散概率 DP]

    UVA - 11021 Tribles GRAVITATION, n. “The tendency of all bodies to approach one another with a stren ...

  8. 环境变量NLS_LANG

    NLS_LANG是一个环境变量,用于定义语言,地域以及字符集属性.对于非英语的字符集,NLS_LANG的设置就非常重要.NLS:‘National Language Support (NLS)’ 当我 ...

  9. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 访问频率限制功能实现、防止黑客扫描、防止恶意刷屏

    很多软件组件,大家都能想到了,大家也能做出来,但是成熟稳定.可靠.易用.功能全面,可信任,可相信,可开源就不是很容易,需要树立良好的口碑才可以. 1:往往会有黑客,进行撞库挖掘漏洞,很多系统的账户有可 ...

  10. shell脚本仅列出当前目录下的文件及文件夹

    #!/bin/bash function ergodic(){ ` # do # "/"$file ] # then # ergodic $"/"$file # ...