靜態(tài)的動態(tài)續(xù)篇之來點(diǎn)XML
更新時(shí)間：2006年12月23日 00:00:00 作者：
在搞定了基本的偽動態(tài)之后，我馬上把它應(yīng)用到了網(wǎng)站，但隨后就發(fā)現(xiàn)了一個(gè)問題：我如何來管理新聞列表呢？要是讓我在每次要加新聞時(shí)去修改源文件然后再上傳我可是千萬個(gè)不愿，不僅麻煩而且容易出錯(cuò)，懶人怎么能可以這么做。動動腦子，于是想到了用XML，這個(gè)早已存在，但近些年才流行起來的技術(shù)。
在HTML里，可以使用數(shù)據(jù)島來使用XML數(shù)據(jù)，一個(gè)使用方法就是在HTML里加入一句：
<xml id="data">
<!-- 在此為XML數(shù)據(jù) -->
</xml>
這樣，就可以在HTML里使用XML提供的數(shù)據(jù)。不過，這樣還是顯得麻煩了，還是要上傳整個(gè)文件，那么用方便點(diǎn)的吧～～
<xml id="data" src="data.xml"/>
這樣處理之后，我就可以只用修改一個(gè)XML文件然后上傳到服務(wù)器了。
接下來，就是搞定在客戶端對XML數(shù)據(jù)的處理了～～
首先，我得設(shè)計(jì)一個(gè)新聞的數(shù)據(jù)結(jié)構(gòu)。這個(gè)簡單，畢竟在列表時(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ù)！
在客戶端對數(shù)據(jù)處理當(dāng)然首選JavaScript了，再么這篇文章講的也是用JavaScript來實(shí)現(xiàn)偽動態(tài)。
在JS里，對數(shù)據(jù)島的訪問可以使用記錄集：
var rs=data.recordset;
這個(gè)記錄集的使用方法和ASP中類似，這下方便我了:)，可以很方便地實(shí)現(xiàn)新聞的列表及鏈接了～在顯示新聞，還需要顯示的是上一條新聞的標(biāo)題及下一條新聞的標(biāo)題，而且顯示新聞列表時(shí)，就不需要顯示上一條及下一條新聞了。于是我放了兩個(gè)層分別用來顯示新聞和上一條及下一條新聞的信息，并在需要的時(shí)候設(shè)置是否顯示。其中newsmain用來顯示新聞或者新聞列表，newspage用來顯示上一條及下一條新聞的信息。接著把對應(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í)行什么動作，是顯示新聞列表還是顯示相應(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(); // 移動到第一個(gè)記錄
// 循環(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/>"; // 添加一個(gè)新聞
rs.movenext(); //移動到下一條一新聞
}
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)前新聞
// 如果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+" "; // 在兩個(gè)信息之間插入一個(gè)空格
// 如果ID大于記錄總數(shù)說明這是最后一個(gè)新聞了～
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里加入兩個(gè)層用于顯示信息
<div id="newspage"></div>
<div id="newsmain"></div>
完工！
不過，我所用的方法也有不完善的地方，如新聞列表的ID必須保證順序排列且不能有缺漏，因?yàn)樵谑褂糜涗浖瘯r(shí)用到了絕對定位，還有其他等等。我寫文章比較爛，所以：歡迎指正批評^-^！也歡迎大家我交流經(jīng)驗(yàn)心得等，我的mail是vipxjw@tom.com。
在HTML里，可以使用數(shù)據(jù)島來使用XML數(shù)據(jù)，一個(gè)使用方法就是在HTML里加入一句：
<xml id="data">
<!-- 在此為XML數(shù)據(jù) -->
</xml>
這樣，就可以在HTML里使用XML提供的數(shù)據(jù)。不過，這樣還是顯得麻煩了，還是要上傳整個(gè)文件，那么用方便點(diǎn)的吧～～
<xml id="data" src="data.xml"/>
這樣處理之后，我就可以只用修改一個(gè)XML文件然后上傳到服務(wù)器了。
接下來，就是搞定在客戶端對XML數(shù)據(jù)的處理了～～
首先，我得設(shè)計(jì)一個(gè)新聞的數(shù)據(jù)結(jié)構(gòu)。這個(gè)簡單，畢竟在列表時(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ù)！
在客戶端對數(shù)據(jù)處理當(dāng)然首選JavaScript了，再么這篇文章講的也是用JavaScript來實(shí)現(xiàn)偽動態(tài)。
在JS里，對數(shù)據(jù)島的訪問可以使用記錄集：
var rs=data.recordset;
這個(gè)記錄集的使用方法和ASP中類似，這下方便我了:)，可以很方便地實(shí)現(xiàn)新聞的列表及鏈接了～在顯示新聞，還需要顯示的是上一條新聞的標(biāo)題及下一條新聞的標(biāo)題，而且顯示新聞列表時(shí)，就不需要顯示上一條及下一條新聞了。于是我放了兩個(gè)層分別用來顯示新聞和上一條及下一條新聞的信息，并在需要的時(shí)候設(shè)置是否顯示。其中newsmain用來顯示新聞或者新聞列表，newspage用來顯示上一條及下一條新聞的信息。接著把對應(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í)行什么動作，是顯示新聞列表還是顯示相應(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(); // 移動到第一個(gè)記錄
// 循環(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/>"; // 添加一個(gè)新聞
rs.movenext(); //移動到下一條一新聞
}
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)前新聞
// 如果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+" "; // 在兩個(gè)信息之間插入一個(gè)空格
// 如果ID大于記錄總數(shù)說明這是最后一個(gè)新聞了～
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里加入兩個(gè)層用于顯示信息
<div id="newspage"></div>
<div id="newsmain"></div>
完工！
不過，我所用的方法也有不完善的地方，如新聞列表的ID必須保證順序排列且不能有缺漏，因?yàn)樵谑褂糜涗浖瘯r(shí)用到了絕對定位，還有其他等等。我寫文章比較爛，所以：歡迎指正批評^-^！也歡迎大家我交流經(jīng)驗(yàn)心得等，我的mail是vipxjw@tom.com。
相關(guān)文章
JavaScript數(shù)組去重和扁平化函數(shù)介紹
這篇文章主要介紹了JavaScript數(shù)組去重和扁平化函數(shù)，數(shù)組扁平化又稱數(shù)組降維，下面文章圍繞數(shù)組去重和扁平化函數(shù)得相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下2021-12-12
基于Bootstrap里面的Button dropdown打造自定義select
這篇文章主要介紹了基于Bootstrap里面的Button dropdown打造自定義select的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
微信小程序?qū)崿F(xiàn)多選刪除列表數(shù)據(jù)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多選刪除列表數(shù)據(jù)功能,涉及微信小程序列表數(shù)據(jù)讀取、顯示、刪除等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
詳解JavaScript中浮點(diǎn)數(shù)的精度計(jì)算
這篇文章主要來和大家介紹一下JavaScript中浮點(diǎn)數(shù)精度計(jì)算的相關(guān)知識，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06
JavaScript中函數(shù)聲明優(yōu)先于變量聲明的實(shí)例分析
同一個(gè)標(biāo)示符，先后用var和function聲明它。最后它是什么呢2012-03-03
這篇文章主要介紹了JS實(shí)現(xiàn)判斷移動端PC端功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
JS中confirm,alert,prompt函數(shù)區(qū)別分析
JS中confirm,alert,prompt函數(shù)使用區(qū)別有哪些呢？2011-01-01
Javascript的promise,async和await的區(qū)別詳解
這篇文章主要為大家詳細(xì)介紹了Javascript的promise,async和await的區(qū)別，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
10個(gè)在JavaScript開發(fā)中常遇到的BUG
給大家詳細(xì)著整理了在JavaScript開發(fā)中大家經(jīng)常遇到的BUG和問題，需要的朋友參考學(xué)習(xí)下吧。2017-12-12
本文就和大家談一談javascript中的繼承，什么是繼承，繼承的作用，以及js繼承的實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-02-02