快捷導(dǎo)航

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

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

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

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

<xml id="data">

    

</xml>

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

<xml id="data" src="data.xml"/>

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

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

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

<newslist>

    <news>

        <id>1</id>

        <title>第一個(gè)新聞</title>

        <date>2005-11-16</date>

    </news>

</newslist>

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

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

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

var rs=data.recordset;

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

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

function getid() {

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

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

    len=str.length;     // 得到地址長(zhǎng)度

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

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

    if(pos>0) {

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

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

    }

    else {

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

    }

}

再來(lái)個(gè)函數(shù)處理進(jìn)入頁(yè)面時(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)涗?

    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來(lái)顯示新聞

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

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

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

    if(id<=1) {

        ps="上一篇：沒(méi)有了";

    }

    // 否則就顯示上一篇新聞的標(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ù)說(shuō)明這是最后一個(gè)新聞了～

    if(id>=rs.recordcount) {

        ps=ps+"下一篇：沒(méi)有了";

    }

    // 否則顯示下篇新聞的標(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)題～

}

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

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

<head><xml id="data" src="newslist.xml"/></head>

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

<body onload="showmain()">

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

<div id="newspage"></div>

<div id="newsmain"></div>

完工！

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