pushState+Ajax实现无刷更新页面

1fe1se 发布于2019-08-19 17:59 / 775人阅读

摘要：介绍技术确实在现代中必不可少，但是对于搜索引擎不够友好，同时破坏了浏览器的前后跳转逻辑。正是为了解决这一问题而产生的一种新技术。和的最大区别就是，不会将当前状态记录，即不会把压栈。

介绍

Ajax技术确实在现代web中必不可少，但是Ajax对于搜索引擎不够友好，同时破坏了web浏览器的前后跳转逻辑。pushState正是为了解决这一问题而产生的一种新技术。

方法实现

pushState
pushState(state,title,url)

简单来说该方法是，将当前状态state压栈，并将当前地址了改成url，设置该状态的title（这个参数的作用不大，可以为空）。

replaceState
replaceState(state,title,url)

replaceState和pushState的最大区别就是，replaceState不会将当前状态记录，即不会把state压栈。

window.addEventListener("popstate", function(event){
 // 获取之前push的state参数
  var state = event.state
  // state存储的可以是url，title等信息
  // 这时可以调用replaceState来恢复地址栏地址
}, false);

云服务器 GPU云服务器 ajax实现页面刷新 ajax实现页面跳转 js 无刷更新数据 php无刷更新数据库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79061.html

记微信网页开发单页面返回不刷新的实现

摘要：使用语法与要跳转到的对应的状态信息。页面名字，方便调试。要跳转到的地址，不能跨域，对于单页应用来说没用，传空即可。需求在微信网页开发中,点击返回按钮不刷新页面,进行页面切换,且实现传值功能. 问题由来在做微信网页开发时,由于微信的左上角返回按钮会返回上一个页面并且刷新,无法做成打开页面选择内容后关闭当前页面,并且给前一个页面传值的功能. 实现方法想实现此功能一开始想到的是不进行...

cuieney 2019-08-22 15:39 评论0 收藏0
［经验总结］pushState＋ajax应用

摘要：在即将度过试用期的时候，借着今天学习的文章，整理一下前段时间做用户主页时用到的。近期我站的个人主页改版，将用户发布的各类作品放到一个页面上切换，附加筛选功能。在做筛选及翻页的过程中，我们用到了。在即将度过试用期的时候，借着今天学习的文章，整理一下前段时间做用户主页时用到的pjax。近期我站的个人主页改版，将用户发布的各类作品放到一个页面上切换，附加筛选功能。在做筛选及翻页的过程中，...

Tony 2019-08-19 17:13 评论0 收藏0
使用history保存列表页ajax请求的状态

摘要：问题最近碰到两个问题从首页进入列表页之后，点击下一页的时候，使用请求更新数据，然后点击浏览器后退按钮就直接返回到首页，实际这里想要的效果是返回列表页上一页。没法记住之前分页状态。问题最近碰到两个问题：从首页进入列表页之后，点击下一页的时候，使用ajax请求更新数据，然后点击浏览器后退按钮就直接返回到首页，实际这里想要的效果是返回列表页上一页。在列表页分页为2的页面进入详情页，...

amuqiao 2019-08-22 13:53 评论0 收藏0