静态的动态续篇之来点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 相关文章推荐
关于jQuery object and DOM element
Apr 15 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
js实现旋转的星空效果
Nov 01 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
详解vue中的computed的this指向问题
2018/12/05 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
Python中turtle作图示例
2017/11/15 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python生成器以及应用实例解析
2018/02/08 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
学生喝酒检讨书
2014/02/06 职场文书
拓展策划方案
2014/06/03 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
党风廉正建设责任书
2015/01/29 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
离婚起诉书范本
2015/05/18 职场文书
入党积极分子党支部意见
2015/06/02 职场文书