静态的动态续篇之来点XML
在搞定了基本的伪动态之后，我马上把它应用到了网站，但随后就发现了一个问题：我如何来管理新闻列表呢？要是让我在每次要加新闻时去修改源文件然后再上传我可是千万个不愿，不仅麻烦而且容易出错，懒人怎么能可以这么做。动动脑子，于是想到了用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。
相关文章
这篇文章主要介绍了谈谈JS中常遇到的浏览器兼容问题和解决方法 ，有些代码在某些浏览器的某些版本中表现出不兼容，影响页面的体验；这时就需要处理了这些兼容问题，让页面在多个版本的浏览器上运行良好。2016-12-12
本文主要介绍了js实现根据文件url批量压缩下载成zip包，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
下面小编就为大家分享一篇layui select动态添加option的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了用js实现猜数字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本文给大家分享使用BootStrap实现标签切换原理解析及核心代码，需要的朋友参考下2017-03-03
这篇文章主要介绍了JS动态显示表格上下frame的方法,涉及javascript中显示表格frame的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了js实现百度淘宝搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
首先说下背景，该code用于一个多条件查询界面，原本该查询条件由一个下拉列表提供，但是由于下拉列表数据量过大，用户使用不方便，便希望在页面给出一个智能提示的功能，但搜索的数据来自下拉列表2009-11-11
这篇文章主要介绍了js实现顶部可折叠的菜单工具栏效果,可实现鼠标滑过菜单工具栏出现折叠与展开效果,涉及javascript鼠标事件及样式的操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了js中数组常用方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论