zoukankan      html  css  js  c++  java
  • 使用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'>&nbsp;</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;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(/
    /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&copy; 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&amp;img=8&amp;pos=right&amp;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>
    View Code

    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,但在使用的时候还是要做很多处理的。

  • 相关阅读:
    ubuntu 16.04 连接无线网络
    linux的内存管理-抛砖引玉
    linux的进程调度-抛砖引玉
    AliOS Things 异步事件框架Yloop
    AliOS Things 云端物联网操作系统
    linux performance tools
    linux进程调度
    linux 内核Lockup机制浅析
    cache和内存屏障
    linux设备模型及实例
  • 原文地址:https://www.cnblogs.com/daishuguang/p/3983459.html
Copyright © 2011-2022 走看看