快捷導(dǎo)航

靜態(tài)的動(dòng)態(tài)續(xù)篇之來點(diǎn)XML

更新時(shí)間：2006年08月15日 00:00:00 作者：

在搞定了基本的偽動(dòng)態(tài)之后，我馬上把它應(yīng)用到了網(wǎng)站，但隨后就發(fā)現(xiàn)了一個(gè)問題：我如何來管理新聞列表呢？要是讓我在每次要加新聞時(shí)去修改源文件然后再上傳我可是千萬個(gè)不愿，不僅麻煩而且容易出錯(cuò)，懶人怎么能可以這么做。動(dòng)動(dòng)腦子，于是想到了用XML，這個(gè)早已存在，但近些年才流行起來的技術(shù)。

在HTML里，可以使用數(shù)據(jù)島來使用XML數(shù)據(jù)，一個(gè)使用方法就是在HTML里加入一句：

</xml>

這樣，就可以在HTML里使用XML提供的數(shù)據(jù)。不過，這樣還是顯得麻煩了，還是要上傳整個(gè)文件，那么用方便點(diǎn)的吧～～

這樣處理之后，我就可以只用修改一個(gè)XML文件然后上傳到服務(wù)器了。

接下來，就是搞定在客戶端對(duì)XML數(shù)據(jù)的處理了～～

首先，我得設(shè)計(jì)一個(gè)新聞的數(shù)據(jù)結(jié)構(gòu)。這個(gè)簡單，畢竟在列表時(shí)只需要用到新聞的標(biāo)題和時(shí)間，但為了鏈接，需要加上一個(gè)ID，結(jié)果如下：

<news>

</news>

</newslist>

數(shù)據(jù)結(jié)構(gòu)搞定了，繼續(xù)！

在客戶端對(duì)數(shù)據(jù)處理當(dāng)然首選JavaScript了，再么這篇文章講的也是用JavaScript來實(shí)現(xiàn)偽動(dòng)態(tài)。

在JS里，對(duì)數(shù)據(jù)島的訪問可以使用記錄集：

var rs=data.recordset;

這個(gè)記錄集的使用方法和ASP中類似，這下方便我了:)，可以很方便地實(shí)現(xiàn)新聞的列表及鏈接了～在顯示新聞，還需要顯示的是上一條新聞的標(biāo)題及下一條新聞的標(biāo)題，而且顯示新聞列表時(shí)，就不需要顯示上一條及下一條新聞了。于是我放了兩個(gè)層分別用來顯示新聞和上一條及下一條新聞的信息，并在需要的時(shí)候設(shè)置是否顯示。其中newsmain用來顯示新聞或者新聞列表，newspage用來顯示上一條及下一條新聞的信息。接著把對(duì)應(yīng)ID的新聞存為網(wǎng)頁文件，在顯示時(shí)使用iframe嵌入。

先寫個(gè)函數(shù)來從網(wǎng)址中獲取新聞ID，這個(gè)在前一篇文章已經(jīng)講過，拿來用～～

function getid() {

var str,len,pos,id,fn; // 定義一些變量

str=top.window.location.href; //獲取當(dāng)然文件地址

len=str.length; // 得到地址長度

pos=str.indexOf("?id=",0); // 得到"?id="的起始地址

// 判斷是否存在"?id="

if(pos>0) {

id=str.substring(pos+4,len); // 獲取ID

return eval(id); // 返回?cái)?shù)值類型的ID，方便處理

}

else {

return 0; // 錯(cuò)誤參數(shù)，返回0，顯示新聞列表

}

再來個(gè)函數(shù)處理進(jìn)入頁面時(shí)執(zhí)行什么動(dòng)作，是顯示新聞列表還是顯示相應(yīng)ID的新聞

function showmain() {

var id;

id=getid(); // 獲取新聞ID

// 是 0 則顯示列表

if(id>0) {

rs.absoluteposition=id; // 設(shè)置游標(biāo)到指定的新聞

shownews(id);　// 顯示新聞

}

else {

showlist(); // 顯示新聞列表

}

顯示新聞列表的函數(shù)

function showlist() {

var ss=""; // HTML

var i; // 循環(huán)計(jì)數(shù)器

rs.movefirst(); // 移動(dòng)到第一個(gè)記錄

// 循環(huán)讀取新聞?dòng)涗?/P>

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/>"; // 添加一個(gè)新聞

rs.movenext(); //移動(dòng)到下一條一新聞

}

document.all.newsmain.innerHTML=ss; //在新聞顯示區(qū)輸出新聞

document.all.newspage.style.visibility="hidden"; // 顯示新聞列表時(shí)，不顯示前后新聞的信息

}

顯示指定的新聞，并顯示前后新聞的信息

function shownews(id) {

var ps; // 用于存放前后新聞的信息

document.all.newsmain.innerHTML="<iframe class='news_main' frameborder='0' src='news/"+id+".htm'/>"; // 用iframe來顯示新聞

document.all.newspage.style.visibility="visible"; // 使前后新聞信息可見

rs.absoluteposition=id; // 將記錄游標(biāo)移動(dòng)到當(dāng)前新聞

// 如果ID小于1說明是第一條記錄，上一篇新聞就是“沒有了”:)

if(id<=1) {

ps="上一篇：沒有了";

}

// 否則就顯示上一篇新聞的標(biāo)題

else {

rs.moveprevious(); // 記錄游標(biāo)向前移動(dòng)

ps="<a href='javascript:shownews("+(id-1)+")'>上一篇："+rs("title")+"</a>"; //　顯示前篇新聞信息

rs.movenext(); // 恢復(fù)記錄游標(biāo)

}

ps=ps+" "; // 在兩個(gè)信息之間插入一個(gè)空格

// 如果ID大于記錄總數(shù)說明這是最后一個(gè)新聞了～

if(id>=rs.recordcount) {

ps=ps+"下一篇：沒有了";

}

// 否則顯示下篇新聞的標(biāo)題

else {

rs.movenext(); // 記錄游標(biāo)向前移動(dòng)

ps=ps+"<a href='javascript:shownews("+(id+1)+")'>下一篇："+rs("title")+"</a>"; // 顯示下篇新聞的標(biāo)題

rs.moveprevious(); // 恢復(fù)記錄游標(biāo)

}

document.all.newspage.innerHTML=ps; // 顯示前后新聞標(biāo)題～

}

好了，到底算是基本完工了～具體使用可以這樣來：

在head區(qū)加入XML數(shù)據(jù)島

接著在body的onload事件里執(zhí)行showmain()

還需要在body里加入兩個(gè)層用于顯示信息

完工！

不過，我所用的方法也有不完善的地方，如新聞列表的ID必須保證順序排列且不能有缺漏，因?yàn)樵谑褂糜涗浖瘯r(shí)用到了絕對(duì)定位，還有其他等等。我寫文章比較爛，所以：歡迎指正批評(píng)^-^！也歡迎大家我交流經(jīng)驗(yàn)心得等，我的mail是vipxjw@tom.com。