使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="周记【学校晚会篇】" /><meta name="description" content="周记【学校晚会篇】 在这一周里我们13届的新生度过了在联合技校的第一个晚会，虽然我觉得这个晚会我觉得有点无聊，但是我觉得还是有点意思，怎么说都是我们的第一个晚会，总比在班上晚修爽多了。【哈哈哈哈啊哈哈哈哈哈】" /><link rel="shortcut icon" href="../images/school003_icon.png" type="image/x-icon" />
<link type="text/css" href="../css/template.css" rel="stylesheet" />
<script type="text/javascript" src="../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../script/jQuery.md5.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="../script/plugs/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('img');
</script>
<![endif]-->
<style type="text/css">
#article_bar{
width: 960px;
height: auto;
text-align: center;
box-shadow:1px 1px 7px #222;
border-radius: 10px;
margin-bottom: 10px;
background: #37291C;
color: #fff;
}
#article_bar a{
color: #FFFA85;
}
#article_bar ul li{
width: 50px;
height: 40px;
line-height: 40px;
float: left;
margin-left: 28px;
}
#article_wrap{
position: relative;
}
#article_list{
width: 400px;
height: auto;
text-align: center;
float: right;
border-radius: 10px;
box-shadow:1px 1px 7px #222;
background: #37291C;
margin-bottom: 10px;
}
#works_list{
width: 400px;
height: auto;
text-align: center;
clear: right;
float: right;
border-radius: 10px;
box-shadow:1px 1px 7px #222;
background: #37291C;
margin-bottom: 10px;
}
#article_list_title,#works_list_title{
font-size: 1.4em;
height: 30px;
line-height: 28px;
width: 400px;
text-align: center;
color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#article_list_content,#works_list_content{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#article_list_content ul li a,#works_list_content ul li a{
color: #FFFA85;
}
#article_list_content ul li,#works_list_content ul li{
margin-left: 10px;
margin-bottom: 10px;
text-align: left;
}
#article_ajax_content{
width: 520px;
box-shadow:1px 1px 7px #222;
border-radius: 10px;
background: #37291C;
float: left;
margin-right: 20px;
padding: 10px;
margin-bottom: 10px;
color: #fff;
}
#article_ajax_content p{
margin-bottom: 20px;
}
#article_wrap .page_bar{
width: 340px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 10px;
}
#article_wrap .page_bar a{
color: #fff;
text-decoration: none;
}
#article_wrap .page_bar ul li{
float: left;
margin-left: 10px;
width: 20px;
height: 20px;
line-height: 20px;
background: #788C35;
color: #FFF;
border-radius: 5px;
}
#link_wish_wall{
float: right;
clear: right;
width: 400px;
text-align: left;
border-radius: 10px;
box-shadow:1px 1px 7px #222;
margin-top: 10px;
color: #fff;
background: #788C35;
margin-bottom: 10px;
}
#link_wish_wall a{
color: #fff;
text-decoration: none;
}
#link_wish_wall p{
margin:8px;
}
.time{
margin-left: 10px;
color: #fff;
font-size: 0.8em;
}
#article_comment{
width: 400px;
height: auto;
text-align: center;
clear: right;
float: right;
border-radius: 10px;
box-shadow:1px 1px 7px #222;
background: #37291C;
color: #fff;
display: none;
margin-bottom: 10px;
}
#article_comment_content{
width: 360px;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin-bottom: 5px;
text-align: left;
word-wrap:break-word;
overflow:hidden;
}
#article_comment_bottom{
width: 360px;
margin-left: auto;
margin-right: auto;
}
#article_comment_bottom_bar{
text-align: left;
}
#article_comment_submit,#article_comment_err{
margin-left: 6px;
}
#article_comment_err{
color: red;
}
#article_comment_submit{
cursor: pointer;
}
</style>
<title>周记【学校晚会篇】</title></head> <body>
<div id="container">
<script type="text/javascript">
$(document).ready(function(){
$('#login_btn').click(function(){
$.ajax({
type: "POST",
url: "http://www.school003.com/login.php",
data: "user="+$('#login_user').val()+"&pwd="+$.md5($('#login_pwd').val()),
success: function(msg){
if(msg != 1){
$('#login_error').html("用户名或密码错误！");
}else{
location.reload();
}
}
});
});
$('#login_exit').click(function(){
$.cookies.set('user','',{domain: '.school003.com',path:'/',expiresAt:new Date(2012,5,1),secure:false});//各参数要齐全（IE下不能设置Domian为localhost）否则无效
$.ajax({
type: "POST",
url: "http://www.school003.com/unLogin.php",
data: "user="+$('#login_user').val(),
success: function(msg){
if(msg == "unLogin"){
window.location.href = "http://www.school003.com/";
}
}
});
});
$('#web_application').mouseover(function(){
$('#web_application_menu_list').show();
});
$('#web_application').mouseout(function(){
$('#web_application_menu_list').hide();
});
});
</script>
<script type="text/javascript">
var href = window.location.href;
function toQzoneLogin(){
window.location.href = "http://www.school003.com/quickLoad/qq/index.php?href=" + href;
}
</script>
<div id="head">
<div id="head_bar">
<div id="school003Logo">
<img src="http://www.school003.com/images/school003Logo.png">
</div> <!-- 登陆窗口 -->
<div id='login_box'>
<div>
用户：<input type='text' id='login_user' class='login_textbox'>
密码：<input type='password' id='login_pwd' class='login_textbox'>
<input type='button' value='登陆' id='login_btn'>
<span id='qqLoginBtn'><a href="#" onclick='toQzoneLogin()'><img src="http://www.school003.com/images/qq_login.png"></a></span>
<span id='login_error'> </span>
</div>
</div>
<!-- 应用中心 -->
<div id="web_application">
<div id="web_application_menu">应用中心</div>
<div id="web_application_menu_list">
<ul>
<li><a href="http://www.school003.com">本站主页</a></li>
<li><a href="http://www.school003.com/works/">作品欣赏</a></li>
<li><a href="http://www.school003.com/photo/">照片分享</a></li>
<li><a href="http://www.school003.com/article/">文章分享</a></li>
<li><a href="http://j.school003.com">上机练习</a></li>
<li><a href="http://www.school003.com/grade/">在校成绩查询</a></li>
</ul>
</div>
</div> </div>
</div> <div id="nav">
<div id="nav_menu">
<ul>
<li><a href="http://www.school003.com">本站主页</a></li>
<li><a href="http://www.school003.com/works/">作品欣赏</a></li>
<li><a href="http://www.school003.com/photo/">照片分享</a></li>
<li><a href="http://www.school003.com/article/">文章分享</a></li>
<li><a href="http://j.school003.com">上机练习</a></li>
<li><a href="http://www.school003.com/grade/">在校成绩查询</a></li>
<li><a href="http://www.school003.com/special/" class="active">专辑</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="main_content">
<div id='article_bar'>
<p>中计1331班成长笔记</p>
<ul>
<li><a href='uedu_13ZJ3101-normal-1.html'>黄艳玲</a></li><li><a href='uedu_13ZJ3102-normal-1.html'>成家乐</a></li><li><a href='uedu_13ZJ3103-normal-1.html'>叶丽丽</a></li><li><a href='uedu_13ZJ3104-normal-1.html'>潘欣婷</a></li><li><a href='uedu_13ZJ3105-normal-1.html'>何远莲</a></li><li><a href='uedu_13ZJ3106-normal-1.html'>黄本念</a></li><li><a href='uedu_13ZJ3107-normal-1.html'>周伟锋</a></li><li><a href='uedu_13ZJ3108-normal-1.html'>赖永枢</a></li><li><a href='uedu_13ZJ3109-normal-1.html'>李仁福</a></li><li><a href='uedu_13ZJ3110-normal-1.html'>梁旭超</a></li><li><a href='uedu_13ZJ3111-normal-1.html'>符宏超</a></li><li><a href='uedu_13ZJ3112-normal-1.html'>李天奇</a></li><li><a href='uedu_13ZJ3113-normal-1.html'>廖华东</a></li><li><a href='uedu_13ZJ3114-normal-1.html'>廖鹏程</a></li><li><a href='uedu_13ZJ3115-normal-1.html'>庄滨瑜</a></li><li><a href='uedu_13ZJ3116-normal-1.html'>李俊鹏</a></li><li><a href='uedu_13ZJ3117-normal-1.html'>林良决</a></li><li><a href='uedu_13ZJ3118-normal-1.html'>陈昌诚</a></li><li><a href='uedu_13ZJ3119-normal-1.html'>林建浩</a></li><li><a href='uedu_13ZJ3120-normal-1.html'>秦玉</a></li><li><a href='uedu_13ZJ3121-normal-1.html'>林良彬</a></li><li><a href='uedu_13ZJ3122-normal-1.html'>杨国绍</a></li><li><a href='uedu_13ZJ3123-normal-1.html'>暨强安</a></li><li><a href='uedu_13ZJ3124-normal-1.html'>傅彬</a></li><li><a href='uedu_13ZJ3125-normal-1.html'>梁祥武</a></li><li><a href='uedu_13ZJ3126-normal-1.html'>谢愉辉</a></li><li><a href='uedu_13ZJ3127-normal-1.html'>胡承伟</a></li><li><a href='uedu_13ZJ3128-normal-1.html'>苏广哲</a></li><li><a href='uedu_13ZJ3129-normal-1.html'>刘煜</a></li><li><a href='uedu_13ZJ3130-normal-1.html'>钟华青</a></li><li><a href='uedu_13ZJ3131-normal-1.html'>许绍钟</a></li><li><a href='uedu_13ZJ3132-normal-1.html'>莫进权</a></li><li><a href='uedu_13ZJ3133-normal-1.html'>谭鹏</a></li><li><a href='uedu_13ZJ3134-normal-1.html'>黄淦洪</a></li><li><a href='uedu_13ZJ3135-normal-1.html'>袁润奇</a></li><li><a href='uedu_13ZJ3136-normal-1.html'>王海涛</a></li><li><a href='uedu_13ZJ3137-normal-1.html'>何景鑫</a></li><li><a href='uedu_13ZJ3138-normal-1.html'>许金成</a></li><li><a href='uedu_13ZJ3139-normal-1.html'>方璜</a></li><li><a href='uedu_13ZJ3140-normal-1.html'>崔康华</a></li><li><a href='uedu_13ZJ3141-normal-1.html'>张智锋</a></li><li><a href='uedu_13ZJ3142-normal-1.html'>姚嘉豪</a></li><li><a href='uedu_13ZJ3143-normal-1.html'>龙大林</a></li><li><a href='uedu_13ZJ3144-normal-1.html'>唐权超</a></li><li><a href='uedu_13ZJ3145-normal-1.html'>张其松</a></li><li><a href='uedu_13ZJ3146-normal-1.html'>何珽薪</a></li><li><a href='uedu_13ZJ3147-normal-1.html'>潘安</a></li><li><a href='uedu_13ZJ3148-normal-1.html'>黄铎凯</a></li><li><a href='uedu_13ZJ3149-normal-1.html'>吴彬林</a></li><li><a href='uedu_13ZJ3150-normal-1.html'>陈俊杰</a></li><li><a href='uedu_13ZJ3151-normal-1.html'>郑俊浩</a></li><li><a href='uedu_13ZJ3152-normal-1.html'>候军建</a></li><li><a href='uedu_13ZJ3153-normal-1.html'>黎家安</a></li><li><a href='uedu_13ZJ3154-normal-1.html'>杨润钦</a></li><li><a href='uedu_13ZJ3155-normal-1.html'>余俊</a></li><li><a href='uedu_13ZJ3156-normal-1.html'>唐健</a></li><li><a href='uedu_13ZJ3157-normal-1.html'>陈木林</a></li><li><a href='uedu_13ZJ3158-normal-1.html'>林华增</a></li>
</ul>
<p style='clear:both'></p>
</div>
<div id="article_wrap">
<div id="article_ajax_content"><h2 style='text-align:center;margin-bottom:10px'>周记【学校晚会篇】</h2><p> 在这一周里我们13届的新生度过了在联合技校的第一个晚会，虽然我觉得这个晚会我觉得有点无聊，但是我觉得还是有点意思，怎么说都是我们的第一个晚会，总比在班上晚修爽多了。【哈哈哈哈啊哈哈哈哈哈】</p></div><div id='article_list'><div id='article_list_title'>姚嘉豪</div><div id='article_list_content'><ul><li><a href='uedu_13ZJ3142-article-001.html'>1.【我期待的技校生活】</a><span class='time'>2013-09-08</span></li><li><a href='uedu_13ZJ3142-article-002.html'>2.周记1</a><span class='time'>2013-09-10</span></li><li><a href='uedu_13ZJ3142-article-003.html'>3.一件有意义的事</a><span class='time'>2013-10-05</span></li><li><a href='uedu_13ZJ3142-article-004.html'>4.周记</a><span class='time'>2013-10-13</span></li><li><a href='uedu_13ZJ3142-article-011.html'>5.寒假作业（鲁滨孙漂流记读后感）</a><span class='time'>2014-02-15</span></li><li><a href='uedu_13ZJ3142-article-005.html'>6.周记【学校晚会篇】</a><span class='time'>2013-10-20</span></li><li><a href='uedu_13ZJ3142-article-006.html'>7.读后感想</a><span class='time'>2013-10-27</span></li><li><a href='uedu_13ZJ3142-article-007.html'>8.第八周记</a><span class='time'>2013-11-03</span></li><li><a href='uedu_13ZJ3142-article-008.html'>9.第九周记</a><span class='time'>2013-11-10</span></li><li><a href='uedu_13ZJ3142-article-009.html'>10.第10周记</a><span class='time'>2013-11-17</span></li></ul><p style='clear:both'></p></div><div class='page_bar'><ul><li><a href='uedu_13ZJ3142-article-p1.html'>1</a></li><li><a href='uedu_13ZJ3142-article-p2.html'>2</a></li></ul><p style='clear:both'></p></div></div><div id='works_list'><div id='works_list_title'>个人作品</div><div id='works_list_content'><ul><li><a href='uedu_13ZJ3142-works-001.html'>1.姚嘉豪-自我介绍</a><span class='time'>2013-11-16</span></li><li><a href='uedu_13ZJ3142-works-002.html'>2.现代人</a><span class='time'>2013-11-21</span></li></ul><p style='clear:both'></p></div><div class='page_bar'><ul></ul><p style='clear:both'></p></div></div><div id="link_wish_wall"><a href="http://www.school003.com/article/wishWall.html"><p style="font-size:1.4em;text-align:center">许愿墙</p><p>1. wwwwwwwwwwwwwwwwww... 2014-09-18</p><p>2. 11111111111111... 2014-08-10</p><p>3. 好烦啊！感觉有好多... 2014-02-20</p></a></div><div id="article_comment"><p>留言板</p><div id="article_comment_content"></div><div id="article_comment_bottom"><p><textarea name="textarea" cols="40" rows="2" id="article_comment_textarea" style="resize:none"></textarea></p><p id="article_comment_bottom_bar"><span id="article_comment_submit">发表</span><span id="article_comment_err"></span></p></div></div><div style="clear:right;float:right;width:400px;height:60px;line-height:60px;margin-bottom:10px;border-radius: 10px;box-shadow:1px 1px 7px #222;background: #37291C;text-align:center;"><p><a href="grade/" target="_blank" style="font-size:24px;color:#fff;text-decoration:none;">查看考试成绩</a><p></div><p style="clear:both"></p>
</div>
</div>
</div>
<script type="text/javascript"> var commentUser = '';
var typeId; $('#article_bar a').live('click', function () {
var state = { href: $(this).attr('href'),title: $(this).text()};
if(!window.ActiveXObject){
history.pushState(state, document.title, state.href);
}
$.ajax({
type: "GET",
url: "controller.php",
data: "id="+$(this).attr('href').substr(0,$(this).attr('href').indexOf('.'))+"&pjax=true",
success: function(msg){
$("#article_wrap").html(msg);
}
});
document.title = $(this).text();
return false;
}); $('.page_bar a').live('click', function () {
//ajax返回的href，在IE下自动加httP://www....，故需过滤
if (window.ActiveXObject) {
var thisHref = $(this).attr('href').substr($(this).attr('href').lastIndexOf("/")+1);
}else{
var thisHref = $(this).attr('href');
}
var state = { href: $(this).attr('href'),title: "分页内容"};
if(!window.ActiveXObject){
history.pushState(state, document.title, state.href);
}
$.ajax({
type: "GET",
url: "controller.php",
data: "id="+thisHref.substr(0,thisHref.indexOf('.'))+"&pjax=true",
success: function(msg){
$("#article_list").html(msg);
}
});
$("#article_comment").hide();
return false;
}); $('#article_list_content a,#works_list_content a').live('click', function () {
//ajax返回的href，在IE下自动加httP://www....，故需过滤
if (window.ActiveXObject) {
var thisHref = $(this).attr('href').substr($(this).attr('href').lastIndexOf("/")+1);
}else{
var thisHref = $(this).attr('href');
}
var state = { href: thisHref,title: $(this).text().substr($(this).text().indexOf(".")+1)};
typeId = thisHref.substr(0,thisHref.indexOf("."));
$("#article_comment").show();
if(!window.ActiveXObject){
history.pushState(state, document.title, state.href);
}
$.ajax({
type: "GET",
url: "controller.php",
data: "id="+thisHref+"&pjax=true",
success: function(msg){
$("#article_ajax_content").html(msg);
}
}); $.ajax({
type: "POST",
url: "comment.php",
data: "typeId="+typeId+"&a=true",
success: function(msg){
$("#article_comment_content").html(msg);
}
});
$("#article_comment_textarea").val("");
$("#article_comment_err").html("");
document.title = $(this).text().substr($(this).text().indexOf(".")+1);
return false;
}); var diffUser = false;
if(!window.ActiveXObject){
window.addEventListener('popstate', function(e){
if (history.state){
var state = e.state;
var href = state.href;
var count = href.split("-");
//获取URL后退的内容
$.ajax({
type: "GET",
url: "controller.php",
data: diffUser===false?"id="+href+"&pjax=true":"id="+href+"&pjax=true"+"&diffUser="+diffUser,
success: function(msg){
if (diffUser === false) {
switch(count[1]){
case "normal":
$("#article_wrap").html(msg);
diffUser = true;
break;
case "works":
if (count[2].indexOf("p") === 0) {
$("#works_list").html(msg);
}else{
$("#article_ajax_content").html(msg);
}
diffUser = false;
break;
case "article":
if (count[2].indexOf("p") === 0) {
$("#article_list").html(msg);
}else{
$("#article_ajax_content").html(msg);
}
diffUser = false;
}
}else{
$("#article_wrap").html(msg);
diffUser = false;
}
}
});
//获取同步的留言内容
typeId = href.substr(0,href.indexOf(".html"));
$.ajax({
type: "POST",
url: "comment.php",
data: "typeId="+typeId+"&a=true",
success: function(msg){
$("#article_comment_content").html(msg);
}
});
$("#article_comment_textarea").val("");
$("#article_comment_err").html("");
$("#article_comment").show();
document.title = state.title;
}
}, false);
} var allowSubmit = true;
$('#article_comment_submit').live('click', function () {
if ($.trim($("#article_comment_textarea").val()) == "") {$("#article_comment_err").html("内容不能为空");return false};
if (strlen($.trim($("#article_comment_textarea").val())) > 1500) {$("#article_comment_err").html("最多500个中文,1500个英文");return false};
if (commentUser == "") {$("#article_comment_err").html("请登陆");return false};
if (typeId == "") {$("#article_comment_err").html("该生未发表文章不能评论");return false};
if (allowSubmit === true) {
allowSubmit = false;
$.ajax({
type: "POST",
url: "comment.php",
data: "typeId="+typeId+"&content="+$("#article_comment_textarea").val().replace(/\n/g, '')+"&commentUser="+commentUser,
success: function(msg){
$("#article_comment_content").html(msg);
$("#article_comment_textarea").val("");
$("#article_comment_err").html("");
allowSubmit = true;
}
});
}
}); function strlen(str){
var len = 0;
for (var i=0; i<str.length; i++) {
var c = str.charCodeAt(i);
//单字节加1
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
len++;
}else{
len+=3;
}
}
return len;
} </script> <div id="ad_left">
</div>
<div id="ad_right">
</div> </div>
<div id="scrollToTop" onclick="window.scrollTo('0','0')"></div>
<!--
<div id="scrollToBottom" onclick="window.scrollTo('0',document.body.scrollHeight)">底部</div>
--> <div id="footer">
<div id="footer_bar">
<div id="footer_bar_index"><span><a href="http://www.school003.com">本站主页</a></span></div>
<div id="footer_bar_works">
<span><a href="http://www.school003.com/works/">作品欣赏</a></span>
<ul> </ul>
</div>
<div id="footer_bar_photo">
<span><a href="http://www.school003.com/photo/">照片分享</a></span>
<ul> </ul>
</div>
<div id="footer_bar_article">
<span><a href="http://www.school003.com/article/">文章分享</a></span>
<ul> </ul>
</div>
<div id="footer_bar_onExercises">
<span><a href="http://j.school003.com">上机练习</a></span>
<ul>
<li><a href="http://j.school003.com">计算机应用基础</a></li>
</ul>
</div>
<div id="footer_bar_schoolGrade">
<span><a href="http://www.school003.com/grade/">在校成绩查询</a></span>
</div>
<div id="weixin">
<img src="http://www.school003.com/images/weixin.jpg" width="100" height="100" alt="第三方校园网微信二维码" />
</div>
</div> <div id="footer_copyright">
<p>Copyright© 2014 school003.com All Rights Reserved. 版权所有 QQ:78945165 <script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F721f10eb7e8bde6edd79f06f42485245' type='text/javascript'%3E%3C/script%3E"));
</script>
</p></div>
</div>
<!-- Baidu Button BEGIN -->
<script type="text/javascript" id="bdshare_js" data="type=slide&img=8&pos=right&uid=6780851" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
</script>
<!-- Baidu Button END -->
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u=(("https:" == document.location.protocol) ? "https" : "http") + "://www.school003.com/piwik//";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript';
g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})(); </script>
<noscript><p><img src="http://www.school003.com/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-42913160-1', 'school003.com');
ga('send', 'pageview');
</script></body>
</html>
http://www.school003.com/special/uedu_13ZJ3142-article-005.html
http://blog.csdn.net/my_yang/article/details/7412588
在访问现在很火的google plus时，细心的用户也许会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器的前进和后退。不禁让人想问，是什么有这么强大的功能呢？
HTML5里引用了新的API，就是history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。
与传统的AJAX的区别
传统的ajax有如下的问题：
虽然ajax可以无刷新改变页面内容，但无法改变页面URL
其次为了更好的可访问性，内容发生改变后，改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题
有的浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变
再有，ajax的使用对搜索引擎很不友好，往往蜘蛛爬到的区域是空的
为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState, history.replaceState
可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。
pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。
如何调用
var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state, document.title, url);
state对象除了要title和url之外，也可以添加其他的数据，比如：还想将一些发送ajax的配置给保存起来。
replaceState和pushState是相似的，不需要多做解释。
如何响应浏览器的前进、后退操作
window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。
window.addEventListener('popstate', function(e){
if (history.state){
var state = e.state;
//do something(state.url, state.title);
}
}, false);
这样就可以结合ajax和pushState完美的进行无刷新浏览了。
一些限制
1、无法跨域，这个是必然的。引用曾经在网上看到的一句经典的话：“如果javascript可以跨域的话，那他就可以逆天了！”
2、state对象虽然可以存储很多自定义的属性，但值不能是个对象。
对应后端的一些处理
这种模式下除了当前使用ajax可以无刷新浏览外，还要保证直接请求改变的URL后也可以正常浏览，所以后端要对这些处理下。
1、对结合pushState的ajax可以发送一个特殊的头，如： setRequestHeader(‘PJAX’, ‘true’)。
2、后端获取到有PJAX=true的header时，将页面中通用的部分都不输出。比如：PHP可以通过下面的判断
function is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}
虽然接口上只有pushState、replaceState、onpopstate，但在使用的时候还是要做很多处理的。
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL的更多相关文章
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)
在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...
- 使用ajax和js无刷新改变页面内容和地址栏URL
发现一个可以改变地址栏,而不导致页面刷新的东东. Chrome, FF测试通过,不支持IE. 实现目标 页面的跳转(前进后退,点击等)不重新请求页面 页面URL与页面展现内容一致(符合人们对传统网页的 ...
- 使用ajax和history.pushState无刷新改变页面URL onpopstate（转）
Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).re ...
- 使用ajax和history.pushState无刷新改变页面URL
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- 使用ajax和history.pushState无刷新改变页面URL(转)
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- 通过history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- 使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...
- HTML5之pushstate、popstate操作history，无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
随机推荐
- VMware 命令行下安装以及导入Ubuntu系统
前提: 鉴于个人PC性能太弱,考虑是否可以将在PC上搭建好的环境移植到高性能服务器上.想到后就干呗. 下载完对应操作系统的安装包后按如下步骤操作: 安装包名称:VMware-Workstation-F ...
- 输出（test）
本题要求从输入的N个整数中查找给定的X.如果找到,输出X的位置(从0开始数):如果没有找到,输出“Not Found”. 输入格式: 输入在第1行中给出2个正整数N(<=20)和X,第2行给出N ...
- android开发中遇到的bug
这种NullPointerException这么解决啊 Activity.dispatchTouchEvent 里try catch一下 参考:http://www.eoeandroid.com/th ...
- HDU ACM 3177 Crixalis's Equipment
Crixalis's Equipment Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- 关闭HTML5只能提示（form上新增novalidate）
<form novalidate> <input type="text" required /> <input type="su ...
- cocos2dx使用了第三方库照样移植android平台-解决iconv库的移植问题
当我写这篇文章的时候我是怀着激动的心情的,因为我又解决了一个技术问题.你可能对题目还一知半解,这是什么意思,我之所以要写这篇文章就是要解决当我们在cocos2dx中使用了第三方库的时候,移植到andr ...
- cocos2dx移植android平台-我的血泪史
版权声明:本文由( 小塔 )原创,转载请保留文章出处! 本文链接:http://www.zaojiahua.com/android-platform.html 本人这几天一直都没有跟新自己的网站内容, ...
- USB2.0规范
USB是一种支持热插拔的高速串行传输总线,它使用差分信号来传输数据,最高速度可达480Mb/S. USB支持“总线供电”和“自供电”两种供电模式.在总线供电模式下,设备最多可以获得500mA的电流.U ...
- listview的tag
tag,记录一行数据的唯一标识,小DEMO: lsShow.Items.Add("洗衣机"); lsShow.Items[].Tag = "我不愿让你一个人"; ...
- UVa 10316 - Airline Hub
题目:给出地球上的n个机场的经度和纬度,想在这里面确定一个HUB使得他到其他机场的最大距离最小. 分析:计算几何.大地坐标系.因为数据不大直接枚举即可,比较时利用圆心角可以提高计算效率,并控制精度. ...