在HTML5中,

  1. 新增了通过JS在浏览器历史记录中添加项目的功能。
  2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL。
  3. 添加了当用户单击浏览器的后退按钮时触发的事件。

通过以上三点,可以实现在不刷新页面的前提下动态改变浏览器地址栏中的URL,动态显示页面内容。
比如: 当页面A和页面B内容不一样的时候,在HTML5之前,如果从页面A切换到页面B时,需要在浏览器下从页面A切换到页面B,或者说,如果需要有后退按钮功 能的话,可以在URL地址加#XXXX 可以实现后退功能。那么现在在HTML5中,可以通过History API实现如下处理即可:

  1. 1在A页面 通过发AJAX请求 请求页面中的B数据。
  2. 在页面A中通过JS装载相应的信息到相应的位置来。
  3. 通过History API在不刷新页面的情况下在浏览器的地址栏中从页面A的URL地址切换到页面B的URL地址。

HTML4中的History API

属性

  1. length 历史的项数。javascript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。

方法

  1. back() 后退,跟按下“后退”键是等效的。
  2. forward() 前进,跟按下“前进”键是等效的。
  3. go() 用法:history.go(x);在历史的范围内去到指定的一个地址。如果 x < 0,则后退 x 个地址,如果 x > 0,则前进 x 个地址,如果 x == 0,则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。

HTML5中的History API

1. history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会 忽略此参数;url为页面地址,可选,缺省为当前页地址。

2. history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上。

3. history.state:用于存储以上方法的data数据,不同浏览器的读写权限不一样。

4. popstate事件:当用户单击浏览器的后退或者前进按钮时触发该事件。在事件处理函数中读取触发事件的事件对象的state属性值,该属性值即为执行pushState方法时所使用的第一个参数值,其中保存了在向浏览器历史记录中添加记录同步保存的对象。

到目前为止,IE10,firefox4以上的版本,Chrome8以上的版本,Safari5,Opera11以上的版本浏览器支持HTML5中的History API。

为什么要使用History API

在ajax给我们带来提高用户体验、减少HTTP连接数等好处的同时,也渐渐显露出一些不足之处,比如:

  1. 无法使用浏览器的前进、后退来切换前后数据。
  2. 单纯地使用AJAX不利于搜索引擎优化。

截图演示如下:

如上面的效果,页面一进来的时候是 index.html 当我点击 测试1 时候 显示测试1中的内容 浏览器地址转到测试1的URL,同理测试2和测试3都一样,接着我们可以通过地址栏中的前进和后退按钮也可以操作。

基本的代码如下:

index.html

<div class="container">
<ul class="list">
<li>
<a href="http://localhost/demo/html5/index.php">测试1</a>
</li>
<li>
<a href="http://localhost/demo/html5/index2.php">测试2</a>
</li>
<li>
<a href="http://localhost/demo/html5/index3.php">测试3</a>
</li>
</ul> <div class="all-content">
<ul class="content">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</div>

  

index.php代码输出如下:就是输出一个JSON格式

<?php
$data = json_decode(file_get_contents("php://input"));
header("Content-Type: application/json; charset=utf-8");
echo ("[{"age" : 24, "sex" : "boy", "name" : "不喝酒"},{"age" : 26, "sex" : "boy", "name" : "huangxueming2"}]");
?>

  

index2.php代码输出如下:

<?php
$data = json_decode(file_get_contents("php://input"));
header("Content-Type: application/json; charset=utf-8");
echo ("[{"age" : 65, "sex" : "boy2", "name" : "烧豆腐"},{"age" : 26, "sex" : "boy", "name" : "huangxueming2"}]");
?>

  

index3.php代码输出如下:

<?php
$data = json_decode(file_get_contents("php://input"));
header("Content-Type: application/json; charset=utf-8");
echo ("[{"age" : 244, "sex" : "boy4", "name" : "huangxueming4"},{"age" : 264, "sex" : "boy4", "name" : "huangxueming4"}]");
?>

  

JS所有的代码如下:

