〖第一次写博客,并且斗胆发表技术类文章,请...... 第一次写博客,并且斗胆发表技术类文章,请大家不要见笑,有写的失败或雷同的地方请大家扔砖头敲我吧! Ajax刚入门不久,便写了一个Ajax+C#的留言本程序,在实际写程序中,渐渐发现了Ajax程序许多不成熟的地方,其中比较典型的就是页面的前进、后退与标签问题,因为Ajax整个程序是采用无刷新与服务器进行交互,所以导致了大部分浏览器的前进后退的功能按钮失效,当然标签功能也失去了意义,如果用Ajax开发一个论坛的话,在堆积如山的帖子中必然有经典,但是我们在关闭浏览器后,就得重新从头开始寻找,这样实在是太痛苦了,所以为了弥补这个缺点,大家各出奇招,现在我向大家描述一下,在我的程序中,怎样实现这些功能。 我把实现功能的主要程序代码写在imitateHistory.js这个文件中 imitateHistory.js 1 //定义一个全局数组 2 var hashList = new Array(); 3 //定义一个全局变量,用来作为hash的编号 4 var hashNO = 0; 5 //初始化数组,将初次装载的页面的hash添加进数组 6 hashList[0] = window.location.hash.replace('#',''); 7 //将Hash填加到数组 8 function addHash(newHash) 9 { 10 //这个判断是检测是否在点击后退按钮后,再点击了新的链接 11 if(hashNO!=(hashList.length - 1)) 12 { 13 //删除此页标识以后的数组项 14 hashList.splice(hashNO+1,(hashList.length-(hashNO+1))); 15 } 16 hashList[hashList.length] = newHash; 17 //指向本页hash的编号 18 hashNO = hashList.length - 1; 19 //将Hash赋值给浏览器 20 makeHistory(newHash); 21 //根据浏览器的hash,加载数据 22 urlCode(); 23 checkLinkButton(); 24 } 25 //将Hash赋值给浏览器 26 function makeHistory(newHash) 27 { 28 window.location.hash = newHash; 29 } 30 //检测导航按钮状态(按钮是否可用) 31 function checkLinkButton() 32 { 33 if(hashList.length>1) 34 { 35 if(hashNO>0) 36 { 37 document.getElementById('Back').disabled=''; 38 } 39 else 40 { 41 document.getElementById('Back').disabled='disabled'; 42 } 43 if(hashNO<(hashList.length-1)) 44 { 45 document.getElementById('Next').disabled=''; 46 } 47 else 48 { 49 document.getElementById('Next').disabled='disabled'; 50 } 51 } 52 } 53 //后退按钮onclick事件 54 function linkBack() 55 { 56 hashNO = hashNO - 1; 57 makeHistory(hashList[hashNO]); 58 //根据浏览器的hash,加载数据 59 urlCode(); 60 checkLinkButton(); 61 } 62 //前进按钮onclick事件 63 function linkNext() 64 { 65 hashNO = hashNO + 1; 66 makeHistory(hashList[hashNO]); 67 //根据浏览器的hash,加载数据 68 urlCode(); 69 checkLinkButton(); 70 } 71 //根据浏览器的hash,加载数据 72 function urlCode() 73 { 74 var TempHash = window.location.hash; 75 //下面的"home"、"msgList"只是做个标识,可以自己定义 76 //根据浏览器的hash,加载数据 77 switch(TempHash) 78 { 79 case"": 80 alert('调用你的首页'); 81 break; 82 case"home": 83 alert('调用你的首页'); 84 break; 85 } 86 //如果是留言本的页码标签 87 if (TempHash.substr(1,7)=="msgList") 88 { 89 var page; 90 //取得当前页码 91 page = window.location.hash.substr(8,window.location.hash.length); 92 alert('根据页码调用你的留言列表'); 93 } 94 //当然如果是论坛的帖子标签,我想也只是对TempHash这个字符串多玩几个花样而已,具体我就不介绍了。 95 } 以上主要是用到JS数组的存储功能,用window.location.hash这个方法来操作浏览器的碎片标识。 下面是一个测试用的HTML文件,向大家描述一下具体的使用方法。 文件名test.html test.html 1 2 3 4 5 6 7 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 文章就写到这里了,小弟我是菜鸟,望各位大哥多多指教,如果有看不明白的地方就请大家给我留言吧! |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-29 19:17 , Processed in 0.246856 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.