内容刷新,url变化,页面不刷新
1 ajax原理
2 封装ajax
3 实现无刷新加载页面并且url发生变化,且刷新页面会定位到当前页面(url带参数),效果类似百度搜索的翻页,页面变化同时url变化,但是没有刷新
4 前进后退正常使用
项目有个三级联动导航,用到了node的swig模版渲染,导航标题都是a标签,每次请求带参数,node层拿到参数,请求接口渲染数据,自认为seo不成问题,但是后端每次返回许多同样的文件,造成资源浪费,综合考虑,前端让步,一次性拿到全部的导航数据,在前端循环渲染,通过bigpipe实现数据请求,但是url还要跟着一起变化,
如图,三个点,1 页面内容刷新,2 url变化,3 页面不刷新
依次实现,1 ajax或者类ajax 2 h5的history.pushState 3 当url变化以后,刷新页面,node层或者前端层,把url的参数取下来,在node层调接口 或者前端调ajax数据 实现刷新后依然定位到当前的页面 (如果纯ajax,点来点去可以加载数据,一刷新会回到初始的页面,不知道我表达清楚没)
总结:看到很多网站都实现了类似的效果,比如百度,豆瓣,知乎等,相比传统的纯ajax或者纯ssr来说,用户体验更好,兼容性方面受限于history.pushstate等属性,其他还好
参考网站:https://zhuanlan.zhihu.com/p/22412047
http://justcoding.iteye.com/blog/2219343/
https://www.cnblogs.com/wuting/p/8946927.html