当前位置: 移动技术网 > IT编程>网页制作>XML > 用XML数据岛结合Dom制作通讯录

用XML数据岛结合Dom制作通讯录

2017年12月08日  | 移动技术网IT编程  | 我要评论
一般情况下,如果要为网站提供一个通讯录程序,需要使用cgi结合后台数据库技术,这对web服务器的要求比较高,在很多不提供数据库功能的虚拟主机上甚至无法实现。当然,我们还可以

一般情况下,如果要为网站提供一个通讯录程序,需要使用cgi结合后台数据库技术,这对web服务器的要求比较高,在很多不提供数据库功能的虚拟主机上甚至无法实现。当然,我们还可以采用txt文本替代数据库,但txt文本是比较难操作的,我们必须一行一行的读取判断,还要用分隔字符串实现字段分离,无法进行复杂运算。
现在,我们可以使用“可扩展的标记语言 (xml)” 来保存通讯录的数据,从而体现出xml的优点:表现数据的结构化方法,对于保存许多关系型数据结构的文件很有帮助。

一、基本原理:
在microsoft internet explorer 5.0及以后的版本里,我们可以利用xml元素来创建数据岛,数据岛就是被html页面引用或包含的xml数据,xml数据可以包含在html文件内,也可以包含在某外部文件内,利用xml数据岛可以让我们免除编写复杂脚本的麻烦。dom可对xml文档进行解析,文档中的元素、实体、属性等所有个体都可以用对象模型表示,整个文档的逻辑结构类似一棵树,生成的对象模型就是树的节点,每个对象同时包含了方法和属性,dom提供了许多查找节点的方法。利用dom,开发人员可以动态地创建xml、遍历文档、增加(删除/修改)文档内容,dom提供的api与编程语言无关,所以对一些dom标准中没有明确定义的接口,不同解析器的实现方法可能会有所差别。

二、具体流程为:
1、定义xml文件如下所示:
  <?xml version="1.0" encoding="gb2312"?>
    <中国计算机世界出版服务公司通信录>
      <计算机世界 contactid="2">
        <部门名称>计算机室</部门名称>
        <电话号码>139</电话号码>
        <电子邮件>fsdos@163.net</电子邮件>
      </计算机世界>
    </中国计算机世界出版服务公司通信录>
将上述xml文档保存为tele.xml文件,同时,将上述xml文档中的字段内容置空,做为初始化框架数据,另存为newid.xml文件。
2、客户端加载 xml 文档,在放置通讯录的表格中通过datasrc='#xmldso'将xml文件绑定在表格中,datasrc属性实际上是通过在要处理的xml元素的id属性的前面加上#来实现的,所以我们可以在td元素中间指定具体需要显示的字段;
3、使用dom技术对通讯录进行增加、删除记录操作;
4、通过xmlhttp协议连接到服务器,保存xml文档。

三、xml dom编程简述:
1、客户端dom.htm页面:
<html><body bgcolor=#a1bae6>
<xml id=xmldso src="tele.xml"></xml>
<xml id=newid></xml> <!--加载xml数据-->
<script language=javascript>
newid.async = false;
newid.load("newid.xml");
//增加记录;
function addid(){
var doc=xmldso.xmldocument
var rootnode=doc.documentelement
var sortnode = rootnode.selectnodes("//部门名称")
var currentid = sortnode.length-1
var cc=sortnode.item(currentid).text;
if ((cc=="尚未输入")||(cc==""))
{
alert("请将最后一行数据填写完毕后再增加新的记录!");
}
else

var node= newid.documentelement.childnodes(0).clonenode(true);
var contactid=parseint(sortnode.item(currentid).parentnode.getattribute("contactid"))+1; 
node.setattribute("contactid",contactid); 
xmldso.documentelement.appendchild(node);
}
}
//删除记录
function delid(whichfld){
var sortnode = xmldso.selectsinglenode("//计算机世界[@contactid='"+whichfld+"']");
if (sortnode.parentnode.childnodes.length>1) sortnode.parentnode.removechild(sortnode); 
}
</script>
<script language="vbscript">
sub cc_onmouseup '保存记录;
dim objxml, objxsl, objfso,strfile, strfilename, strxsl,strurl,theform
set savexmldoc=xmldso.xmldocument
strurl="dns2.asp"
set objxml = createobject("microsoft.xmlhttp") '创建ms的xmlhttp组件;
objxml.open "post",strurl,false '采用post提交方式;
objxml.setrequestheader "content-type","application/x-www-form-urlencoded"
objxml.send savexmldoc ' 发送信息,保存xml数据;
'xmlget = objxml.responsebody '稍等片刻后,得到服务器端传回来的结果;
msgbox "保存成功!" 
set objxml = nothing
end sub 
</script>
<center><b>计算机世界----通信录</b><br><br>
<table id="table" datasrc='#xmldso' border cellpadding=3>
<!--进行数据绑定-->
<thead><th>编号</th><th>部门名称</th><th>电话号码</th><th>电子邮件</th></thead>
<tr>
<td><acronym title='点击即可删除该记录'><input type=button size=4 datafld="contactid" onclick="delid(this.value)"></acronym></td>
<td><input type=text datafld="部门名称"></td>
<td><input type=text datafld="电话号码"></td> 
<td><input type=text datafld="电子邮件"></td>
</tr>
</table>
<input type=button name=dd id=dd value="增加记录" onmouseover="this.focus()" onmousedown="addid();">
<input type=button name=cc id=cc value="保存"></center></body></html>

