ajax程式中,自己实现页面前进、后退、和标签功能(asp.net2.0) _ajax教程

2018-10-16 21:20:40

字体：大中小

来源：转载

供稿：网友

第一次写博客,并且斗胆发表技术类文章，请大家不要见笑，有写的失败或雷同的地方请大家扔砖头敲我吧！
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 }