您的位置：首页 > Web前端 > HTML5

HTML5的history API，保存ajax数据

2014-09-30 14:06 369 查看

最近在学习HTML5，看到一些教程讲到H5的history API，个人觉得蛮有用的，就顺带记录下来。

有些页面上的数据是通过ajax请求后台返回，然后填充到页面上。在点击一个连接后，如果此时按浏览器的返回键，是不能获取到刚才完整的界面（因为ajax填充的数据没有被history记录下来）。在H5中，提供了几个新的history的API函数，本文主要讲以下三个函数。

(1.)window.history.pushState(data,title[,url]) //向当前history添加数据，数据的标识用url来区分，在添加数据的时候浏览器的ur参数会发生改变，但不发送请求

(2.)window.history.replaceState(data,title[,url]) //替换history数据

(3.)window.onpopstate = function(event){ //通过history前进后退，触发onpopstate事件
//event.state;//返回
}

为了方便理解，贴上代码：

前台view界面：

<html>

<body>
<nav>
<button id="home" class="active">Home</button >
<button id="center">Center</button >
</nav>
<br>
<div>
<p id="p1"></p>
</div>

</body>

</html>

<script src="jquery-1.7.2.js"></script>

<script>
$(function(){
$.get("ajax.php?request=home",function(data){
//alert(data);
$("#p1").html(data);

});

$("#home").click(function(){
$.get("ajax.php?request=home",function(data){
$("#p1").html(data);
window.history.pushState({"data":data},"home","?home");
});
});

$("#center").click(function(){
$.get("ajax.php?request=center",function(data){
$("#p1").html(data);
window.history.pushState({"data":data},"center","?center");
});
});

window.onpopstate = function(e){
if(e.state){
var data = e.state.data;
document.querySelector("#p1").innerHTML = data;
}
};
});

</script>

后台ajax.php：

<?php
function request()
{
$request = $_GET['request'];
if($request=="home")
{
echo "home";
}
if($request=="center")
{
echo "center";
}
return ;
}
request();

?>

代码比较简单，前台就是点击Home和Center两个按钮时，通过ajax从后台获取数据，从而div里面的值发生改变。在发送aja请求获取数据之后，调用pushState函数，向history添加数据，然后再点击前进（后退）按钮时触发window.onpopstate事件，如果浏览器有记录的话就把浏览器里保存的数据填充到
id为p1的段落里面。

这样每次ajax请求的值就保存下来，按前进（后退键也能看到数据了）。

新手初稿，比较粗糙。嘿嘿。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 api

相关文章推荐

新的分享

章节导航