静态的动态续篇之来点XML


Posted in Javascript onDecember 23, 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 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
js实现简单模态框实例
Nov 16 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 #Javascript
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 #Javascript
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 #Javascript
实现复选框全选/全不选切换
Dec 23 #Javascript
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 #Javascript
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 #Javascript
Javascript实例教程(19) 使用HoTMetal(5)
Dec 23 #Javascript
You might like
SONY ICF-F10中波修复记
2021/03/02 无线电
php中的时间显示
2007/01/18 PHP
php使用session二维数组实例
2014/11/06 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
详解VUE 数组更新
2017/12/16 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
python连接字符串的方法小结
2015/07/13 Python
详解Python爬虫的基本写法
2016/01/08 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
关于python中remove的一些坑小结
2021/01/04 Python
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
丑小鸭教学反思
2014/02/03 职场文书
道路交通安全实施方案
2014/03/12 职场文书
综合内勤岗位职责
2014/04/14 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书