静态的动态续篇之来点XML
在HTML里,可以加入伪动态,但是当程序员真的加入了之后,又会出现添加内容的时候修改源文件,这样不但很麻烦,还容易出错,下面是爱站技术频道小编为大家整理的静态的动态续篇之来点XML,一起来了解一下吧!
静态的动态续篇之来点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("title")+" ("+rs("date")+")
"; // 添加一个新闻 > color=#800000>
rs.movenext(); //移动到下一条一新闻
}
document.all.newsmain.innerHTML=ss; //在新闻显示区输出新闻
document.all.newspage.style.visibility="hidden"; // 显示新闻列表时,不显示前后新闻的信息
}
显示指定的新闻,并显示前后新闻的信息
function shownews(id) {
var ps; // 用于存放前后新闻的信息
document.all.newsmain.innerHTML=" class='news_main' frameborder='0' src='news>
document.all.newspage.style.visibility="visible"; // 使前后新闻信息可见
rs.absoluteposition=id; // 将记录游标移动到当前新闻
// 如果ID小于1说明是第一条记录,上一篇新闻就是“没有了”:)
if(id<=1) {
ps="上一篇:没有了";
}
// 否则就显示上一篇新闻的标题
else {
rs.moveprevious(); // 记录游标向前移动
ps="上一篇:"+rs("title")+""; // 显示前篇新闻信息 >
rs.movenext(); // 恢复记录游标
}
ps=ps+" "; // 在两个信息之间插入一个空格
// 如果ID大于记录总数说明这是最后一个新闻了~
if(id>=rs.recordcount) {
ps=ps+"下一篇:没有了";
}
// 否则显示下篇新闻的标题
else {
rs.movenext(); // 记录游标向前移动
ps=ps+"下一篇:"+rs("title")+""; // 显示下篇新闻的标题 >
rs.moveprevious(); // 恢复记录游标
}
document.all.newspage.innerHTML=ps; // 显示前后新闻标题~
}
好了,到底算是基本完工了~具体使用可以这样来:
在head区加入XML数据岛
接着在body的onload事件里执行showmain()
还需要在body里加入两个层用于显示信息
完工!
以上就是静态的动态续篇之来点XML的介绍,更多知识尽在爱站技术频道网。