在搞定了基本的伪动态之后,我马上把它应用到了网站,但随后就发现了一个问题:我如何来管理新闻列表呢?要是让我在每次要加新闻时去修改源文件然后再上传我可是千万个不愿,不仅麻烦而且容易出错,懒人怎么能可以这么做。动动脑子,于是想到了用XML,这个早已存在,但近些年才流行起来的技术。
在HTML里,可以使用数据岛来使用XML数据,一个使用方法就是在HTML里加入一句:
这样,就可以在HTML里使用XML提供的数据。不过,这样还是显得麻烦了,还是要上传整个文件,那么用方便点的吧~~
这样处理之后,我就可以只用修改一个XML文件然后上传到服务器了。
接下来,就是搞定在客户端对XML数据的处理了~~
首先,我得设计一个新闻的数据结构。这个简单,毕竟在列表时只需要用到新闻的标题和时间,但为了链接,需要加上一个ID,结果如下:
数据结构搞定了,继续!
在客户端对数据处理当然首选JavaScript了,再么这篇文章讲的也是用JavaScript来实现伪动态。
在JS里,对数据岛的访问可以使用记录集:
var rs=data.recordset;
这个记录集的使用方法和ASP中类似,这下方便我了:),可以很方便地实现新闻的列表及链接了~在显示新闻,还需要显示的是上一条新闻的标题及下一条新闻的标题,而且显示新闻列表时,就不需要显示上一条及下一条新闻了。于是我放了两个层分别用来显示新闻和上一条及下一条新闻的信息,并在需要的时候设置是否显示。其中newsmain用来显示新闻或者新闻列表,newspage用来显示上一条及下一条新闻的信息。接着把对应ID的新闻存为网页文件,在显示时使用iframe嵌入。
先写个函数来从网址中获取新闻ID,这个在前一篇文章已经讲过,拿来用~~
function getid() {
var str,len,pos,id,fn; // 定义一些变量
str=top.window.location.href; //获取当然文件地址
len=str.length; // 得到地址长度
pos=str.indexOf("?id=",0); // 得到"?id="的起始地址
// 判断是否存在"?id="
if(pos>0) {
id=str.substring(pos+4,len); // 获取ID
return eval(id); // 返回数值类型的ID,方便处理
}
else {
return 0; // 错误参数,返回0,显示新闻列表
}
}
再来个函数处理进入页面时执行什么动作,是显示新闻列表还是显示相应ID的新闻
function showmain() {
var id;
id=getid(); // 获取新闻ID
// 是 0 则显示列表
if(id>0) {
rs.absoluteposition=id; // 设置游标到指定的新闻
shownews(id); // 显示新闻
}
else {
showlist(); // 显示新闻列表
}
}
显示新闻列表的函数
function showlist() {
var ss=""; // HTML
var i; // 循环计数器
rs.movefirst(); // 첫 번째 레코드로 이동
// 뉴스 기록 읽기를 반복합니다
for(i=0;i ss=ss "·" rs("제목") " (" rs("date") ") rs.movenext(); //다음 뉴스 항목으로 이동 } document.all.newsmain.innerHTML=ss; //뉴스 표시 영역에 뉴스 출력 document.all.newspage.style.visibility="hidden"; // 뉴스 목록 표시 시 이전 및 다음 뉴스 정보가 표시되지 않습니다. } 지정된 뉴스를 표시하고 이전 및 다음 뉴스에 대한 정보를 표시합니다 함수 shownews(id) { var ps; // 이전 및 다음 뉴스에 대한 정보를 저장하는 데 사용됩니다. document.all.newsmain.innerHTML="" // iframe을 사용하여 뉴스 표시 document.all.newspage.style.visibility="visible"; // 이전 및 다음 뉴스 정보를 표시합니다 rs.absoluteposition=id; // 현재 뉴스로 기록 커서 이동 // ID가 1보다 작으면 첫 번째 레코드라는 뜻이고, 마지막 뉴스는 "no more"라는 뜻입니다 :) if(id<=1) { ps="이전 게시물: 더 이상 없음"; } // 그렇지 않으면 이전 뉴스 제목을 표시합니다 그 외 { rs.moveprevious(); // 커서가 앞으로 이동하는 것을 기록합니다 ps="이전 기사:" rs("title") "" // 뉴스 표시 전 정보 rs.movenext(); //기록 커서 복원 } ps=ps " " // 두 메시지 사이에 공백을 삽입합니다. //ID가 전체 레코드 수보다 크다면 마지막 소식이라는 뜻입니다~ if(id>=rs.recordcount) { ps=ps "다음 기사: 더 이상 없음"; } // 그렇지 않으면 다음 뉴스 항목의 제목을 표시합니다 그 외 { rs.movenext(); // 커서가 앞으로 이동하는 것을 기록합니다 ps=ps "다음 기사:" rs("title") "" // 다음 항목 표시 뉴스 제목 rs.moveprevious(); //기록 커서 복원 } document.all.newspage.innerHTML=ps; // 전후 뉴스 제목 표시~ } 자, 기본적으로는 끝났습니다. 구체적인 사용법은 다음과 같습니다. 헤드 영역에 XML 데이터 아일랜드 추가
" // 뉴스 추가
그런 다음 본문의 onload 이벤트에서 showmain()을 실행합니다
정보를 표시하려면 본체에 레이어 2개를 추가해야 합니다
완료!
그러나 제가 사용한 방법에도 불완전한 부분이 있습니다. 예를 들어 뉴스 목록의 ID는 레코드 세트를 사용할 때 절대 위치 지정을 사용하기 때문에 순서대로 배열되어야 하고 간격이 없어야 합니다. 저는 글을 잘 못쓰므로 수정과 비판은 환영합니다 ^-^! 또한 경험과 통찰력 등을 교환하는 모든 분들을 환영합니다. 제 이메일은 vipxjw@tom.com입니다.