静态的动态续篇之来点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。
相关推荐
-
静态的动态续篇之来点XML
在搞定了基本的伪动态之后,我马上把它应用到了网站,但随后就发现了一个问题:我如何来管理新闻列表呢?要是让我在每次要加新闻时去修改源文件然后再上传我可是千万个不愿,不仅麻烦而且容易出错,懒人怎么能可以这么做.动动脑子,于是想到了用XML,这个早已存在,但近些年才流行起来的技术. 在HTML里,可以使用数据岛来使用XML数据,一个使用方法就是在HTML里加入一句: <xml id="data"> <!-- 在此为XML数据 --> </xml> 这样,就
-
详细介绍kvm虚拟机静态和动态迁移（图文介绍）
本文主要介绍了kvm虚拟机静态和动态迁移,具体如下: 一.kvm虚拟机静态迁移 1.静态迁移就是虚拟机在关机状态下,拷贝虚拟机虚拟磁盘文件与配置文件到目标虚拟主机中,实现的迁移. (1)虚拟主机各自使用本地存储存放虚拟机磁盘文件 本文实现基于本地磁盘存储虚拟机磁盘文件的迁移方式, (2)虚拟主机之间使用共享存储存放虚拟机磁盘文件 该方式只是在目标虚拟主机上重新定义虚拟机就可以了. 2.静态迁移过程如下 (1)确定虚拟机关闭状态 (2)准备迁移oeltest02虚拟机,查看该虚拟机配置的磁盘文件
-
深入Android中BroadcastReceiver的两种注册方式（静态和动态）详解
今天我们一起来探讨下安卓中BroadcastReceiver组件以及详细分析下它的两种注册方式. BroadcastReceiver也就是"广播接收者"的意思,顾名思义,它就是用来接收来自系统和应用中的广播.在Android系统中,广播体现在方方面面,例如当开机完成后系统会产生一条广播,接收到这条广播就能实现开机启动服务的功能:当网络状态改变时系统会产生一条广播,接收到这条广播就能及时地做出提示和保存数据等操作:当电池电量改变时,系统会产生一条广播,接收到这条广播就能在电量低时告知用户
-
浅析php-fpm静态和动态执行方式的比较
本文实例讲述了php-fpm静态和动态执行方式的比较.分享给大家供大家参考,具体如下: 前段时间配置php-fpm的时候,无意间发现原来他还有两种执行方式.与Apache一样,他的进程数也是可以根据设置分为动态和静态的. 而php-fpm也是同样存在两种方式,一种是直接开启指定数量的php-fpm进程,不再增加或者减少:另一种则是开始的时候开启一定数量的php-fpm进程,当请求量变大的时候,动态的增加php-fpm进程数到上限,当空闲的时候自动释放空闲的进程数到一个下限. 这两种不同的执行方式
-
使用nginx+tomcat实现静态和动态页面的分离
博主最近在优化一个javaweb项目,该项目之前一直都是使用tomcat处理用户请求的,无论静态还是动态的东西,一律交给tomcat处理.tomcat主要是负责处理servlet的,静态的文件还是交给nginx处理,nginx对静态文件的处理比tomcat不是只快了一点,并且Nginx的使用对项目并发能力有很大的提升.下面主要记录下主要的配置过程: 实验环境:windows 实验工具:Nginx.tomcat windows下安装Nginx非常简单,去官网下载压缩包解压后并且双击解压目录下的ng
-
Qt图形图像开发之曲线图模块QCustomplot库生成静态、动态曲线详细教程图解
Qt曲线图模块QCustomPlot库介绍 QCustomPlot是一个小型的Qt画图标类,支持绘制静态曲线.动态曲线.多重坐标曲线,柱状图,蜡烛图等.只需要在项目中加入头文件qcustomplot.h和qcustomplot.cpp文件,然后使一个widget提升为QCustomPlot类,即可使用. QCustomPlot官网: http://www.qcustomplot.com/ QCustomPlot下载地址: http://www.qcustomplot.com/index.
-
详解C++ 多态的两种形式（静态、动态）
1.多态的概念与分类 多态(Polymorphisn)是面向对象程序设计(OOP)的一个重要特征.多态字面意思为多种状态.在面向对象语言中,一个接口,多种实现即为多态.C++中的多态性具体体现在编译和运行两个阶段.编译时多态是静态多态,在编译时就可以确定使用的接口.运行时多态是动态多态,具体引用的接口在运行时才能确定. 静态多态和动态多态的区别其实只是在什么时候将函数实现和函数调用关联起来,是在编译时期还是运行时期,即函数地址是早绑定还是晚绑定的.静态多态是指在编译期间就可以确定函数的调用地址,
-
C语言静态与动态通讯录的实现流程详解
目录 静态通讯录 contact.h contact.c test.c 动态通讯录 contact.h contact.c qsort.c test.c 本次通讯录的代码已经放到我的Gitee仓库中,感兴趣的小伙伴可以去看看 Gitee 静态通讯录 在我们学习完C语言的结构体.指针以及动态内存管理之后,我们就可以实现一些有意思的小项目了,通过这些小项目可以加深我们对于相关知识的理解. 静态通讯录主要要求有 静态大小,可以记录10个人的信息(大小自己定) 记录的信息如下:名字.性别.年龄.电话.住
-
java JVM方法分派模型静态分派动态分派全面讲解
前言 了解 行为方法分派 有利于在行为分派时时进行一些功能操作 本文全面讲解行为分派的类型:静态 & 动态行为分派,希望你们会喜欢. 目录 1. 知识储备 1.1 分派 定义:确定执行哪个方法 的过程 a. 疑问 有些读者会问,方法的执行不是取决于代码设置中的执行对象吗?为什么还要选择呢? b. 回答 若 一个对象对应于多个方法 时,就需要进行选择了 读者应该都想到了 Java中的特性:多态,即重写 & 重载.下面我会详细讲解. 分类:静态分派 & 动态分派.下面我将详细讲解. 1
-
Java方法调用解析静态分派动态分派执行过程
方法调用 在程序运行时,进行方法调用是最普遍,最频繁的操作 方法调用不等于方法执行: 方法调用阶段唯一的任务就是确定被调用的方法版本,即调用哪一个方法 不涉及方法内部的具体运行过程 Class文件的编译过程不包括传统编译中的连接步骤 Class文件中的一切方法调用在Class文件里面存储的都是符号引用,而不是方法在在实际运行时内存布局中的入口地址,即之前的直接引用: 这样使得Java具有更强大的动态扩展能力 同时也使得Java方法调用过程变得相对复杂 需要在类加载期间,甚至会到运行期间才能确定目