内容刷新,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


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值