ajax程式中,自己實現頁面前進、后退、和標簽功能(asp.net2.0) _ajax教程

2024-09-01 08:34:07

字體：大中小

來源：轉載

供稿：網友

第一次寫博客,并且斗膽發表技術類文章，請大家不要見笑，有寫的失敗或雷同的地方請大家扔磚頭敲我吧！
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 }