首页 > 代码库 > 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="周记【学校晚会篇】" /><meta name="description" content="周记【学校晚会篇】 在这一周里我们13届的新生度过了在联合技校的第一个晚会，虽然我觉得这个晚会我觉得有点无聊，但是我觉得还是有点意思，怎么说都是我们的第一个晚会，总比在班上晚修爽多了。【哈哈哈哈啊哈哈哈哈哈】" /><link rel="shortcut icon" href="../images/school003_icon.png" type="image/x-icon" /> 6 <link type="text/css" href="../css/template.css" rel="stylesheet" /> 7 <script type="text/javascript" src="../script/jquery-1.8.2.min.js"></script> 8 <script type="text/javascript" src="../script/jQuery.md5.js"></script> 9 <!--[if IE 6]> 10 <script type="text/javascript" src="http://www.mamicode.com/script/plugs/DD_belatedPNG_0.0.8a.js"></script> 11 <script type="text/javascript"> 12 DD_belatedPNG.fix(‘img‘); 13 </script> 14 <![endif]--> 15 <style type="text/css"> 16 #article_bar{ 17 width: 960px; 18 height: auto; 19 text-align: center; 20 box-shadow:1px 1px 7px #222; 21 border-radius: 10px; 22 margin-bottom: 10px; 23 background: #37291C; 24 color: #fff; 25 } 26 #article_bar a{ 27 color: #FFFA85; 28 } 29 #article_bar ul li{ 30 width: 50px; 31 height: 40px; 32 line-height: 40px; 33 float: left; 34 margin-left: 28px; 35 } 36 #article_wrap{ 37 position: relative; 38 } 39 #article_list{ 40 width: 400px; 41 height: auto; 42 text-align: center; 43 float: right; 44 border-radius: 10px; 45 box-shadow:1px 1px 7px #222; 46 background: #37291C; 47 margin-bottom: 10px; 48 } 49 #works_list{ 50 width: 400px; 51 height: auto; 52 text-align: center; 53 clear: right; 54 float: right; 55 border-radius: 10px; 56 box-shadow:1px 1px 7px #222; 57 background: #37291C; 58 margin-bottom: 10px; 59 } 60 #article_list_title,#works_list_title{ 61 font-size: 1.4em; 62 height: 30px; 63 line-height: 28px; 64 width: 400px; 65 text-align: center; 66 color: #fff; 67 border-top-left-radius: 10px; 68 border-top-right-radius: 10px; 69 } 70 #article_list_content,#works_list_content{ 71 border-bottom-left-radius: 10px; 72 border-bottom-right-radius: 10px; 73 } 74 #article_list_content ul li a,#works_list_content ul li a{ 75 color: #FFFA85; 76 } 77 #article_list_content ul li,#works_list_content ul li{ 78 margin-left: 10px; 79 margin-bottom: 10px; 80 text-align: left; 81 } 82 #article_ajax_content{ 83 width: 520px; 84 box-shadow:1px 1px 7px #222; 85 border-radius: 10px; 86 background: #37291C; 87 float: left; 88 margin-right: 20px; 89 padding: 10px; 90 margin-bottom: 10px; 91 color: #fff; 92 } 93 #article_ajax_content p{ 94 margin-bottom: 20px; 95 } 96 #article_wrap .page_bar{ 97 width: 340px; 98 margin-left: auto; 99 margin-right: auto;100 text-align: center;101 margin-bottom: 10px;102 }103 #article_wrap .page_bar a{104 color: #fff;105 text-decoration: none;106 }107 #article_wrap .page_bar ul li{108 float: left;109 margin-left: 10px;110 width: 20px;111 height: 20px;112 line-height: 20px;113 background: #788C35;114 color: #FFF;115 border-radius: 5px;116 }117 #link_wish_wall{118 float: right;119 clear: right;120 width: 400px;121 text-align: left;122 border-radius: 10px;123 box-shadow:1px 1px 7px #222;124 margin-top: 10px;125 color: #fff;126 background: #788C35;127 margin-bottom: 10px;128 }129 #link_wish_wall a{130 color: #fff;131 text-decoration: none;132 }133 #link_wish_wall p{134 margin:8px;135 }136 .time{137 margin-left: 10px;138 color: #fff;139 font-size: 0.8em;140 }141 #article_comment{142 width: 400px;143 height: auto;144 text-align: center;145 clear: right;146 float: right;147 border-radius: 10px;148 box-shadow:1px 1px 7px #222;149 background: #37291C;150 color: #fff;151 display: none;152 margin-bottom: 10px;153 }154 #article_comment_content{155 width: 360px;156 margin-left: auto;157 margin-right: auto;158 border-top: 1px solid #fff;159 border-bottom: 1px solid #fff;160 margin-bottom: 5px;161 text-align: left;162 word-wrap:break-word;163 overflow:hidden;164 }165 #article_comment_bottom{166 width: 360px;167 margin-left: auto;168 margin-right: auto;169 }170 #article_comment_bottom_bar{171 text-align: left;172 }173 #article_comment_submit,#article_comment_err{174 margin-left: 6px;175 }176 #article_comment_err{177 color: red;178 }179 #article_comment_submit{180 cursor: pointer;181 }182 </style>183 <title>周记【学校晚会篇】</title></head>184 185 <body>186 <div id="container">187 <script type="text/javascript">188 $(document).ready(function(){189 $(‘#login_btn‘).click(function(){190 $.ajax({191 type: "POST",192 url: "http://www.school003.com/login.php",193 data: "user="+$(‘#login_user‘).val()+"&pwd="+$.md5($(‘#login_pwd‘).val()),194 success: function(msg){195 if(msg != 1){196 $(‘#login_error‘).html("用户名或密码错误！");197 }else{198 location.reload();199 }200 }201 });202 });203 $(‘#login_exit‘).click(function(){204 $.cookies.set(‘user‘,‘‘,{domain: ‘.school003.com‘,path:‘/‘,expiresAt:new Date(2012,5,1),secure:false});//各参数要齐全（IE下不能设置Domian为localhost）否则无效205 $.ajax({206 type: "POST",207 url: "http://www.school003.com/unLogin.php",208 data: "user="+$(‘#login_user‘).val(),209 success: function(msg){210 if(msg == "unLogin"){211 window.location.href = "http://www.school003.com/";212 }213 }214 });215 });216 $(‘#web_application‘).mouseover(function(){217 $(‘#web_application_menu_list‘).show();218 });219 $(‘#web_application‘).mouseout(function(){220 $(‘#web_application_menu_list‘).hide();221 });222 });223 </script>224 <script type="text/javascript">225 var href = window.location.href;226 function toQzoneLogin(){227 window.location.href = "http://www.school003.com/quickLoad/qq/index.php?href=http://www.mamicode.com/" + href;228 } 229 </script>230 <div id="head">231 <div id="head_bar">232 <div id="school003Logo">233 <img src="http://www.school003.com/images/school003Logo.png">234 </div>235 236 <!-- 登陆窗口 -->237 <div id=‘login_box‘>238 <div>239 用户：<input type=‘text‘ id=‘login_user‘ class=‘login_textbox‘>240 密码：<input type=‘password‘ id=‘login_pwd‘ class=‘login_textbox‘>241 <input type=‘button‘ value=‘登陆‘ id=‘login_btn‘>242 <span id=‘qqLoginBtn‘><a href="#" onclick=‘toQzoneLogin()‘><img src="http://www.school003.com/images/qq_login.png"></a></span>243 <span id=‘login_error‘> </span>244 </div>245 </div>246 <!-- 应用中心 -->247 <div id="web_application">248 <div id="web_application_menu">应用中心</div>249 <div id="web_application_menu_list">250 <ul>251 <li><a href="http://www.school003.com">本站主页</a></li>252 <li><a href="http://www.school003.com/works/">作品欣赏</a></li>253 <li><a href="http://www.school003.com/photo/">照片分享</a></li>254 <li><a href="http://www.school003.com/article/">文章分享</a></li>255 <li><a href="http://j.school003.com">上机练习</a></li>256 <li><a href="http://www.school003.com/grade/">在校成绩查询</a></li>257 </ul>258 </div>259 </div>260 261 </div>262 </div> <div id="nav">263 <div id="nav_menu">264 <ul>265 <li><a href="http://www.school003.com">本站主页</a></li>266 <li><a href="http://www.school003.com/works/">作品欣赏</a></li>267 <li><a href="http://www.school003.com/photo/">照片分享</a></li>268 <li><a href="http://www.school003.com/article/">文章分享</a></li>269 <li><a href="http://j.school003.com">上机练习</a></li>270 <li><a href="http://www.school003.com/grade/">在校成绩查询</a></li>271 <li><a href="http://www.school003.com/special/" class="active">专辑</a></li>272 </ul>273 </div>274 </div>275 <div id="main">276 <div id="main_content">277 <div id=‘article_bar‘>278 <p>中计1331班成长笔记</p>279 <ul>280 <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> 281 </ul>282 <p style=‘clear:both‘></p>283 </div>284 <div id="article_wrap">285 <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> 286 </div>287 </div>288 </div>289 <script type="text/javascript">290 291 var commentUser = ‘‘;292 var typeId;293 294 $(‘#article_bar a‘).live(‘click‘, function () {295 var state = { href: $(this).attr(‘href‘),title: $(this).text()};296 if(!window.ActiveXObject){ 297 history.pushState(state, document.title, state.href);298 }299 $.ajax({300 type: "GET",301 url: "controller.php",302 data: "id="+$(this).attr(‘href‘).substr(0,$(this).attr(‘href‘).indexOf(‘.‘))+"&pjax=true",303 success: function(msg){304 $("#article_wrap").html(msg); 305 }306 });307 document.title = $(this).text();308 return false;309 });310 311 312 $(‘.page_bar a‘).live(‘click‘, function () {313 //ajax返回的href，在IE下自动加httP://www....，故需过滤314 if (window.ActiveXObject) {315 var thisHref = $(this).attr(‘href‘).substr($(this).attr(‘href‘).lastIndexOf("/")+1);316 }else{317 var thisHref = $(this).attr(‘href‘);318 }319 var state = { href: $(this).attr(‘href‘),title: "分页内容"};320 if(!window.ActiveXObject){ 321 history.pushState(state, document.title, state.href);322 }323 $.ajax({324 type: "GET",325 url: "controller.php",326 data: "id="+thisHref.substr(0,thisHref.indexOf(‘.‘))+"&pjax=true",327 success: function(msg){328 $("#article_list").html(msg); 329 }330 });331 $("#article_comment").hide();332 return false;333 });334 335 336 $(‘#article_list_content a,#works_list_content a‘).live(‘click‘, function () {337 //ajax返回的href，在IE下自动加httP://www....，故需过滤338 if (window.ActiveXObject) {339 var thisHref = $(this).attr(‘href‘).substr($(this).attr(‘href‘).lastIndexOf("/")+1);340 }else{341 var thisHref = $(this).attr(‘href‘);342 }343 var state = { href: thisHref,title: $(this).text().substr($(this).text().indexOf(".")+1)};344 typeId = thisHref.substr(0,thisHref.indexOf("."));345 $("#article_comment").show();346 if(!window.ActiveXObject){ 347 history.pushState(state, document.title, state.href);348 }349 $.ajax({350 type: "GET",351 url: "controller.php",352 data: "id="+thisHref+"&pjax=true",353 success: function(msg){354 $("#article_ajax_content").html(msg); 355 }356 });357 358 $.ajax({359 type: "POST",360 url: "comment.php",361 data: "typeId="+typeId+"&a=true",362 success: function(msg){363 $("#article_comment_content").html(msg); 364 }365 });366 $("#article_comment_textarea").val("");367 $("#article_comment_err").html("");368 document.title = $(this).text().substr($(this).text().indexOf(".")+1);369 return false;370 });371 372 var diffUser = false;373 if(!window.ActiveXObject){ 374 window.addEventListener(‘popstate‘, function(e){375 if (history.state){376 var state = e.state;377 var href = state.href;378 var count = href.split("-");379 //获取URL后退的内容380 $.ajax({381 type: "GET",382 url: "controller.php",383 data: diffUser===false?"id="+href+"&pjax=true":"id="+href+"&pjax=true"+"&diffUser="+diffUser,384 success: function(msg){385 if (diffUser === false) {386 switch(count[1]){387 case "normal":388 $("#article_wrap").html(msg);389 diffUser = true;390 break;391 case "works":392 if (count[2].indexOf("p") === 0) {393 $("#works_list").html(msg);394 }else{395 $("#article_ajax_content").html(msg);396 }397 diffUser = false;398 break;399 case "article":400 if (count[2].indexOf("p") === 0) {401 $("#article_list").html(msg);402 }else{403 $("#article_ajax_content").html(msg);404 }405 diffUser = false;406 }407 }else{408 $("#article_wrap").html(msg);409 diffUser = false;410 }411 }412 });413 //获取同步的留言内容414 typeId = href.substr(0,href.indexOf(".html"));415 $.ajax({416 type: "POST",417 url: "comment.php",418 data: "typeId="+typeId+"&a=true",419 success: function(msg){420 $("#article_comment_content").html(msg); 421 }422 });423 $("#article_comment_textarea").val("");424 $("#article_comment_err").html("");425 $("#article_comment").show();426 document.title = state.title;427 }428 }, false);429 }430 431 var allowSubmit = true;432 $(‘#article_comment_submit‘).live(‘click‘, function () {433 if ($.trim($("#article_comment_textarea").val()) == "") {$("#article_comment_err").html("内容不能为空");return false};434 if (strlen($.trim($("#article_comment_textarea").val())) > 1500) {$("#article_comment_err").html("最多500个中文,1500个英文");return false};435 if (commentUser == "") {$("#article_comment_err").html("请登陆");return false};436 if (typeId == "") {$("#article_comment_err").html("该生未发表文章不能评论");return false};437 if (allowSubmit === true) {438 allowSubmit = false;439 $.ajax({440 type: "POST",441 url: "comment.php",442 data: "typeId="+typeId+"&content="+$("#article_comment_textarea").val().replace(/\n/g, ‘‘)+"&commentUser="+commentUser,443 success: function(msg){444 $("#article_comment_content").html(msg);445 $("#article_comment_textarea").val("");446 $("#article_comment_err").html("");447 allowSubmit = true;448 }449 });450 }451 });452 453 function strlen(str){ 454 var len = 0; 455 for (var i=0; i<str.length; i++) { 456 var c = str.charCodeAt(i);457 //单字节加1 458 if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {459 len++;460 }else{461 len+=3;462 }463 } 464 return len; 465 }466 467 </script>468 469 <div id="ad_left">470 </div>471 <div id="ad_right">472 </div> </div>473 <div id="scrollToTop" onclick="window.scrollTo(‘0‘,‘0‘)"></div>474 <!--475 <div id="scrollToBottom" onclick="window.scrollTo(‘0‘,document.body.scrollHeight)">底部</div>476 -->477 478 <div id="footer">479 <div id="footer_bar">480 <div id="footer_bar_index"><span><a href="http://www.school003.com">本站主页</a></span></div>481 <div id="footer_bar_works">482 <span><a href="http://www.school003.com/works/">作品欣赏</a></span>483 <ul>484 485 </ul>486 </div>487 <div id="footer_bar_photo">488 <span><a href="http://www.school003.com/photo/">照片分享</a></span>489 <ul>490 491 </ul>492 </div>493 <div id="footer_bar_article">494 <span><a href="http://www.school003.com/article/">文章分享</a></span>495 <ul>496 497 498 </ul>499 </div>500 <div id="footer_bar_onExercises">501 <span><a href="http://j.school003.com">上机练习</a></span>502 <ul>503 <li><a href="http://j.school003.com">计算机应用基础</a></li>504 </ul>505 </div>506 <div id="footer_bar_schoolGrade">507 <span><a href="http://www.school003.com/grade/">在校成绩查询</a></span>508 </div>509 <div id="weixin">510 <img src="http://www.school003.com/images/weixin.jpg" width="100" height="100" alt="第三方校园网微信二维码" />511 </div>512 </div>513 514 515 <div id="footer_copyright">516 <p>Copyright© 2014 school003.com All Rights Reserved. 版权所有 QQ:78945165517 518 <script type="text/javascript">519 var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");520 document.write(unescape("%3Cscript src=http://www.mamicode.com/‘" + _bdhmProtocol + "hm.baidu.com/h.js%3F721f10eb7e8bde6edd79f06f42485245‘ type=‘text/javascript‘%3E%3C/script%3E"));521 </script>522 </p></div>523 </div>524 <!-- Baidu Button BEGIN -->525 <script type="text/javascript" id="bdshare_js" data="type=slide&img=8&pos=right&uid=6780851" ></script>526 <script type="text/javascript" id="bdshell_js"></script>527 <script type="text/javascript">528 document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);529 </script>530 <!-- Baidu Button END -->531 <!-- Piwik -->532 <script type="text/javascript"> 533 var _paq = _paq || [];534 _paq.push([‘trackPageView‘]);535 _paq.push([‘enableLinkTracking‘]);536 (function() {537 var u=(("https:" == document.location.protocol) ? "https" : "http") + "://www.school003.com/piwik//";538 _paq.push([‘setTrackerUrl‘, u+‘piwik.php‘]);539 _paq.push([‘setSiteId‘, 1]);540 var d=document, g=d.createElement(‘script‘), s=d.getElementsByTagName(‘script‘)[0]; g.type=‘text/javascript‘;541 g.defer=true; g.async=true; g.src=u+‘piwik.js‘; s.parentNode.insertBefore(g,s);542 })();543 544 </script>545 <noscript><p><img src="http://www.school003.com/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>546 <!-- End Piwik Code -->547 <script>548 (function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject‘]=r;i[r]=i[r]||function(){549 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),550 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)551 })(window,document,‘script‘,‘//www.google-analytics.com/analytics.js‘,‘ga‘);552 553 ga(‘create‘, ‘UA-42913160-1‘, ‘school003.com‘);554 ga(‘send‘, ‘pageview‘);555 </script></body>556 </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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。