欢迎光临爱时尚女性网
 

Ajax实现页面前进、后退、与标签功能

2013-1-29 编辑:admin 来源:爱时尚女性网 阅读次数:403
  导读:第一次写博客,并且斗胆发表技术类文章,请大家不要见笑,有写的失败或雷同的地方请大家扔砖头敲我吧! 燗jax刚入门不久,便写了一个Ajax+C#的留言本程序,在实际写程序中,渐渐发现了Ajax程序许多不成熟的地方,其中比较典型的就是页面的前进、后退与标签问题,因为Ajax整个...
第一次写博客,并且斗胆发表技术类文章,请大家不要见笑,有写的失败或雷同的地方请大家扔砖头敲我吧!
燗jax刚入门不久,便写了一个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


文章就写到这里了,小弟我是菜鸟,望各位大哥多多指教,如果有看不明白的地方就请大家给我留言吧!

文章出自:爱时尚女性网www.aspjc.com,尊重版权是美德,转载请保留原地址,感谢合作!

 
 
链接交换请联系:QQ:790646582 首页链接要求百度快照在一周以内,不符合以上要求的各站,我们将定期把友情连接转入内页,谢谢合作。
Copyright @ 2012-2015 爱时尚女性网 保留所有权利吉ICP备14005127号-1 服务QQ:175529508 e-mail:zk8312@163.com
本站部分资源来自网友上传,如果无意之中侵犯了您的版权,请联系本站,本站将在3个工作日内删除。