开发学院 WEB开发 Ajax Ajax程序中,自己实现页面前进、后退、与标签功能(... 阅读

Ajax程序中,自己实现页面前进、后退、与标签功能(asp.net2.0)

　2006-10-25 11:15:21　来源：WEB开发网　　　

核心提示： 第一次写博客,并且斗胆发表技术类文章，请大家不要见笑，Ajax程序中,自己实现页面前进、后退、与标签功能(asp.net2.0)，有写的失败或雷同的地方请大家扔砖头敲我吧！ Ajax刚入门不久，便写了一个Ajax+C#的留言本程序，15 function imitateAjax(mode)16 {17 switch(

　第一次写博客,并且斗胆发表技术类文章，请大家不要见笑，有写的失败或雷同的地方请大家扔砖头敲我吧！
　　　 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4　　 <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
5　　 <title>测试</title>
6　　 <script language="javascript" src="imitateHistory.js" type="text/Javascript"></script>
7　　 <script language="javascript" type="text/javascript">
8　　 
51　　 </script>
52 </head>
53 <body>
54　　 <input id="Back" type="button" disabled="disabled" value="←" />　
55　　 <input id="Next" type="button" disabled="disabled" value="→" />
56　　 <br />
57　　 <br />
58　　 <br />
59　　 <input type="button" value="首页" />　
60　　 <input type="button" value="新闻" />　
61　　 <input type="button" value="图片" />　
62　　 <input type="button" value="音乐" />　
63　　 <input type="button" value="留言" />
64　　 <br />
65　　 <br />
66　　 <div id='divAjax' style="background-color:#CCCCCC; height:100px;"></div>
67 </body>
68 </html>