ajax与HTML5 history pushState/replaceState实例

标签: js实例 Ajax history HTML5 onpopstate | 发表时间:2013-06-19 20:47 | 作者:张 鑫旭
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=3432

一、本文就是个实例展示

三点:

  1. 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗
  2. 跟搜索引擎搞基
  3. 自己备忘

精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付、贷款和领证什么的。HTML5 history相关知识点啪啦啪啦讲起来也是一条又臭又长的裹脚布,精气神实在不够用,这里,直接一个实例。

二、ajax载入与浏览器历史的前进与后退

众所周知,Ajax可以实现页面的无刷新操作——优点;但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。

当执行Ajax操作的时候,往浏览器 history中塞入一个地址(使用 pushState)(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Ajax之前的模样。

本demo所展示的就是ajax的内容载入与地址栏的前进与后退,典型应用,对于熟悉相关知识点很有帮助。

三、demo实例

您可以狠狠地点击这里: HTML5 history API与ajax分页实例

demo结构大致如下:左边导航菜单,右侧详细内容。
demo页面大致结构

如果我们想偷懒,导航直接URL地址,点击刷新得了。但头尾内容都是一样的,刷新总显得浪费。从体验上讲,点击导航,右侧Ajax局部刷新是更优的策略。

Ajax局部刷新小菜,稍有经验都能轻松应对。现在如果提出如下需求:每次ajax刷新就如果页面刷新一样,可以后退查看之前内容,怎么破?

我的策略如下:

  • 每次 手动点击左侧的菜单,我将Ajax地址的查询内容( ?后面的)附在demo HTML页面地址后面,使用 history.pushState塞到浏览器历史中。
  • 浏览器的前进与后退,会触发 window.onpopstate事件,通过绑定 popstate事件,就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入,实现Ajax的前进与后退效果。
  • 页面首次载入的时候,如果没有查询地址、或查询地址不匹配,则使用第一个菜单的Ajax地址的查询内容,并使用 history.replaceState更改当前的浏览器历史,然后触发Ajax操作。

于是,你会看到:

  • 页面首次载入,虽然我们访问的URL的后缀是光秃秃的 .html,但是,实际URL最后是:
    首次载入页面的URL

    因为被 history.replaceState摆了一道。

  • 鼠标点击左边的任意一个菜单,会发现,右侧内容虽然是Ajax载入,但是,页面的URL地址却变了,例如,点击宝山区:
    点击宝山区URL地址变化

    因为历史记录被 history.pushState插了一刀。

  • 此时,我们点击地址栏的后退按钮,就是这个:
    点击后退、查看历史记录

    奇迹般的,页面无刷新的,又回到了浦东菜单:
    回到了浦东,同时出现了历史前进按钮

    因为 window.onpopstate让菊花刀又拔了出来。

四、其它点什么

  • history.pushState
    菊花插一刀之意,用法举例:

    history.pushState({}, "页面标题", "xxx.html");
  • history.pushState
    换把菊花刀之意,用法举例:

    history.replaceState(null, "页面标题", "xxx.html");
  • window.onpopstate
    在菊花刀拔插的时候……,用法举例:

    window.addEventListener("popstate", function() {
        var currentState = history.state;
        /*
         * 该干嘛干嘛
        */											
    });

浏览器兼容性表:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
replaceState, pushState 5 4.0 (2.0) 10 11.50 5.0
history.state 18 4.0 (2.0) 10 11.50 6.0

恩,就这些!

李小龙

呀!打~~!!~~骚年,还不亮出你的菊花………………………………………………………………………………………………………………………………刀!

原创文章,转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址: http://www.zhangxinxu.com/wordpress/?p=3432

(本篇完)

有话要说?点击 这里发表评论。

相关 [ajax html5 history] 推荐:

ajax与HTML5 history pushState/replaceState实例

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=3432. 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗. 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付、贷款和领证什么的. HTML5 history相关知识点啪啦啪啦讲起来也是一条又臭又长的裹脚布,精气神实在不够用,这里,直接一个实例.

操纵历史,利用HTML5 History API实现无刷新跳转

- - 蓝飞技术部落格
有一次在上点点网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处: GitHub或 阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度搜罗了一下,才发现这原来是使用HTML5中History API实现的效果,但奈何一直未曾派上用场.

基于HTML5的可预览多图片Ajax上传

- Lynn - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1923. 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张. 要一次上传多图,做法是借助于flash. 可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观.

利用jQuery和HTML5实现无刷新Ajax风格的表单

- - CSDN博客推荐文章
        利用jQuery我们能够做出一些相当震撼的网页效果. jQuery的出现使DOM的操作更加的简单易用. 下面的教程展示了如何利用jQuery创建一个HTML5效果的邀请表格,同时实现表格内容的检查功能.         首页的格式必须是HTML5的格式.         接下来添加jQuery库,将如下代码添加到标签之前:.

html5拖拽图片批量ajax无刷新进度上传

- - Web前端 - ITeye博客
之前有篇文章说到HTML5的拖拽(. 这里说的拖拽图片只是弱化了拖的概念,而强化了拽的操作. 从浏览器外部拖动一个文件到浏览器中来,如:. 拖动文件到浏览器之后,就会打开浏览器支持的文件,如常用的txt、图片等,如下:. 操作如上常用文件,一般都有默认行为来处理这样的事件. 这里说的拖拽上传也是一个道理,就是要做的是从浏览器外部拖动文件到浏览器中来,并且在当前页面上传该文件.

原生AJAX

- - Web前端 - ITeye博客
对象是ajax的基础,几乎所有的浏览器都支持他,只是创建方式不同,如IE5,IE6. 2、AJAX - 向服务器发送请求请求. 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用. 然而,在以下情况中,请使用 POST 请求:. 无法使用缓存文件(更新服务器上的文件或数据库). 向服务器发送大量数据(POST 没有数据量限制).

初识Ajax

- - CSDN博客推荐文章
Ajax(Asynchronous JavaScript and XMLS异步JavaScript和XML)(“阿贾克斯”)技术. 完成页面的局部刷新,从而提升操作性能. AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术. 依赖的核心对象:XMLHttpRequest.

History命令经典用法15例

- northteam - ITeye论坛最新讨论
如果你经常使用 Linux 命令行,那么使用 history(历史)命令可以有效地提升你的效率. 本文将通过实例的方式向你介绍 history 命令的 15 个用法. 使用 HISTTIMEFORMAT 显示时间戳. 当你从命令行执行 history 命令后,通常只会显示已执行命令的序号和命令本身.

jquery ajax 跨域请求

- - 博客园_首页
使用 jquery 中的ajax  进行跨域请求. 说明:dataType 为  "jsonp"  ;type 只能为 GET.                    //处理错误. 后台处理代码 ValidAccountsExists.aspx.

ajax核心js代码

- - ITeye博客
                         //针对firefox,mozillar,opera,safari,IE7,IE8.                          //针对某些特定版本的mozillar浏览器的bug进行修正.                          //针对IE6,IE5.5,IE5.