Ajax实现页面前进、后退功能
在做这个BLOG的过程中无时无刻被这个问题困扰着。。。。
想来想去大应该大致上有三种方法吧：
1、每次客户端在进行同服务器的交互的时候都必须改变URL的值，这样子的话就会让IE记录下了页面的历史状态，从而可以利用IE的前进后退来实现在，这样子应该是用户最能接受的方式吧，因为大家也都习惯的用浏览器的前进、后退功能了。
2、在客户端每次进行一次功能的进候用一个数组的记录下页面的信息，然后页面中加入前进、后退按纽来对数组中的信息进行读取，从而实现前进、后退功能，但我感觉这应该是最不可取的一种方式了，试想一下儿当一个用户在客户端进行好多操作时候的，这个用来记录页面信息的数组将会变的很大，这样子迟早会吃掉客户端的内存的，存在相当大危险性！
3、记录客户端每次调用的JAVASCRIPT方法的名称以及参数信息，同样形成一个数组，页面中加入前进、后退按纽来对这个数组进去读取，每次的前进、后退的操作都会重新回发一次服务器，我感觉这种方法是我想实现在，但对于这个数组的建立方法我还在琢磨。
在网上查了查，好像有对第一种方式的类库支持，但个人不是太喜欢那种方式，因为好像在就是在客户端每次对于URL的重写也会引起状态栏上的进度处刷那么一下儿的，呵呵，可能您会说刷一下儿又不回发服务器没有关系的，但就是看着不爽。唉，问题还是没有解决，还得继续学习呀，呵呵，下班了，明天继续想！
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="http://edu.itbulo.com/200610/imitateHistory.js" type="text/JavaScript"></script>
7 <script language="JavaScript" type="text/JavaScript">
8 <!--
9 //页面装载完后,通过浏览器的Hash初始化你的Ajax程序。
10 function window.onload()
11 {
12 urlCode();
13 }
14 //我用下面这个方法来模拟AJAX回调不同的模块。
15 function imitateAjax(mode)
16 {
17 switch(mode)
18 {
19 case "home":
20 document.getElementById('divAjax').innerHTML="你现在调用的是首页模块";
21 break;
22 case "news":
23 document.getElementById('divAjax').innerHTML="你现在调用的是新闻模块";
24 break;
25 case "photo":
26 document.getElementById('divAjax').innerHTML="你现在调用的是图片模块";
27 break;
28 case "music":
29 document.getElementById('divAjax').innerHTML="你现在调用的音乐是模块";
30 break;
31 case "msgList1":
32 document.getElementById('divAjax').innerHTML="你现在调用的是留言列表的第 1 页35 break;
36 case "msgList2":
37 document.getElementById('divAjax').innerHTML="你现在调用的是留言列表的第 2 页38
39 style='cursor:hand;' onclick=addHash('msgList1')></span>";
42 break;
43 case "msgList3":
44 document.getElementById('divAjax').innerHTML="你现在调用的是留言列表的第 3 页45
46 style='cursor:hand;' onclick=addHash('msgList2')></span>";
47 break;
48 }
49 }
50 -->
51 </script>
52 </head>
53 54 <input id="Back" onclick="linkBack();" type="button" disabled="disabled" value="←" />
55 <input id="Next" onclick="linkNext();" type="button" disabled="disabled" value="→" />
56 57 58 59 <input onclick="addHash('home');" type="button" value="首页" />
60 <input onclick="addHash('news');" type="button" value="新闻" />
61 <input onclick="addHash('photo');" type="button" value="图片" />
62 <input onclick="addHash('music');" type="button" value="音乐" />
63 <input onclick="addHash('msgList1');" type="button" value="留言" />
64 65 66 <div id='divAjax' style="background-color:#CCCCCC; height:100px;"></div>
67 </body>
68 </HTML>
文章就写到这里了，小弟我是菜鸟，望各位大哥多多指教
下一篇:Web Services Upload
上一篇:关于Ajax的几个误区
开放文章词条: Ajax实现页面前进、后退功能
开放文章目录: ZPYJ > 中文作品研究 > 编程知识
|
-