宋体事件Ajax保留浏览器历史的解决方案 -java教程

上班之余抽点时间出来写写博文，希望对新接触的朋友有帮助。今天在这里和大家一起学习一下宋体事件

    在ajax请求中，不能新更地址栏，地址栏上的“前进”和“退后”按钮就失效了,带来了另外一种糕糟的用户体验。

    决解案方如下：

    案方一：应用window. Onhashchange 事件

    如面下Html段片，点击不同的连接，在mainPanel中载加不同的页面：

    

< ul  class ="menu" >
< li >< a  href ="/home/index#page=1" >page1 </ a ></ li >
< li >< a  href ="/home/index#page=2" >page2 </ a ></ li >
< li >< a  href ="/home/index#page=3" >page3 </ a ></ li >
</ ul >

< div  id ="mainPanel" >
</ div >

    首先写一个方法来获得以后url中指定key的hash值，如下：

    

<script type="text/javascript">
       // 获得指定key的hash值
       function getHash(key, url) {
           var hash;
           if (!!url) {
              hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
              hash = (hash == url) ? "" : hash;
          }  else {
              hash = self.location.hash;
          }

          hash = "" + hash;
          hash = hash.replace(/^[?#]/, '');
          hash = "&" + hash;
           var val = hash.match( new RegExp("[\&]" + key + "=([^\&]+)", "i"));
           if (val ==  null || val.length < 1) {
               return  null;
          }  else {
               return decodeURIComponent(val[1]);
          }
      }
  </script>

    应用onhashchange事件触发ajax请求：

    

<script type="text/javascript">
        function loadPanel() {
         var page = getHash("page");
         if (page == 1) {
            $("#mainPanel").load("/home/page1");
        }
         if (page == 2) {
            $("#mainPanel").load("/home/page2");
        }
         if (page == 3) {
            $("#mainPanel").load("/home/page3");
        }
    }
    $(window).bind("hashchange", loadPanel);
 </script>

    到这里任务经已完成了80%，为什么是80%呢，这里头还有一个题问：

    当你直接在浏览器(新开的签标页)的地址栏里输入这样的地址：http://localhost:3859/home/index#page=3 或者通过QQ发给你的挚友，看到的并非如你所想的应该是page=3的内容，而是http://localhost:3859/home/index 的内容。原因很简单——页面载加的时候不会触发onhashchange事件。

    所以我们要在面上的代码加追一行：

    

$(loadPanel);
// 或者    
$( function(){ $(window).trigger("hashchange"); });

    onhashchange 事件location.hash产生转变的时候触发，可以很好决解AJAX刷新退后/前进键失效的题问，是一个新的事件，

    每日一道理
有些冷，有些凉，心中有些无奈，我一个人走在黑夜中，有些颤抖，身体瑟缩着，新也在抖动着，我看不清前方的路，何去何从，感觉迷茫，胸口有些闷，我环视了一下周围，无人的街头显得冷清，感到整个世界都要将我放弃。脚步彷徨之间，泪早已滴下……

    前目chrome ,firefox,Opera,  Safari,IE8及以上本版浏览器都兼容。

    其实对于那些死抱着IE6,IE7 不放的用户，咱也没必要给他们供提这样的用户体验。

     

    案方二：应用jQuery.History.js

    对于要兼容IE6、IE7的情况，笔者始终应用jquery.history.js 这个件插（https://github.com/tkyk/jquery-history-plugin）。

    这个件插它会去判断浏览器否是支撑onhashchange事件，如果不支撑，就准时(每一个100毫秒)环循判断hash有没有化变，从而执行应相理处。

    如：

    

<script src="/Scripts/jquery.history.js" type="text/javascript"></script>
<script type="text/javascript">
    $( function () {
        $.history.init( function (hash) {
             var page = getHash("page");
             if (page == 1) {
                $("#mainPanel").load("/home/page1");
            }
             if (page == 2) {
                $("#mainPanel").load("/home/page2");
            }
             if (page == 3) {
                $("#mainPanel").load("/home/page3");
            }
        });
    });
</script>

    另外，这个件插经已不再续继新更护维了。

     

    案方三：jquery.ba-hashchange.js

    jquery.ba-hashchange.js(http://benalman.com/projects/jquery-hashchange-plugin/)

    这个件插的实现道理和jquery.history.js 完整一样。环循距离为50毫秒。

    它overwrite 了window.hashchange事件，使其够能兼容全体浏览器。

    应用如下：

    

<script src="/Scripts/jquery.ba-hashchange.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).hashchange( function () {
         var page = getHash("page");
         if (page == 1) {
            $("#mainPanel").load("/home/page1");
        }
         if (page == 2) {
            $("#mainPanel").load("/home/page2");
        }
         if (page == 3) {
            $("#mainPanel").load("/home/page3");
        }
    });
    $(window).hashchange();
</script>

    

 

    原文地址:

    http://www.cnblogs.com/xumingxiang/archive/2012/11/25/2787530.html

    

作者 : 祥叔
出处： http://www.cnblogs.com/xumingxiang 
版权：本文版权归作者和博客园共有
转载：欢送转载，为了存保作者的创作情热，请按要求【转载】，谢谢
要求：未经作者赞成，必须留保此段声明；必须在文章中给出原文连接；否则必究法律责任 

 

文章结束给大家分享下程序员的一些笑话语录： 问路
有一个驾驶热气球的人发现他迷路了。他降低了飞行的高度，并认出了地面 上的一个人。他继续下降高度并对着那个人大叫，“打扰一下，你能告诉我我 在哪吗？”
下面那个人说：“是的。你在热气球里啊，盘旋在 30 英尺的空中”。
热气球上的人说：“你一定是在 IT 部门做技术工作”。
“没错”，地面上的人说到，“你是怎么知道的？”
“呵呵”，热气球上的人说，“你告诉我的每件事在技术上都是对的，但对都没 有用”。
地面上的人说，“你一定是管理层的人”。
“没错”，热气球上的人说，“可是你是怎么知道的？”
“呵呵”，地面上的那人说到，“你不知道你在哪里，你也不知道你要去哪，你 总希望我能帮你。你现在和我们刚见面时还在原来那个地方，但现在却是我 错了”。