2、服务器端dns2.asp程序比较简单,在接收到xml数据后,创建文件对象,保存到tele.xml即可:
<
set receiveddoc = createobject("microsoft.xmldom") '创建 xml dom实例;
receiveddoc.async=false
receiveddoc.load request '接收xml数据;
set files=server.createobject("scripting.filesystemobject")
set numtxt=files.createtextfile(server.mappath("tele.xml"),true)
numtxt.writeline(replace(receiveddoc.xml,"?>"," encoding=""gb2312""?>")) '将xml数据写入文件
numtxt.close
response.write receiveddoc.xml
>

3、实际使用过程中,还需要增加一个显示通讯录的网页index.htm,其实就是上面dom.htm的简化版,去除所有增加、删除、修改和保存功能,只在表格单元格中用label显示数据:
<html><body bgcolor=#a1bae6>
<xml id=xmldso src="tele.xml"></xml>
<center><b>计算机世界----通信录</b><br><br>
<table id="table" datasrc='#xmldso' border cellpadding=3>
<thead><th>编号</th><th>部门名称</th><th>电话号码</th><th>电子邮件</th>
</thead>
<tr>
<td><label datafld="contactid"></label></td>
<td><label datafld="部门名称"></label></td>
<td><label datafld="电话号码"></label></td> 
<td><label datafld="电子邮件"></label></td>
</tr>
</table>
</center></body></html>

四、使用xml数据岛结合dom技术的优点:
1、首先,当然是xml本身带来的好处。xml打破了标记定义的垄断,你可以自定义字段名称,在本文所用的xml文件中,连字段名都可以为中文,数据非常地简单明晰,因为它所携带的信息不是显示上的描述,而是信息的语意,极大的加强了文档的可读性。使用xml也便于不同系统之间信息的传输。
2、xml数据岛允许用户在客户端访问与操控数据集,不必频繁的与服务器交互,这对于减轻服务器的负荷很有帮助。同时,由于xml数据岛本身的特点,使得在客户端的数据操作十分简便,减少了编程量。
3、dom强制使用树模型来访问xml文档中的信息,由于xml本质上就是一种分层结构,所以这种描述方法是相当有效的。通过dom接口,应用程序可以在任何时候访问xml文档中的任何一部分数据,控制起来相当灵活。
4、采用xmlhttp对象传送xml数据到服务器,客户端页面无闪烁刷新现象。

本程序在基于windows2000平台的iis5.0和ie5.0上运行通过。在实际运用过程中,还可使用dom结合xsl技术为通讯录增加排序、格式转换和数据查找等功能,使用xml数据岛的datapagesize属性以及previouspage、nextpage函数为通讯录增加分页功能,使用dtd与xml schema动态验证通讯录数据。

 

------------------------the end----------------------

 


