静态的动态续篇之来点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 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 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
第五节--克隆
2006/11/16 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
常见python正则用法的简单实例
2016/06/21 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Python微信公众号开发平台
2018/01/25 Python
Python中logging实例讲解
2019/01/17 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
购房协议书范本
2014/04/11 职场文书
监察建议书
2015/02/04 职场文书
英语教师个人工作总结
2015/02/09 职场文书
高老头读书笔记
2015/06/30 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python