请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

php163

php163 首页 技术专栏 ajax 查看内容

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

2011-11-27 19:11| 发布者: php163| 查看: 1373| 评论: 0

摘要: 第一次写博客,并且斗胆发表技术类文章,请大家不要见笑,有写的失败或雷同的地方请大家扔砖头敲我吧! Ajax刚入门不久,便写了一个Ajax+C#的留言本程序,在实际写程序中,渐渐发现了Ajax程序许多不成熟的地方,其中比较典型的就是页面的

       第一次写博客,并且斗胆发表技术类文章,请大家不要见笑,有写的失败或雷同的地方请大家扔砖头敲我吧!
       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" "">
 2 <html xmlns="" >
 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     <!--
 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 页<br /><br /><span>上一页
33
34 </span>&nbsp;&nbsp;&nbsp;&nbsp;<span style='cursor:hand;' onclick=addHash('msgList2')>下一页</span>";
35                 break;
36             case "msgList2":
37                 document.getElementById('divAjax').innerHTML="你现在调用的是留言列表的第 2 页<br /><br /><span
38
39 style='cursor:hand;' onclick=addHash('msgList1')>上一页</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style='cursor:hand;'
40
41 onclick=addHash('msgList3')>下一页</span>";
42                 break;
43             case "msgList3":
44                 document.getElementById('divAjax').innerHTML="你现在调用的是留言列表的第 3 页<br /><br /><span
45
46 style='cursor:hand;' onclick=addHash('msgList2')>上一页</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>下一页</span>";
47                 break;
48          }
49     }
50     -->
51     </script>
52 </head>
53 <body>
54     <input id="Back" onclick="linkBack();" type="button" disabled="disabled" value="←" />&nbsp;&nbsp;
55     <input id="Next" onclick="linkNext();" type="button" disabled="disabled" value="→" />
56     <br />
57     <br />
58     <br />
59     <input onclick="addHash('home');" type="button" value="首页" />&nbsp;&nbsp;
60     <input onclick="addHash('news');" type="button" value="新闻" />&nbsp;&nbsp;
61     <input onclick="addHash('photo');" type="button" value="图片" />&nbsp;&nbsp;
62     <input onclick="addHash('music');" type="button" value="音乐" />&nbsp;&nbsp;
63     <input onclick="addHash('msgList1');" type="button" value="留言" />
64     <br />
65     <br />
66     <div id='divAjax' style="background-color:#CCCCCC; height:100px;"></div>
67 </body>
68 </html>

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


鲜花

握手

雷人

路过

鸡蛋

收藏 分享

相关阅读

最新评论

QQ:24940422 2698114111 电话:0532-89993080|Archiver|手机版|php163开源技术分享社区   

GMT+8, 2018-5-24 17:46 , Processed in 0.021815 second(s), 14 queries .

Powered by Discuz!

PHP开源技术分享门户

回顶部