附:(全部源程序)
****************************************************************************
一、index.htm(显示通讯录):
<html><body bgcolor=#a1bae6>
<xml id=xmldso src="tele.xml"></xml>
<center><b>计算机世界----通迅录</b><br><br>
<table id="table" datasrc='#xmldso' border cellpadding=3>
<thead><th>编号</th><th>部门名称</th><th>电话号码</th><th>电子邮件</th>
</thead>
<tr>
<td><label datafld="contactid"></label></td>
<td><label datafld="部门名称"></label></td>
<td><label datafld="电话号码"></label></td> 
<td><label datafld="电子邮件"></label></td>
</tr>
</table>
</center></body></html>
****************************************************************************
二、dom.htm(在线编辑通讯录):
<html><body bgcolor=#a1bae6>
<xml id=xmldso src="tele.xml"></xml>
<xml id=newid></xml>
<script language=javascript>
newid.async = false;
newid.load("newid.xml");
function addid(){
var doc=xmldso.xmldocument
var rootnode=doc.documentelement
var sortnode = rootnode.selectnodes("//部门名称")
var currentid = sortnode.length-1
var cc=sortnode.item(currentid).text;
if ((cc=="尚未输入")||(cc==""))
{
alert("请将最后一行数据填写完毕后再增加新的记录!");
}
else

var node= newid.documentelement.childnodes(0).clonenode(true);
var contactid=parseint(sortnode.item(currentid).parentnode.getattribute("contactid"))+1; 
node.setattribute("contactid",contactid); 
xmldso.documentelement.appendchild(node);
}
}
function delid(whichfld){
var sortnode = xmldso.selectsinglenode("//计算机世界[@contactid='"+whichfld+"']");
if (sortnode.parentnode.childnodes.length>1) sortnode.parentnode.removechild(sortnode); 
}
</script>
<script language="vbscript">
sub cc_onmouseup '当点击“保存”按钮时触发;
dim objxml, objxsl, objfso,strfile, strfilename, strxsl,strurl,theform
set savexmldoc=xmldso.xmldocument
strurl="dns2.asp"
set objxml = createobject("microsoft.xmlhttp") '创建ms的xmlhttp组件;
objxml.open "post",strurl,false '采用post提交方式;
objxml.setrequestheader "content-type","application/x-www-form-urlencoded"
objxml.send savexmldoc ' 发送信息
'xmlget = objxml.responsebody '稍等片刻后,得到服务器端传回来的结果;
msgbox "保存成功!" 
set objxml = nothing
end sub 
</script>
<center><b>计算机世界----通信录</b><br><br>
<table id="table" datasrc='#xmldso' border cellpadding=3>
<thead>
<th>编号</th>
<th>部门名称</th>
<th>电话号码</th>
<th>电子邮件</th>
</thead>
<tr>
<td><acronym title='点击即可删除该记录'><input type=button size=4 datafld="contactid" onclick="delid(this.value)"></acronym></td>
<td><input type=text datafld="部门名称"></td>
<td><input type=text datafld="电话号码"></td> 
<td><input type=text datafld="电子邮件"></td>
</tr>
</table>
<input type=button name=dd id=dd value="增加记录" onmouseover="this.focus()" onmousedown="addid();">
<input type=button name=cc id=cc value="保存"></center></body></html>
****************************************************************************
三、dns2.asp(后台保存通讯录):
<%
set receiveddoc = createobject("microsoft.xmldom")
receiveddoc.async=false
receiveddoc.load request
set files=server.createobject("scripting.filesystemobject")
set numtxt=files.createtextfile(server.mappath("tele.xml"),true)
numtxt.writeline(replace(receiveddoc.xml,"?>"," encoding=""gb2312""?>"))
numtxt.close
response.write receiveddoc.xml
%>
****************************************************************************
四、tele.xml(通讯录xml文档):
<?xml version="1.0" encoding="gb2312"?>
<中国计算机世界出版服务公司通信录>
<计算机世界 contactid="1">
<部门名称>电话总机</部门名称>
<电话号码>010-68130909</电话号码>
<电子邮件>webmaster@ccw.com.cn</电子邮件>
</计算机世界>
</中国计算机世界出版服务公司通信录>
****************************************************************************
五、newid.xml(通讯录xml初始化文档):
<?xml version="1.0" encoding="gb2312"?>
<中国计算机世界出版服务公司通信录>
<计算机世界 contactid="1">
<部门名称>尚未输入</部门名称>
<电话号码>保密</电话号码>
<电子邮件>保密</电子邮件>
</计算机世界>
</中国计算机世界出版服务公司通信录>

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网