/**
* HTML5 history and ajax
*/ $(function(){
var ajax,
currentState;
$(".container li").unbind().bind("click",function(e){ e.preventDefault();
var target = e.target,
url = $(target).attr("href");
!$(this).hasClass("current") && $(this).addClass("current").siblings().removeClass("current");
if(ajax == undefined) {
currentState = {
url: document.location.href,
title: document.title,
html: $(".content").html()
};
}
ajax = $.ajax({
type:"POST",
url: url,
dataType:"json",
success: function(data){
var html = "";
if(data.length > 0) {
for(var i = 0, ilist = data.length; i < ilist; i++) {
html += "<li>" +data[i].age+ "</li>" +
"<li>" +data[i].name+ "</li>" +
"<li>" +data[i].sex+ "</li>";
}
$(".content").html(html);
}
var state = {
url: url,
title: document.title,
html: $(".content").html()
};
history.pushState(state,null,url);
}
}); }); window.addEventListener("popstate",function(event){
if(ajax == null){
return;
}else if(event && event.state){
document.title = event.state.title;
$(".content").html(event.state.html);
}else{
document.title = currentState.title;
$(".content").html(currentState.html);
}
});
});

  

HTML5 History API实现无刷新跳转的更多相关文章

  1. HTML5 History API 实现无刷新跳转

     在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...

  2. ajax与HTML5 history API实现无刷新跳转

    一.ajax载入与浏览器历史的前进与后退 ajax可以实现页面的无刷新操作,但是无法前进与后退,淡出使用Ajax不利于SEO.如今,HTML5让事情变得简单.当执行ajax操作时,往浏览器histor ...

  3. 利用HTML5的History API实现无刷新跳转页面初探

    HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...

  4. 有趣的API: history pushState/popstate 无刷新跳转(pjax)

    API介绍 首先看看API如何使用: history.pushState(state, title, url) : 无刷新的向浏览器 历史最前方 加入一条记录. state(any) 需要保存的数据, ...

  5. window.history的跳转实质-HTML5 history API 解析

    在上一浏览器跳转行为的测试中,我们看到了通过不同的方法操作浏览器跳转时,它的刷新表现有所不同,在这一文章中,将看看,为何会产生这样的不同?其背后的实质是什么?浏览器的访问历史记录到底是如何运作的呢? ...

  6. 利用history实现无刷新跳转界面

    看标题是不是感觉很拽的样子,其实没什么啦,也就是时下常说的单页面应用.这种web形式在如今的移动端十分流行,毕竟在移动端频繁得去刷新界面不是很友好,而且还费流量.今天我们要做一个小的app(移动端), ...

  7. HTML5 history API实践

    一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...

  8. 转: html5 history api详解~很好的文章

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  9. HTML5 history API,创造更好的浏览体验

    HTML5 history API有什么用呢? 从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残 ...

随机推荐

  1. 关于jackson处理数据

    /**     * 将请求参数封装成Map对象     *     * @param json 参数     * @return Object     */    public static Map ...

  2. 如何使用Python3.4连接MySQL

    http://www.tuicool.com/articles/yqayEv import pymysql conn = pymysql.connect(host='localhost', port= ...

  3. xpath轴的正确使用姿势

    网上看了许多关于轴的介绍,只介绍了语法,而没有明说具体实际中该怎么使用,百思不得其解. 背景--python中使用xpath:  ----------------------------------- ...

  4. 代理委托和block

    delegate 委托是协议的一种,顾名思义,就是委托他人帮自己去做事.委托是给一个对象提供机会对另一个对象中的变化做出反应或者影响另一个对象的行为.其基本思想是:两个对象协同解决问题,并且打算在广泛 ...

  5. 浅谈Runloop

    RunLoop 是 iOS 和 OS X 开发中非常基础的一个概念,这篇文章将从 CFRunLoop 的源码入手,介绍 RunLoop 的概念以及底层实现原理.之后会介绍一下在 iOS 中,苹果是如何 ...

  6. CSS背景色渐变

      试了下 渐变色  ,主要确定开始位置  结束位置,以及对应的color-stop;  以下是兼容不同浏览器的代码片段       代码:<style type="text/css& ...

  7. socket reuse

    int k   =   1;    if( SUCCESS != m_socketServer.setSockOptSocket( SO_REUSEADDR, (char*)&k, sizeo ...

  8. 破解版windows 7(旗舰版)下安装并使用vagrant统一开发环境

    参考百度经验:http://jingyan.baidu.com/article/5553fa82c158bb65a23934be.html,事先对win7进行破解后的三个文件进行还原,否则会导致vir ...

  9. ul和dl的区别

    列表中有标题的时候就用dl,没有的话就用ul

  10. 一些对新手有用的css技巧

    一.表单部分 1.禁止textarea文本域的缩放 resize:none; 2.去除初始化textarea下拉条 overflow:auto; 3.如何让表单中的选项按钮,点击文字也能选中? < ...