replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新渔人码头...

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

但也存在这一些问题：

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

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

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

1、

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

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

再通过onhashchange事件监听hash锚点的变化，手动进行前进后退操作，浏览器支持度

Chrome

FireFox

Opera

Safari

5.0

3.6(1.9.2)

8.0

10.6

5.0

2、

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

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

3、

HTML5的新特性做了助力，通过pushState、replaceState这两个新的history方法和 onpopstate这个window事件，解决了上述三个问题

当然，也因为是HTML5的新特性，在旧版本浏览器上支持度不好的，建议是再用hashbang的方法来兼容

本文主要讲讲pushState这几个新东西

文字太枯燥了，先看看图示直接点感受

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

history.pushState(state, title, url)

history.replaceState(state, title, url)

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

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

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

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

实现部分

HTML

value: 0

replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新渔人码头...相关推荐

wordpressPHP实现ajax评论,wordpress无刷新评论：无需插件ajax实现wordpress comment无刷新机制...
/** * 这个文件是从根目录下拷贝过来的comment-posts.php文件,主要功能就是提交评论,同时增加了显示出结果的功能. */ if ( 'POST' != $_SERVER['REQUE ...
谈谈HTML5中的history.pushSate方法，弥补ajax导致浏览器前进后退无效的问题
移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...
ajax实现浏览器前进后退-location.hash与模拟iframe
为什么80%的码农都做不了架构师?>>> Aajx实现无数据刷新时,我们会遇到浏览器前进后退失效的问题以及URL不友好的问题. 实现方式有两种 1.支持onhashchange ...
Ajax弹出式无刷新城市选择特效
为什么80%的码农都做不了架构师?>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
ie8不发送ajax,IE8用ajax访问不能每次都刷新的问题
AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. A ...
ajax 页面无刷新
  <!DOCTYPE html> ...
ajax 页面无刷新,Ajax的页面无刷新实现详解（附代码）
这次给大家带来Ajax的页面无刷新实现详解(附代码),Ajax页面无刷新实现的注意事项有哪些,下面就是实战案例,一起来看一下. ajax (ajax开发) AJAX即"Asynchronou ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
ORM中的事务和锁、Ajax异步请求和局部刷新、Ajax文件上传、日期时间类型的Json、多表查询图书系统
一.ORM中的事务和锁事务事务要确保原子性 """ 事务ACID原子性:不可分隔的最小单位一致性:跟原子性是相辅相成隔离性:事务之间相互不干扰持久性:事务一旦确认永久 ...

replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新渔人码头...

replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新渔人码头...相关推荐

最新文章

热门文章

replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新 渔人码头...

replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新 渔人码头...相关推荐

最新文章

热门文章

replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新渔人码头...

replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新渔人码头...相关推荐