ajax程式中,自己實(shí)現(xiàn)頁面前進(jìn)、后退、和標(biāo)簽功能(asp.net2.0) _ajax教程

2024-09-01 08:34:07

字體：大中小

供稿：網(wǎng)友

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

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

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