静态的动态续篇之来点XML

在HTML里，可以加入伪动态，但是当程序员真的加入了之后，又会出现添加内容的时候修改源文件，这样不但很麻烦，还容易出错，下面是爱站技术频道小编为大家整理的静态的动态续篇之来点XML，一起来了解一下吧！

静态的动态续篇之来点XML

在HTML里，可以使用数据岛来使用XML数据，一个使用方法就是在HTML里加入一句：

这样，就可以在HTML里使用XML提供的数据。不过，这样还是显得麻烦了，还是要上传整个文件，那么用方便点的吧～～

这样处理之后，我就可以只用修改一个XML文件然后上传到服务器了。

接下来，就是搞定在客户端对XML数据的处理了～～

首先，我得设计一个新闻的数据结构。这个简单，毕竟在列表时只需要用到新闻的标题和时间，但为了链接，需要加上一个ID，结果如下：

????

????????1

????????

????????2005-11-16

????

?

数据结构搞定了，继续！

在客户端对数据处理当然首选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;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的介绍，更多知识尽在爱站技术频道网。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有