ajax怎么实现spa,PushState+Ajax实现简单的单页面应用SPA

http://www.helloweba.com/view-blog-386.htmlphp

单页面应用(Single Page Application)简称SPA，使用SPA构建的应用优势有用户体验好、速度快，内容的改变不须要从新加载整个页面，避免了没必要要的跳转和重复渲染，从而相对减轻了服务器压力，SPA在WEB移动端应用很是普遍。html

咱们在上一篇文章Javascript实现前端简单路由中提到的前端路由，能够在不刷新整个页面的状况下，经过变换地址栏的hash来实现页面局部加载。前端

今天我要给你们介绍的是使用HTML5的PushState+ajax实现不刷新整个页面，而地址栏变换，页面局部刷新的效果，综合先后端页面技术实现一个简单的SPA。咱们先来了解几个知识点。html5

HTML5 History API

HTML5在History里增长了pushState方法，这个方法会将当前的url添加到历史记录中，而后修改当前url为新url。固然这个方法只会修改地址栏的Url显示，但并不会发出任何请求。所以咱们能够利用这个方法结合ajax实现单页面应用SPA，就是PushState+Ajax，人称Pjax。web

pushstate的使用方法：ajax

history.pushState(state, title, url)

state: 能够听任意你想放的数据，它将附加到新url上，做为该页面信息的一个补充。后端

title: 顾名思义，就是document.title。浏览器

url: 新url，也就是你要显示在地址栏上的url。缓存

history.replaceState(state, title, url)

replaceState方法与pushState大同小异，区别只在于pushState会将当前url添加到历史记录，以后再修改url，而replaceState只是修改url，不添加历史记录。服务器

window.onpopstate

通常来讲，每当url变更时，popstate事件都会被触发。但如果调用pushState来修改url，该事件则不会触发，所以，咱们能够把它用做浏览器的前进后退事件。该事件有一个参数，就是上文pushState方法的第一个参数state。

Pjax能作什么

Pjax是一个优秀的解决方案，它能够作：

能够在页面切换间平滑过渡，增长Loading动画。

能够在各个页面间传递数据，不依赖URL。

能够选择性的保留状态，如音乐网站，切换页面时不会中止播放歌曲。

全部的标签均可以用来跳转，不单单是a标签。

避免了公共JS的反复执行，减小了请求体积，节省流量，加快页面响应速度。

对SEO也不会有影响，对于不支持HTML5的浏览器以及搜索引擎爬虫，则能够跳转真实的页面。

支持浏览器前进和后退按钮。

实现原理

1. 拦截a标签的默认跳转动做。

2. 使用Ajax请求新页面。

3. 将返回的Html替换到页面中。

4. 使用HTML5的History API或者Url的Hash修改Url。

代码实现

HTML

咱们设置一个菜单#nav，经过点击菜单上的连接，将连接页面对应的内容加载到div#result中。