zoukankan      html  css  js  c++  java
  • location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能

     在js跨域双向数据传递时可以用iframe加上location.hash来实现,在研究这个的时候深入学习了一下hash的特性。

      hash就是uri中#及后面的部分,例如:www.google.com.hk#123的#123。当只有hash部分发生变化时,浏览器的历史记录会产生记录,但不会向服务器发出请求,这时按后退键地址栏的uri会变化但页面内容不变。

      而hash变化但不发出请求就是js跨域双向数据传递的基础啦。

      下面就讲述一下hash结合ajax的使用,ajax每次取数据时页面更新后浏览器并不产生历史记录,也就是说后退和前进按钮失去应用的效用,这时可以结合hash和window.onhashchange来使用,注意ie6、7均不支持onhashchange,但可以用setInterval定期检查hash的改变,或者onload中检查的方法。

      具体实现:

     1 <body>
    2
    3 <div id="div1"></div>
    4 <input type="button" value="click" onclick="GetT()" />
    5
    6 </body>
    7 </html>
    8 <script type="text/javascript" src="js/AjaxHasPool.js">
    9 </script>
    10 <script type="text/javascript">
    11 var ajax = new AjaxHasPool();
    12 var method="get";
    13 var url ="Handler.ashx";
    14 var i = 1;
    15 var obj = new Object();
    16 function GetT()
    17 {
    18 document.getElementById("div1").innerHTML=i;
    19 ajax.Startup(null,url,method,ep);
    20 }
    21 function ep(xmlobj){
    22 eval("obj['"+i+"']="+i+";");
    23 location.hash="#"+i;
    24 ++i;
    25 }
    26
    27 window.onhashchange=function(){
    28 var hashStr = location.hash.replace("#","");
    29 if(typeof(eval("obj['"+hashStr+"']"))!="undefined")
    30 document.getElementById("div1").innerHTML=eval("obj['"+hashStr+"']");
    31 }
    32 </script>
    1.AjaxHasPool是自己封装的ajax类,其中的ajax.Startup()就是发送ajax请求;
    2.Object对象保存历史记录,如果对象属性为数字的话,要用obj["1"]的方式来实例化,否者会违反命名规范。
    3.在使用window.onhashchange检测hash值获取历史数据。

    欢迎添加我的公众号一起深入探讨技术手艺人的那些事!

    如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!
      

  • 相关阅读:
    JAVA内存溢出解析(转)
    检查SQL Server 2005的索引密度和碎片信息(转)
    GWT 学习总结
    支付宝techday分享成长、团队、信任
    一位年轻董事长给年轻人的30条忠告
    Oracle 培训材料
    利用JProfiler对应用服务器内存泄漏问题诊断一例(转)
    oracle 笔记
    JProfiler 使用说明
    最疼你的人是谁
  • 原文地址:https://www.cnblogs.com/fsjohnhuang/p/2280436.html
Copyright © 2011-2022 走看看