After I had done the basic pseudo dynamic, I immediately applied it to the website, but then I found a problem: how do I Manage news listings? If I want to add the news every time to modify the source file and then upload I am not willing to, not only trouble and error prone, lazy people how can do so. The brain, then thought of the use of XML, this has long existed, but in recent years the technology has become popular.
In HTML, you can use the data island to use XML data, and one way to do that is to add a sentence in HTML:
<xml id= "Data" >
<!--here FOR XML data-->
</xml>
This allows you to use XML-supplied data in HTML. However, this still seems to be troublesome, or to upload the entire file, then use a convenient point ~ ~
<xml id= "Data" src= "Data.xml"/>
After this process, I can just modify an XML file and upload it to the server.
The next step is to fix the processing of the XML data on the client ~ ~
First of all, I have to design a news data structure. This is simple, after all, in the list only need to use the news title and time, but for the link, need to add an ID, the result is as follows:
<newslist>
<news>
<id>1</id>
<title> First News </title>
<date>2005-11-16</date>
</news>
</newslist>
Data structure done, go on!
In the client for data processing of course preferred JavaScript, then this article is also used JavaScript to implement pseudo dynamic.
In JS, access to the data island can use a recordset:
var Rs=data.recordset;
This recordset is used in a similar way to the ASP, which makes it convenient for me:, you can easily realize the list of news and links ~ In the display of news, but also need to display the title of the previous news and the title of the next news, and display a news list, there is no need to display the previous one and the next piece of news. So I put two layers to display the news and the previous and the next news information, and set whether to display when needed. Where Newsmain is used to display news or news listings, newspage to display information about the previous and next news. Then the corresponding ID of the news stored as a Web page file, in the display using an IFRAME embedding.
First write a function to get the news ID from the URL, this in the previous article has been said, take to use ~ ~
function GetID () {
var str,len,pos,id,fn; Define some variables
Str=top.window.location.href; Get the address of the course file
Len=str.length; Get address length
Pos=str.indexof ("? id=", 0); Get start address for "? id="
To determine whether there is a "id="
if (pos>0) {
Id=str.substring (Pos+4,len); Get ID
return eval (ID); Returns the ID of a numeric type to facilitate processing
}
else {
return 0; Error parameter, return 0, display news list
}
}
Let's do another function. What do you do when you enter a page, display a news list or display the corresponding ID news
function Showmain () {
var id;
Id=getid (); Get news ID
is 0 displays the list
if (id>0) {
Rs.absoluteposition=id; Sets the cursor to the specified news
Shownews (ID); Show News
}
else {
Showlist (); Show News Listings
}
}
Functions to display news listings
function Showlist () {
var ss= ""; Html
var i; Loop counter
Rs.movefirst (); Move to first record
Looping through News Records
for (i=0;i<rs.recordcount;i++) {
ss=ss+ "<font color= #800000 > </font><a href= ' javascript:shownews (" +rs ("id") + ") ' > ' +rs (" title ") +" </a> ("+rs" ("date") + ") <br/>"; Add a News
Rs.movenext (); Move to the next piece of news
}
Document.all.newsmain.innerhtml=ss; Output news in the news display area
Document.all.newspage.style.visibility= "hidden"; Do not display the news before and after the news list is displayed
}
Displays the specified news and displays information about the news before and after
function Shownews (ID) {
var PS; Information for storing before and after news
Document.all.newsmain.innerhtml= "<iframe class= ' news_main ' frameborder= ' 0 ' src= ' news/'" +id+ ". htm '/> '; Use IFRAME to display news
document.all.newspage.style.visibility= "visible"; Make the front and back news information visible
Rs.absoluteposition=id; Move a record cursor to the current news
If the ID is less than 1 it is the first record, the last news is "no":)
if (id<=1) {
Ps= "On an article: no";
}
Otherwise, show the title of the last news story.
else {
Rs.moveprevious (); Record cursor moves forward
ps= "<a href= ' javascript:shownews (" + (id-1) + ") ' > Previous:" +rs ("title") + "</a>"; Show previous news information
Rs.movenext (); Recover record Cursors
}
Ps=ps+ ""; Insert a space between 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: No";
}
Otherwise show the title of the next news story
else {
Rs.movenext (); Record cursor moves forward
ps=ps+ "<a href= ' javascript:shownews (" + (id+1) + ") ' > Next:" +rs ("title") + "</a>"; Show the title of the next news story
Rs.moveprevious (); Recover record Cursors
}
Document.all.newspage.innerhtml=ps; Show front and back news headlines ~
}
Well, in the end is basically completed ~ use can be so:
Add an XML data island to the head area
Then execute showmain in the body's OnLoad event ()
<body onload= "Showmain ()" >
You also need to add two layers to the body to display information.
<div id= "NewsPage" ></div>
<div id= "Newsmain" ></div>
Completed!
However, there are also imperfections in the methods I use, such as the fact that the IDs of news lists must be in order and that there should be no gaps, because absolute positioning is used when using recordsets, and so on. I write a bad article, so: Welcome to criticize ^-^! Also welcome everyone I exchange experience and so on, my mail is vipxjw@tom.com.
