利用HTML5新特性改变浏览器地址后不刷新页面

abstract： 作为一个程序员，上GitHub必然是很经常的一件事情。细心的同学会发现当我们在浏览项目源码的时候，进入文件夹后Url地址发生改变后，内容很快就加载好了。起初还以为是刷新了页面加载的，但刷新页面速度也快的离谱了吧。于是F12监控下网络请求，发现是进行了Ajax请求。很是神奇，Url地址发生改变不是会刷新页面吗（#号后面的除外啦）？什么情况？猜想肯定是HTML5这个东东里面的新特性。Goo

作为一个程序员，上GitHub必然是很经常的一件事情。细心的同学会发现当我们在浏览项目源码的时候，进入文件夹后Url地址发生改变后，内容很快就加载好了。起初还以为是刷新了页面加载的，但刷新页面速度也快的离谱了吧。于是F12监控下网络请求，发现是进行了Ajax请求。很是神奇，Url地址发生改变不是会刷新页面吗（#号后面的除外啦）？什么情况？猜想肯定是HTML5这个东东里面的新特性。Google搜索下果然如此，是history.pushState 这个新东西。于是自动动手测试实现起来了。

• 实现效果如图，点击面包屑导航下面的内容进行Ajax加载页面内容。

• MVC页面代码 ，Ajax 请求只是返回一个内容

      @Styles.Render( "~/Content/css" ) @Scripts.Render( "~/bundles/modernizr" ) 
  
 首页 / 公司新闻 / 新品速递 
 
 
 @RenderBody() 
 @Scripts.Render( "~/bundles/jquery" ) @RenderSection( "scripts", required: false )   

总结：刚查资料看到时候觉得就是调用一个js就可以搞定，但做demo的时候会发现存在一个一个问题，例如：浏览器前进后退时候页面不更新，解决更新后又发现后退到进入的第一个页面时候还是有问题，最后通过history.replaceState 这个去实现的，从而达到了类似github源码文件加载类似效果。