静态的动态续篇之来点XML |
|
本文标签：静态的动态续篇之来点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 。 |
