您的位置：首页 > 编程语言 > ASP

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

2007-02-12 15:31 791 查看
第一次写博客,并且斗胆发表技术类文章，请大家不要见笑，有写的失败或雷同的地方请大家扔砖头敲我吧！
Ajax刚入门不久，便写了一个Ajax+C#的留言本程序，在实际写程序中，渐渐发现了Ajax程序许多不成熟的地方，其中比较典型的就是页面的前进、后退与标签问题，因为Ajax整个程序是采用无刷新与服务器进行交互，所以导致了大部分浏览器的前进后退的功能按钮失效，当然标签功能也失去了意义，如果用Ajax开发一个论坛的话，在堆积如山的帖子中必然有经典，但是我们在关闭浏览器后，就得重新从头开始寻找，这样实在是太痛苦了，所以为了弥补这个缺点，大家各出奇招，现在我向大家描述一下，在我的程序中，怎样实现这些功能。
我把实现功能的主要程序代码写在imitateHistory.js这个文件中

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 <!--
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>    <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>    <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>    <span>下一页</span>";
47 break;
48 }
49 }
50 -->
51 </script>
52 </head>
53 <body>
54 <input id="Back" onclick="linkBack();" type="button" disabled="disabled" value="←" />  
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="首页" />  
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 <br />
65 <br />
66 <div id='divAjax' style="background-color:#CCCCCC; height:100px;"></div>
67 </body>
68 </html>
文章就写到这里了，小弟我是菜鸟，望各位大哥多多指教，如果有看不明白的地方就请大家给我留言吧！
这是源码下载 imitateHistory.rar
转自：http://www.cnblogs.com/aiqingayu/archive/2006/10/24/538653.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航