AJAX programs, the implementation of their own page forward, back, and tag function (asp.net2.0)

Ajax|asp.net| Program | page

The first time to write a blog, and venture to publish technical articles, please do not laugh, there are written failures or similarities where please throw bricks knock me!
Ajax just get started soon, then wrote a ajax+c# message this program, in the actual writing program, gradually found the AJAX program many immature places, which is more typical of the page forward, back and label problems, because the entire AJAX program is the use of no refresh and server interaction, Therefore, most of the browser's forward back function button failed, of course, the label function also lost meaning, if the use of Ajax to develop a forum, in the mountains of posts must have a classic, but we close the browser, we have to start looking again, this is too painful, So in order to make up for this shortcoming, everyone is surprisingly recruit, now I describe to you, in my program, how to achieve these functions.

I wrote the main program code to implement the function in the Imitatehistory.js file.

Imitatehistory.js
1//define a global array
2 var hashlist = new Array ();
3//Define a global variable to be used as the hash number
4 var hashno = 0;
5//Initialize the array to add the hash of the first loaded page into the array
6 hashlist[0] = Window.location.hash.replace (' # ', ');
7//Add the hash to the array
8 function Addhash (Newhash)
9 {
10//This judgment is to detect whether after clicking the Back button, then click on the new link
One if (hashno!= (hashlist.length-1))
12 {
13//Delete this page to identify the following array entries
Hashlist.splice (hashno+1, hashlist.length-(hashno+1));
15}
Hashlist[hashlist.length] = Newhash;
17//point to the hash on this page number
Hashno = hashlist.length-1;
19///Assign hash value to browser
Makehistory (Newhash);
21//According to the browser's hash, loading data
Urlcode ();
Checklinkbutton ();
24}
25///Assign hash value to browser
-Function makehistory (Newhash)
27 {
Window.location.hash = Newhash;
29}
30//Detect navigation button status (button is available)
function Checklinkbutton ()
32 {
if (hashlist.length>1)
34 {
if (hashno>0)
36 {
Panax Notoginseng document.getElementById (' Back '). disabled= ';
38}
Or else
40 {
document.getElementById (' Back '). disabled= ' disabled ';
42}
if (hashno< (hashlist.length-1))
44 {
document.getElementById (' Next '). disabled= ';
46}
Or else
48 {
document.getElementById (' Next '). disabled= ' disabled ';
50}
51}
52}
53//Back button onclick event
The function Linkback ()
55 {
Hashno = hashNO-1;
Makehistory (Hashlist[hashno]);
58//According to the browser's hash, loading data
Urlcode ();
Checklinkbutton ();
61}
62//Forward button onclick event
Linknext function ()
64 {
Hashno = Hashno + 1;
Makehistory (Hashlist[hashno]);
67//According to the browser's hash, loading data
Urlcode ();
Checklinkbutton ();
70}
71//According to the browser's hash, loading data
Urlcode function ()
73 {
The var temphash = Window.location.hash;
75//Below "Home", "msglist" just make a logo, you can define their own
76//According to the browser's hash, loading data
Switch (Temphash)
78 {
Case "":
-Alert (' Call your home ');
Bayi break;
The case "Home":
Page alert (' Call your homepage ');
The break;
85}
86//If it is the page number label of the message book
(Temphash.substr (1,7) = = "Msglist")
88 {
the Var page;
90//Get current page number
page = Window.location.hash.substr (8,window.location.hash.length);
(' Call your message list based on page number ');
93}
94//Of course, if the forum is the post tag, I think it is only to temphash this string more play a few tricks, specifically I will not introduce.
95}

The above is used to the JS array of storage functions, using Window.location.hash this method to manipulate the browser's debris identity.
Here is a test of the HTML file, to describe the specific use of the method.
FileName 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 3 4 <meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>
5 <title> Test </title>
6 <script language= "JavaScript" src= "Imitatehistory.js" type= "Text/javascript" ></script>
7 <script language= "JavaScript" type= "Text/javascript" >
8 <!--
9//page after loading, initialize your AJAX program with the hash of the browser.
Ten function Window.onload ()
11 {
Urlcode ();
13}
14//I use the following method to simulate Ajax callback different modules.
function Imitateajax (mode)
16 {
Switch (mode)
18 {
Case "Home":
document.getElementById (' Divajax '). Innerhtml= "You are now calling the homepage module";
break;
Case "News":
document.getElementById (' Divajax '). Innerhtml= "You are now calling the News module";
break;
Case "Photo":
document.getElementById (' Divajax '). Innerhtml= "You are now calling the picture module";
break;
Case "Music":
document.getElementById (' Divajax '). Innerhtml= "The music you call now is the module";
break;
Case "MsgList1":
document.getElementById (' Divajax '). Innerhtml= "You are now calling the 1th page of the message list <br/><br/><span> prev
33
</span> <span style= ' Cursor:hand ' Onclick=addhash (' MsgList2 ') > Next </span> ";
break;
Case "MsgList2":
document.getElementById (' Divajax '). Innerhtml= "You are now calling the 2nd page of the message list <br/><br/><span
38
Style= ' Cursor:hand ' Onclick=addhash (' MsgList1 ') > prev </span> <span style= ' Cursor:hand; '
40
Onclick=addhash (' MsgList3 ') > Next </span> ";
The break;
Case "MSGLIST3":
document.getElementById (' Divajax '). Innerhtml= "You are now calling the 3rd page of the message list <br/><br/><span
45
Style= ' Cursor:hand ' Onclick=addhash (' MsgList2 ') > Prev </span> <span> next page </span> ";
The break;
48}
49}
M-->
Wuyi </script>
<body>
<input id= "Back" type= "button" disabled= "Disabled" value= "←"/>
<input id= "Next" type= "button" disabled= "disabled" value= "→"/>
<br/>
<br/>
/> &LT;BR
<input type= "button" value= "Home"/>
<input type= "button" value= "News"/>
<input type= "button" value= "Picture"/>
<input type= "button" value= "Music"/>
<input type= "button" value= "message"/>
/> &LT;BR
<br/>
<div id= ' divajax ' style= ' background-color: #CCCCCC; height:100px; " ></div>
</body>

The article is written here, the younger brother I am a rookie, hope you Big Brother advice, if there is no understanding of the place please let me leave a message!
Http://www.cnblogs.com/aiqingayu/archive/2006/10/24/538653.html