有你在真好 的个人博客
pjax带你快速浏览体验,源于pushState+ajax
阅读:2054 添加日期:3/30/2021 5:42:00 PM

多个页面的流畅切换,一直是极致体验的重要表现,如今快速的前端发展,已经有很多方式可以达到,那么今天我们来探讨一下pushState 和 ajax,如何来达到我们的目的吧。

pushState是什么呢?

在 HTML 文件中, history.pushState() 方法向浏览器历史添加了一个状态。pushState带有三个参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址。

请注意pushState()方法绝不会导致hashchange 事件被激活,即使新的URL和旧的只在hash上有区别。

ajax是什么呢?

jquery.ajax相信大家用的都很流利了。

那么pushState和ajax结合一块是什么呢? 就是我们要说的:pjax

pjax是一个jQuery插件,使用Ajax和pushstate提供快速的浏览体验与真正的永久链接,网页标题,和工作的后退按钮。

pjax通过Ajax抓取服务器网页上的HTML内容。然后进行局部更新,使用pushstate浏览当前URL(JS,CSS),提供了一个快速的出现,全页面加载。

那么如何来使用pjax呢?

首先要下载pjax的代码(github上搜一下就可以的)。

pjax带你快速浏览体验,源于pushState+ajax

如上图的书写方式,来页面之间的相互跳转,来极好的体验效果。

有什么更好的方式也欢迎大家来评价交流。