静态的动态续篇之来点XML

来源:爱站网时间:2018-12-30编辑:网友分享
在HTML里,可以加入伪动态,但是当程序员真的加入了之后,又会出现添加内容的时候修改源文件,这样不但很麻烦,还容易出错,下面是爱站技术频道小编为大家整理的静态的动态续篇之来点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的介绍,更多知识尽在爱站技术频道网。

上一篇:Java Script中的解密效果要怎么达到

下一篇:掌握Javascript中的小技巧

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载