静态的动态续篇之来点XML


Posted in Javascript onAugust 15, 2006

在搞定了基本的伪动态之后,我马上把它应用到了网站,但随后就发现了一个问题:我如何来管理新闻列表呢?要是让我在每次要加新闻时去修改源文件然后再上传我可是千万个不愿,不仅麻烦而且容易出错,懒人怎么能可以这么做。动动脑子,于是想到了用XML,这个早已存在,但近些年才流行起来的技术。

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

<xml id="data">

    <!-- 在此为XML数据 -->

</xml>

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

<xml id="data" src="data.xml"/>

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

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

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

<newslist>

    <news>

        <id>1</id>

        <title>第一个新闻</title>

        <date>2005-11-16</date>

    </news>

</newslist>

数据结构搞定了,继续!

在客户端对数据处理当然首选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<rs.recordcount;i++) {

        ss=ss+"<font color=#800000>·</font><a href='javascript:shownews("+rs("id")+")'>"+rs("title")+"</a> ("+rs("date")+")<br/>";  // 添加一个新闻

        rs.movenext();  //移动到下一条一新闻

    }

    document.all.newsmain.innerHTML=ss;  //在新闻显示区输出新闻

    document.all.newspage.style.visibility="hidden";  // 显示新闻列表时,不显示前后新闻的信息

}

显示指定的新闻,并显示前后新闻的信息

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;  // 将记录游标移动到当前新闻

    // 如果ID小于1说明是第一条记录,上一篇新闻就是“没有了”:)

    if(id<=1) {

        ps="上一篇:没有了";

    }

    // 否则就显示上一篇新闻的标题

    else {

        rs.moveprevious();  // 记录游标向前移动

        ps="<a href='javascript:shownews("+(id-1)+")'>上一篇:"+rs("title")+"</a>";  // 显示前篇新闻信息

        rs.movenext();  // 恢复记录游标

    }

    ps=ps+" ";  // 在两个信息之间插入一个空格

    // 如果ID大于记录总数说明这是最后一个新闻了~

    if(id>=rs.recordcount) {

        ps=ps+"下一篇:没有了";

    }

    // 否则显示下篇新闻的标题

    else {

        rs.movenext();  // 记录游标向前移动

        ps=ps+"<a href='javascript:shownews("+(id+1)+")'>下一篇:"+rs("title")+"</a>";  // 显示下篇新闻的标题

        rs.moveprevious();  // 恢复记录游标

    }

    document.all.newspage.innerHTML=ps;  // 显示前后新闻标题~

}

好了,到底算是基本完工了~具体使用可以这样来:

在head区加入XML数据岛

<head><xml id="data" src="newslist.xml"/></head>

接着在body的onload事件里执行showmain()

<body onload="showmain()">

还需要在body里加入两个层用于显示信息

<div id="newspage"></div>

<div id="newsmain"></div>

完工!

不过,我所用的方法也有不完善的地方,如新闻列表的ID必须保证顺序排列且不能有缺漏,因为在使用记录集时用到了绝对定位,还有其他等等。我写文章比较烂,所以:欢迎指正批评^-^!也欢迎大家我交流经验心得等,我的mail是vipxjw@tom.com。

Javascript 相关文章推荐
JS 显示当前日期与时间的代码
Mar 24 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
微信小程序实现弹出菜单动画
Jun 21 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
实用javaScript技术-屏蔽类
Aug 15 #Javascript
巧妙破除网页右键禁用的十大绝招
Aug 12 #Javascript
总结一些js自定义的函数
Aug 05 #Javascript
document对象execCommand的command参数介绍
Aug 01 #Javascript
[JS]点出统计器
Oct 11 #Javascript
破解Session cookie的方法
Jul 28 #Javascript
自适应图片大小的弹出窗口
Jul 27 #Javascript
You might like
php适配器模式介绍
2012/08/14 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
javascript 面向对象 function类
2010/05/13 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
Python新手实现2048小游戏
2015/03/31 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
python音频处理的示例详解
2020/12/23 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
应届生会计求职信
2013/11/11 职场文书
幼儿教师考核制度
2014/01/25 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
语文复习计划
2015/01/19 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python
python中urllib包的网络请求教程
2022/04/19 Python