快捷導(dǎo)航

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

更新時間：2006年12月23日 00:00:00 作者：

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

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

<xml id="data">

    

</xml>

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

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

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

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

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

<newslist>

    <news>

        <id>1</id>

        <title>第一個新聞</title>

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

    </news>

</newslist>

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

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

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

var rs=data.recordset;

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

先寫個函數(shù)來從網(wǎng)址中獲取新聞ID，這個在前一篇文章已經(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);  // 返回數(shù)值類型的ID，方便處理

    }

    else {

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

    }

}

再來個函數(shù)處理進(jìn)入頁面時執(zhí)行什么動作，是顯示新聞列表還是顯示相應(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)計數(shù)器

    rs.movefirst();  // 移動到第一個記錄

    // 循環(huán)讀取新聞記錄

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

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

    }

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

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

}

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

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)前新聞

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

    if(id<=1) {

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

    }

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

    else {

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

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

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

    }

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

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

    if(id>=rs.recordcount) {

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

    }

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

    else {

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

        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ù)島

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

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

<body onload="showmain()">

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

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

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

完工！

不過，我所用的方法也有不完善的地方，如新聞列表的ID必須保證順序排列且不能有缺漏，因為在使用記錄集時用到了絕對定位，還有其他等等。我寫文章比較爛，所以：歡迎指正批評^-^！也歡迎大家我交流經(jīng)驗心得等，我的mail是vipxjw@tom.com。