pushState、replaceState onpopstate如何实现Ajax页面的前进后退刷新功能 - 行业资讯

　　介绍

这篇文章主要介绍pushState, replaceState, onpopstate如何实现Ajax页面的前进后退刷新功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

使用Ajax可以异步获取数据,可以更高效地渲染页面。

<>强但也存在这一些问题:

再刷新页面,页面就会变成初始的状态

浏览器的前进后退功能无效

对搜索引擎的爬虫抓取不友好

早前会使用浏览器的散列锚点来解决

不同的散列标记着页面不同的部分,能修正页面刷新数据不正确的问题

再通过alt=" pushState、replaceState onpopstate如何实现Ajax页面的前进后退刷新功能">

随后出现一种hashbang的技术,即在url后加上标记# !/myPath来解决上述的问题

通过一个路径定义一个页面部分,在单页面应用中可常见到(角中已经封装了)。但好像只有谷歌真正支持了对该路径的爬取

HTML5的新特性做了助力,通过pushState, replaceState这两个新历史的方法和alt=" pushState、replaceState onpopstate如何实现Ajax页面的前进后退刷新功能">

这个栗子目的是:初始值为0,通过异步请求自增值,可以前进或后退以及刷新,新打开一个url后也能获取相应的数据

history.pushState(标题、状态,还以为;url) 　　history.replaceState(标题、状态,还以为;url)

其状态是中个json对象,可以自定义存放一些数据,标题即是这个url对应的标签标题(不过好像浏览器都忽略了这个参数)

url是某个页面的标记url(操作只会改变地址栏的url,并不会立马加载这个url,可以简单的标记? w=a, ajaxPage.html/w=,, w=一个,只是一种标记,取值时对照着来就行)

replaceState和pushState的不同是:前者直接替换当前值,后者就是向栈中压入一个值

窗口。onpopstate事件触发之后,可以通过历史。国家获取到上述方法的第一个json对象

实现部分

HTML

& lt; div 类=皃ush-state-test"比; 　　& lt; input 类型=癰utton", id=癮jax-test-btn",价值=https://www.yisu.com/zixun/Ajax获“取”> 　　

值:<跨度id=" ajax-test-val "> 0

var val 美元;=,美元(& # 39;# ajax-test-val& # 39;),//,获取当前页面的标记　　时间=m window.location.search.match (/\ ? val=(\ d +)/);//,新进入页面,通过url中的标记初始化数据　　if (m), { 　　increaseVal (m[1],安康;1); 　　}//,请求　　function increaseVal (val), { 　　$ . post (& # 39; ajax-test.php& # 39;,, { 　　瓦尔:瓦尔　　},,函数(newVal), { 　　美元val.text (newVal);//,存储相关值至对象中　　var state =, { 　　瓦尔:newVal, 　　标题:& # 39;标题& # 39;,+,newVal, 　　url: & # 39; ?瓦尔=& # 39;,+ newVal 　　}//,将相关值压入历史栈中　　window.history.pushState ,,, window.history.pushState (state.title,状态,还以为;state.url); 　　})；　　} 　　$ (& # 39;# ajax-test-btn& # 39;) .click(函数(),{ 　　increaseVal(方法(val.text美元(),10)); 　　})；//,浏览器的前进后退,触发popstate事件　　时间=window.onpopstate 函数(),{ 　　var state =, window.history.state; 　　console.log(状态)//,直接将值取出,或再次发个ajax请求　　美元val.text (state.val); 　　window.history.replaceState ,,, window.history.replaceState (state.title,状态,还以为;state.url); 　　PHP};

& lt; PHP ? 　　val 美元;=,$ _REQUEST [& # 39; val # 39;]; 　　echo val 美元+,1; 　　祝辞;

这里通过吗?val=num的方式,标记了不同的ajax结果页

提示:

使用pushState之后,当前进后退触发了popstate事件,获取到相应的json对象

json对象的数据可自定义

可简单地存储相关标记再发个请求,或者直接将该标记页对应的结果直接存起来

随着后退操作,地址栏url得到了更新,异步的数据也得到了更新

刷新页面或新打开页面,就要根据url中的标记去请求数据了

要记住的是,浏览器并不会自动加载url这部分标记对应的这个异步内容页,需要我们去获取

什么是ajax

ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。

以上是“pushState、replaceState onpopstate如何实现ajax页面的前进后退刷新功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!