专栏首页偏前端工程师的驿站location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能

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值获取历史数据。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Design Pattern: Not Just Mixin Pattern

    Brief                                 从Mix-In模式到Mixin模式,中文常用翻译为“混入/织入模式”。单纯从名字上看...

    ^_^肥仔John
  • Java魔法堂:以Windows服务的形式运行Java程序

    一、前言                               由于防止维护人员误操作关闭Java控制台程序,因此决定将其改造为以Windows服务的形式...

    ^_^肥仔John
  • JS读书心得:《JavaScript框架设计》——第12章 异步处理

    一、何为异步                                 执行任务的过程可以被分为发起和执行两个部分。 同步执行模式:任务发起后必须等待直...

    ^_^肥仔John
  • Python文档精要研读系列:hash函数

    hash(object) Return the hash value of the object (if it has one). Hash values ar...

    Python中文社区
  • 数据中心网络中的hash问题研究

    "鹅厂网事"由深圳市腾讯计算机系统有限公司技术工程事业群网络平台部运营,我们希望与业界各位志同道合的伙伴交流切磋最新的网络、服务器行业动态信息,同时分享腾讯在网...

    鹅厂网事
  • 某移动端防作弊产品技术原理浅析与个人方案构想

    工具环境: android4.4.4、IDA Pro 7.0、jeb3、sklearn机器学习库

    我是小三
  • 大数据投融资周报(5月14日-5月20日:共10起)

    <数据猿导读> 本周,大数据领域共发生10起投融资事件,涉及领域包括医疗、摄影、科技,保险欺诈等多个领域,融资金额百万元到数亿元不等。以下为您奉上本周投融资事件...

    数据猿
  • 投融资汇总 | 本周(3.11-3.17),百度投资10.1亿元成酷开第二大股东

    镁客网
  • 我只是看起来很努力吗?

    筑梦师winston
  • 【融资愈艰】初创公司必须考虑的三件事,1万多轮融资数据分析

    【新智元导读】对于大多数科技初创公司来说,募集外部资金是在构建一个成功企业的关键一步。假设一家公司能够募集到外部资金,那么外部资金的数额是否会影响到这家公司的未...

    新智元

扫码关注云+社区

领取腾讯云代金券