使用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="../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=" + 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:78945165 517 518 <script type="text/javascript"> 519 var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); 520 document.write(unescape("%3Cscript src='" + _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，但在使用的时候还是要做很多处理的。