第一次寫部落格,並且鬥膽發表技術類文章，請大家不要見笑，有寫的失敗或雷同的地方請大家扔磚頭敲我吧！
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 }
以上主要是用到JS數組的儲存功能，用window.location.hash這個方法來操作瀏覽器的片段標識。
下面是一個測試用的HTML檔案，向大家描述一下具體的使用方法。
檔案名稱test.html
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="你現在調用的是新聞模組";
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
