静态的动态续篇之来点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 this调用规则说明
Mar 08 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
BootStrap的两种模态框方式
May 10 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
详解JavaScript的变量
Apr 04 Javascript
vue2.0自定义指令示例代码详解
Apr 25 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 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
$()JS小技巧
2007/07/21 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
django启动uwsgi报错的解决方法
2018/04/08 Python
python版本的仿windows计划任务工具
2018/04/30 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python目录和文件处理总结详解
2019/09/02 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
通信工程专业女生个人求职信
2013/09/21 职场文书
个人租房协议书
2014/04/09 职场文书
高考标语大全
2014/06/05 职场文书
暂住证明怎么写
2015/06/19 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书