静态的动态续篇之来点XML

2016-02-19 11:25 3 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享静态的动态续篇之来点XML的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

在搞定了基本的伪动态之后,我马上把它应用到了网站,但随后就发现了一个问题:我如何来管理新闻列表呢?要是让我在每次要加新闻时去修改源文件然后再上传我可是千万个不愿,不仅麻烦而且容易出错,懒人怎么能可以这么做。动动脑子,于是想到了用XML,这个早已存在,但近些年才流行起来的技术。

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

xml id="data"

    !-- 在此为XML数据 --

/xml

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

xml id="data" src="data.xml"/

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

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

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

newslist

    news

        id1/id

        title第一个新闻/title

        date2005-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(pos0) {

        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(id0) {

        rs.absoluteposition=id;  // 设置游标到指定的新闻

        shownews(id); // 显示新闻

    }

    else {

        showlist();   // 显示新闻列表

    }

}

显示新闻列表的函数

function showlist() {

    var ss="";  // HTML

    var i;  // 循环计数器

    rs.movefirst();  // 移动到第一个记录

    // 循环读取新闻记录

    for(i=0;irs.recordcount;i++) {

        ss=ss+"font color=#800000·/fonta 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数据岛

headxml 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。

来源:http://www.tulaoshi.com/n/20160219/1597438.html

延伸阅读
标签: PHP
  在最近几年,万维网(也称环球信息网,即WWW)不断改变信息处理技术的面貌。WEB已经快速地成为一种有效的媒介,并适合人们和商业沟通和协作。几乎所有的信息技术领域都普遍受到WEB的影响。Web访问带来更多用户和更多数据,这意味着给服务器和数据库更多压力和最终用户得到越来越慢的响应速度。与不断靠增加CPU,磁盘驱动器及内存来跟上...
在过程中引用静态局部变量要比引用常规局部动态变量慢2-3倍。要想真正地加速过程的执行速度,最彻底的方法就是将所有的静态变量转换为模块级别变量。 这种方法的唯一不足是:过程很少是自包含的,如果要在其他工程中重用,就必须同时拷贝并粘贴这些模块级别变量。 另外的一种处理方法是:在时间要求高的循环前,将静态变量数值装入动态变量...
标签: Web开发
动态INCLUDE     用jsp:include动作实现 jsp:include page="included.jsp" flush="true" /它总是会检查所含文件中的变化,适合用于包含动态页面,并且可以带参数。 静态INCLUDE    用include伪码实现,定不会检查所含文件的变化,适用于包含静态页面%@ include file="inclu...
标签: Web开发
根据客户的需要做一个产品的分类的导航菜单,以前使用ASP递归读取的。速度慢,而且消耗大量服务器资源。干脆改成AJAX+XML。共享出来和大家交流。希望各位能帮忙改进。 产品分类的XML文件 代码如下: //id为自身id,pid为父级分类ID  ?xml version="1.0" encoding="UTF-8" ?  Proot      ...
标签: ASP
  Function ReplaceChar ( FstrSource )   dim strRet   if IsNull(FstrSource) then     FstrSource = ""   end if   strRet = Replace ( FstrSource , "&" , "&amp;" )   strRet = Replace ( strRet , "<" , "&lt;" )   strRet = Replace ( strRet , "" , "&gt;" ) ...

经验教程

996

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部