Ajax程序中,自己實(shí)現(xiàn)頁(yè)面前進(jìn)、后退、與標(biāo)簽功能(asp.net2.0)

2019-11-18 16:54:47

字體：大中小

供稿：網(wǎng)友

第一次寫(xiě)博客,并且斗膽發(fā)表技術(shù)類(lèi)文章，請(qǐng)大家不要見(jiàn)笑，有寫(xiě)的失敗或雷同的地方請(qǐng)大家扔磚頭敲我吧！
Ajax剛?cè)腴T(mén)不久，便寫(xiě)了一個(gè)Ajax+C#的留言本程序，在實(shí)際寫(xiě)程序中，漸漸發(fā)現(xiàn)了Ajax程序許多不成熟的地方，其中比較典型的就是頁(yè)面的前進(jìn)、后退與標(biāo)簽問(wèn)題，因?yàn)锳jax整個(gè)程序是采用無(wú)刷新與服務(wù)器進(jìn)行交互，所以導(dǎo)致了大部分瀏覽器的前進(jìn)后退的功能按鈕失效，當(dāng)然標(biāo)簽功能也失去了意義，如果用Ajax開(kāi)發(fā)一個(gè)論壇的話，在堆積如山的帖子中必然有經(jīng)典，但是我們?cè)陉P(guān)閉瀏覽器后，就得重新從頭開(kāi)始尋找，這樣實(shí)在是太痛苦了，所以為了彌補(bǔ)這個(gè)缺點(diǎn)，大家各出奇招，現(xiàn)在我向大家描述一下，在我的程序中，怎樣實(shí)現(xiàn)這些功能。

我把實(shí)現(xiàn)功能的主要程序代碼寫(xiě)在imitateHistory.js這個(gè)文件中

imitateHistory.js
1 //定義一個(gè)全局?jǐn)?shù)組
2 var hashList = new Array();
3 //定義一個(gè)全局變量，用來(lái)作為hash的編號(hào)
4 var hashNO = 0;
5 //初始化數(shù)組，將初次裝載的頁(yè)面的hash添加進(jìn)數(shù)組
6 hashList[0] = window.location.hash.replace('#','');
7 //將Hash填加到數(shù)組
8 function addHash(newHash)
9 {
10     //這個(gè)判斷是檢測(cè)是否在點(diǎn)擊后退按鈕后，再點(diǎn)擊了新的鏈接
11     if(hashNO!=(hashList.length - 1))
12     {
13         //刪除此頁(yè)標(biāo)識(shí)以后的數(shù)組項(xiàng)
14     hashList.splice(hashNO+1,(hashList.length-(hashNO+1)));
15     }
16     hashList[hashList.length] = newHash;
17     //指向本頁(yè)hash的編號(hào)
18     hashNO = hashList.length - 1;
19     //將Hash賦值給瀏覽器
20     makeHistory(newHash);
21     //根據(jù)瀏覽器的hash，加載數(shù)據(jù)
22     urlCode();
23     checkLinkButton();
24 }
25 //將Hash賦值給瀏覽器
26 function makeHistory(newHash)
27 {
28     window.location.hash = newHash;
29 }
30 //檢測(cè)導(dǎo)航按鈕狀態(tài)（按鈕是否可用）
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     //根據(jù)瀏覽器的hash，加載數(shù)據(jù)
59     urlCode();
60     checkLinkButton();
61 }
62 //前進(jìn)按鈕onclick事件
63 function linkNext()
64 {
65     hashNO = hashNO + 1;
66     makeHistory(hashList[hashNO]);
67     //根據(jù)瀏覽器的hash，加載數(shù)據(jù)
68     urlCode();
69     checkLinkButton();
70 }
71 //根據(jù)瀏覽器的hash，加載數(shù)據(jù)
72 function urlCode()
73 {
74     var TempHash = window.location.hash;
75     //下面的"home"、"msgList"只是做個(gè)標(biāo)識(shí)，可以自己定義
76     //根據(jù)瀏覽器的hash，加載數(shù)據(jù)
77     switch(TempHash)
78     {
79     case"":
80         alert('調(diào)用你的首頁(yè)');
81         break;
82     case"home":
83         alert('調(diào)用你的首頁(yè)');
84         break;
85     }
86     //如果是留言本的頁(yè)碼標(biāo)簽
87     if (TempHash.substr(1,7)=="msgList")
88     {
89         var page;
90         //取得當(dāng)前頁(yè)碼
91         page = window.location.hash.substr(8,window.location.hash.length);
92         alert('根據(jù)頁(yè)碼調(diào)用你的留言列表');
93     }
94     //當(dāng)然如果是論壇的帖子標(biāo)簽，我想也只是對(duì)TempHash這個(gè)字符串多玩幾個(gè)花樣而已，具體我就不介紹了。
95 }

以上主要是用到JS數(shù)組的存儲(chǔ)功能，用window.location.hash這個(gè)方法來(lái)操作瀏覽器的碎片標(biāo)識(shí)。
下面是一個(gè)測(cè)試用的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>測(cè)試</title>
6     <scr ipt 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" 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="首頁(yè)" />  
60     <input onclick="addHash('news');" type="button" value="新聞" />  
61     <input onclick="addHash('photo');" type="button" value="圖片" />  
62     <input onclick="addHash('music');" type="button" value="音樂(lè)" />  
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>