静态的动态续篇之来点XML_javascript技巧

在HTML里，可以使用数据岛来使用XML数据，一个使用方法就是在HTML里加入一句：

这样，就可以在HTML里使用XML提供的数据。不过，这样还是显得麻烦了，还是要上传整个文件，那么用方便点的吧～～

这样处理之后，我就可以只用修改一个XML文件然后上传到服务器了。

接下来，就是搞定在客户端对XML数据的处理了～～

首先，我得设计一个新闻的数据结构。这个简单，毕竟在列表时只需要用到新闻的标题和时间，但为了链接，需要加上一个ID，结果如下：

1

2005-11-16

数据结构搞定了，继续！

在客户端对数据处理当然首选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

ss=ss+"·"+rs("title")+" ("+rs("date")+")
"; // 添加一个新闻

rs.movenext(); //移动到下一条一新闻

}

document.all.newsmain.innerHTML=ss; //在新闻显示区输出新闻

document.all.newspage.style.visibility="hidden"; // 显示新闻列表时，不显示前后新闻的信息

}

显示指定的新闻，并显示前后新闻的信息

function shownews(id) {

var ps; // 用于存放前后新闻的信息

document.all.newsmain.innerHTML=""; // 用iframe来显示新闻

document.all.newspage.style.visibility="visible"; // 使前后新闻信息可见

rs.absoluteposition=id; // 将记录游标移动到当前新闻

// 如果ID小于1说明是第一条记录，上一篇新闻就是“没有了”:)

if(id<=1) {

ps="上一篇：没有了";

}

// 否则就显示上一篇新闻的标题

else {

rs.moveprevious(); // 记录游标向前移动

ps="上一篇："+rs("title")+""; //　显示前篇新闻信息

rs.movenext(); // 恢复记录游标

}

ps=ps+" "; // 在两个信息之间插入一个空格

// 如果ID大于记录总数说明这是最后一个新闻了～

if(id>=rs.recordcount) {

ps=ps+"下一篇：没有了";

}

// 否则显示下篇新闻的标题

else {

rs.movenext(); // 记录游标向前移动

ps=ps+"下一篇："+rs("title")+""; // 显示下篇新闻的标题

rs.moveprevious(); // 恢复记录游标

}

document.all.newspage.innerHTML=ps; // 显示前后新闻标题～

}

好了，到底算是基本完工了～具体使用可以这样来：

在head区加入XML数据岛

接着在body的onload事件里执行showmain()

还需要在body里加入两个层用于显示信息

完工！

不过，我所用的方法也有不完善的地方，如新闻列表的ID必须保证顺序排列且不能有缺漏，因为在使用记录集时用到了绝对定位，还有其他等等。我写文章比较烂，所以：欢迎指正批评^-^！也欢迎大家我交流经验心得等，我的mail是vipxjw@tom.com。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com