Ajax programs to implement the page forward, back, and tag function

Source: Internet
Author: User
Tags hash implement

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";

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.