将网站打造成单页面应用SPA(Single Page Application)
2017-02-10 10:48
489 查看
摘要:不知你有没有发现,像Github、百度、微博等这些大站,已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML5的新API修改了Url,你可以在F12的Network面板里发现这个秘密。
这项技术并没有特别标准的学名,大家都称呼为Pjax,意为PushState + Ajax。这并不完全准确,因为还有Hash + Ajax等方法,但为了方便,我们下文还是统称为Pjax。
可以在页面切换间平滑过渡,增加Loading动画。
可以在各个页面间传递数据,不依赖URL。
可以选择性的保留状态,如音乐网站,切换页面时不会停止播放歌曲。
所有的标签都可以用来跳转,不仅仅是a标签。
避免了公共JS的反复执行,如无需在各个页面打开时都判断是否登录过等等。
减少了请求体积,节省流量,加快页面响应速度。
平滑降级到低版本浏览器上,对SEO也不会有影响。
拦截a标签的默认跳转动作。
使用Ajax请求新页面。
将返回的Html替换到页面中。
使用HTML5的History API或者Url的Hash修改Url。
HTML5 History API
pushState方法会将当前的url添加到历史记录中,然后修改当前url为新url。请注意,这个方法只会修改地址栏的Url显示,但并不会发出任何请求。我们正是基于此特性来实现Pjax。它有3个参数:
state: 可以放任意你想放的数据,它将附加到新url上,作为该页面信息的一个补充。
title: 顾名思义,就是document.title。不过这个参数目前并无作用,浏览器目前会选择忽略它。
url: 新url,也就是你要显示在地址栏上的url。
replaceState方法与pushState大同小异,区别只在于pushState会将当前url添加到历史记录,之后再修改url,而replaceState只是修改url,不添加历史记录。
一般来说,每当url变动时,popstate事件都会被触发。但若是调用pushState来修改url,该事件则不会触发,因此,我们可以把它用作浏览器的前进后退事件。该事件有一个参数,就是上文pushState方法的第一个参数state。
可以发现,url已经变成我们输入的url了,但页面并没有刷新,也没有发出任何请求。现在再输入history.state,就可以看到我们刚刚传过来的第一个参数state了。
这时点击后退,url会回到www.daipig.com,同样是没有刷新。只不过后退的时候其实是触发了window.onpopstate事件的。
前言
不知你有没有发现,像Github、百度、微博等这些大站,已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML5的新API修改了Url,你可以在F12的Network面板里发现这个秘密。这项技术并没有特别标准的学名,大家都称呼为Pjax,意为PushState + Ajax。这并不完全准确,因为还有Hash + Ajax等方法,但为了方便,我们下文还是统称为Pjax。
为什么要这么做?
Pjax是一个优秀的解决方案,你有足够多的理由来使用它:可以在页面切换间平滑过渡,增加Loading动画。
可以在各个页面间传递数据,不依赖URL。
可以选择性的保留状态,如音乐网站,切换页面时不会停止播放歌曲。
所有的标签都可以用来跳转,不仅仅是a标签。
避免了公共JS的反复执行,如无需在各个页面打开时都判断是否登录过等等。
减少了请求体积,节省流量,加快页面响应速度。
平滑降级到低版本浏览器上,对SEO也不会有影响。
原理呢?
Pjax的原理十分简单。拦截a标签的默认跳转动作。
使用Ajax请求新页面。
将返回的Html替换到页面中。
使用HTML5的History API或者Url的Hash修改Url。
HTML5 History API
我们来看看HTML5在History里增加了什么:
history.pushState(state, title, url)
pushState方法会将当前的url添加到历史记录中,然后修改当前url为新url。请注意,这个方法只会修改地址栏的Url显示,但并不会发出任何请求。我们正是基于此特性来实现Pjax。它有3个参数:
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。
一个实例:
这里我们以daipig为例,打开daipig,地址栏是 http://www.daipig.com 。接下来打开F12 Console,输入:history.pushState({ a: 1, b: 2 }, null,"http://www.daipig.com/abcdefg");
可以发现,url已经变成我们输入的url了,但页面并没有刷新,也没有发出任何请求。现在再输入history.state,就可以看到我们刚刚传过来的第一个参数state了。
这时点击后退,url会回到www.daipig.com,同样是没有刷新。只不过后退的时候其实是触发了window.onpopstate事件的。
相关文章推荐
- 前端:将网站打造成单页面应用SPA(一)
- 将网站打造成单页面应用SPA(一)
- 前端:将网站打造成单页面应用SPA
- 前端:将网站打造成单页面应用SPA
- 将网站打造成单页面应用SPA
- (转)前端:将网站打造成单页面应用SPA
- 前端:将页面打造成单页面应用SPA
- 分享一个黑色系的Single page单页面网站模板
- Single Page Application (单页应用) 适合你吗?AJAX不是万能的
- 分享一个黑色系的Single page单页面网站模板
- 分享一个黑色系的Single page单页面网站模板
- vue.js 单页面应用spa (single page application)
- ASP.NET Single Page Application (SPA) and template libraries
- 【大拿分享】单页应用(Single Page Application)的搜索引擎优化
- Knockout学习之Single Page Application
- 帮助用户更好的体验网站:jQuery的页面功能向导插件Pageguide.js
- B2B行业网站“页面结构”分析及应用
- 如何定义继承自页面基类PhoneApplicationPage 的类
- 为平板电脑打造完美的网站页面的方法(图文教程)
- 关于在网站404ErrorPage页面中图片相对路径的问题