Static dynamic continuation: XML_javascript skills

The static dynamic continuation point is XML. After basic pseudo-dynamics are completed, I immediately applied it to the website. But then I found a problem: how can I manage the news list? If I had to modify the source file and upload it again when I had to add news, it would not be too troublesome and error-prone. How can the lazy do this. As a result, I thought of using XML, a technology that already exists, but has become popular in recent years.

In HTML, you can use data islands to use XML data. One way to use XML data is to add a sentence in HTML:

In this way, you can use the data provided by XML in HTML. However, this still seems troublesome. If you want to upload the entire file, you can use it easily ~~

Then, I can modify only one XML file and upload it to the server.

The next step is to process XML data on the client ~~

First, I have to design a news data structure. This is simple. After all, you only need to use the title and time of the news in the list, but you need to add an ID to the link. The result is as follows:

1

First News

2005-

The data structure is complete. Continue!

JavaScript is of course the preferred choice for processing data on the client. In this article, JavaScript is also used for pseudo-dynamic processing.

In JS, you can use the record set for access to data island:

Var rs = data. recordset;

The usage of this record set is similar to that in ASP, which is convenient for me :). You can easily implement the news list and links ~ When displaying news, you also need to display the title of the previous News and the title of the next news. When displaying the news list, you do not need to display the previous news or the next news. So I put two layers to display the news and the information of the previous and next news respectively, and set whether to display the news as needed. Newsmain is used to display news or news lists, and newspage is used to display information of the previous and next news. Then, save the news of the corresponding ID as a webpage file and use iframe to embed it when displaying it.

First, write a function to obtain the news ID from the website. This is already described in the previous article ~~

Function getid (){

Var str, len, pos, id, fn; // defines some variables.

Str = top. window. location. href; // obtain the file address of course.

Len = str. length; // obtain the address length.

Pos = str. indexOf ("? Id = ", 0); // get "? Start address of id ="

// Determine whether "? Id ="

If (pos> 0 ){

Id = str. substring (pos + 4, len); // obtain the ID

Return eval (id); // return the ID of the numeric type for easy processing

}

Else {

Return 0; // error parameter. 0 is returned, indicating that the news list is displayed.

}

}

Another function is used to display the news list or the news with the corresponding ID.

Function showmain (){

Var id;

Id = getid (); // obtain the news ID

// If the value is 0, the list is displayed.

If (id> 0 ){

Rs. absoluteposition = id; // set the cursor to the specified news

Shownews (id); // display news

}

Else {

Showlist (); // display the news list

}

}

Function for displaying the news list

Function showlist (){

Var ss = ""; // HTML

Var I; // cyclic counter

Rs. movefirst (); // move to the first record

// Read the news record cyclically

For (I = 0; I

Ss = ss + "·" + rs ("title") + "(" + rs ("date") + ")
"; // Add a news item

Rs. movenext (); // move to the next news

}

Document. all. newsmain. innerHTML = ss; // output news in the News display area

Document. all. newspage. style. visibility = "hidden"; // when the news list is displayed, the news information before and after is not displayed.

}

Displays the specified News and the information of the news.

Function shownews (id ){

Var ps; // used to store news information before and after

Document. all. newsmain. innerHTML =""; // Use iframe to display news

Document. all. newspage. style. visibility = "visible"; // make the news information visible

Rs. absoluteposition = id; // move the record cursor to the current news

// If the ID is smaller than 1, it indicates the first record, and the previous news is "no ":)

If (id <= 1 ){

Ps = "Previous Article: No ";

}

// Otherwise, the title of the previous news is displayed.

Else {

Rs. moveprevious (); // records the cursor moving forward

Ps = "previous article:" + rs ("title") + ""; // display previous news

Rs. movenext (); // restore record cursor

}

Ps = ps + ""; // insert a space between the two messages

// If the ID is greater than the total number of records, this is the last news ~

If (id> = rs. recordcount ){

Ps = ps + "next article: No ";

}

// Otherwise, the title of the next news is displayed.

Else {

Rs. movenext (); // records the cursor moving forward

Ps = ps + "next article:" + rs ("title") + ""; // display the title of the next news

Rs. moveprevious (); // restore record cursor

}

Document. all. newspage. innerHTML = ps; // displays the front and back news titles ~

}

Okay, it's almost finished ~ The specific usage can be as follows:

Add XML data island to the head area

Then execute showmain () in the onload event of the body ()

You also need to add two layers to the body to display information.

Finished!

However, the methods I used are also incomplete. For example, the ID of the News list must be ordered and there must be no missing information, because absolute positioning is used in the record set, there are other issues. I wrote a bad article, so I am welcome to criticize it. ^-^! I also welcome you to exchange experience, my mail is vipxjw@tom.com.