pushState、replaceState、onpopstate实现Ajax页面的前向和后向刷新

使用Ajax可以异步获取数据，更高效地呈现页面。

但是也有一些问题：

再次刷新页面，页面将变为初始状态

浏览器的向前和向后功能无效

对搜索引擎的爬行不友好

1、

此前，浏览器的哈希锚被用来解决这个问题

不同的哈希标记页面的不同部分，可以纠正页面刷新数据不正确的问题

然后通过onhashchange事件监控哈希锚点的变化，并手动执行前向和后向操作，浏览器支持

2、

然后出现了一个hashbang技术，就是加一个mark #！/myPath解决上述问题

通过路径定义页面部分在单页应用程序中很常见(封装在Angular中)。但似乎只有谷歌真正支持沿着这条路爬行

3、

HTML5的新特性通过两种新的历史方法(pushState和replaceState)和窗口事件(onpopstate)帮助解决了上述三个问题

当然，因为是HTML5的新功能，所以老版本浏览器中的支持并不好。建议使用hashbang兼容

本文主要谈一谈pushState，一些新的东西

这篇课文太无聊了。先看图，直接感受

这个栗子的用途是：初始值为0，通过异步请求、前向或后向、刷新进行自增量，打开新的url后就可以得到相应的数据

历史。pushstate(状态、标题、url)历史记录。replacestate (state，title，URL)，其中state是一个json对象，可以通过定义存储一些数据，title是这个URL对应的标签标题(虽然看起来浏览器忽略了这个参数)

Url是页面的标记url(操作只会改变地址栏的url，不会立即加载url，所以可以简单标记？W=a，ajaxPage.html/w=a, w=a，只是一个标记，取值时只需进行比较)

replaceState和pushState的区别在于前者直接替换当前值，而后者将值推入堆栈

在window.onpopstate事件触发后，可以通过history.state获取上述方法的第一个json对象

实施部分

超文本标记语言

Div class=' push-state-test '输入类型=' button' id=' Ajax-test-BTN '值=' Ajax get ' pvalue 3360 span id=' Ajax-test-val ' 0/span/p/div js

Var $val=$('#ajax-test-val ')，//获取当前页面的标记m=window . location . search . match(/\？val=(\ d)/)；//重新进入页面，通过url中的标签初始化if(m){递增eVal(m[1]-1)的数据；}//请求函数增加val (val) {$。post ('Ajax-test.php '，{val:val}，function(new val){ $ val . text(new val)；//在对象中存储相关值。var state={val:newval，title :' title-'newval，URL : '？Val=' newVal}//将相关值推入历史堆栈窗口. history . pushstate window . history . pushstate(state，state.title，state . URL)；});}$('#ajax-test-btn ')。click(function(){ increment eval(ParSeint($ val . text()，10))；});//浏览器前后移动，触发popstate事件window . onopstate=function(){ var state=window . history . state；Console.log(state)//直接取出值，或者再次发送$val.text(state.val)的ajax请求；window . history . replace state window . history . replace state(state，state.title，state . URL)；};服务器端编程语言（Professional Hypertext Preprocessor的缩写）

？PHP $ val=$ _ REQUEST[' val ']；echo $ val 1；路过这里？Val=num标记不同的ajax结果页面

Tips:

使用pushState后，通过向前和向后触发popstate事件，得到对应的json对象

json对象的数据可以自定义

您可以简单地存储相关的标签并发送请求，或者直接存储标签页面对应的结果

通过向后操作，地址栏的url被更新，异步数据也被更新

要刷新页面或打开新页面，需要根据url中的标签请求数据

请记住，浏览器不会自动加载这个对应于url标签的异步内容页面，我们需要获取它

以上就是边肖介绍的pushState、replaceState、onpopstate实现Ajax页面的前向和后向刷新，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！