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

2024-10-04 19:54:14

一般情况下，如果要为网站提供一个通讯录程序，需要使用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标准中没有明确定义的接口，不同解析器的实现方法可能会有所差别。

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

三、XML DOM编程简述：
１、客户端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 ' 发送信息，保存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>

２、服务器端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
>

３、实际使用过程中，还需要增加一个显示通讯录的网页index.htm，其实就是上面dom.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>

四、使用XML数据岛结合Dom技术的优点：
１、首先，当然是XML本身带来的好处。XML打破了标记定义的垄断，你可以自定义字段名称，在本文所用的XML文件中，连字段名都可以为中文，数据非常地简单明晰，因为它所携带的信息不是显示上的描述，而是信息的语意，极大的加强了文档的可读性。使用XML也便于不同系统之间信息的传输。
２、XML数据岛允许用户在客户端访问与操控数据集，不必频繁的与服务器交互，这对于减轻服务器的负荷很有帮助。同时，由于XML数据岛本身的特点，使得在客户端的数据操作十分简便，减少了编程量。
３、DOM强制使用树模型来访问XML文档中的信息，由于XML本质上就是一种分层结构，所以这种描述方法是相当有效的。通过DOM接口，应用程序可以在任何时候访问XML文档中的任何一部分数据，控制起来相当灵活。
４、采用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">
<部门名称>尚未输入</部门名称>
<电话号码>保密</电话号码>
<电子邮件>保密</电子邮件>
</计算机世界>
</中国计算机世界出版服务公司通信录>

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

一般情况下,如果要为网站提供一个通讯录程序,需要使用CGI结合后台数据库技术,这对WEB服务器的要求比较高,在很多不提供数据库功能的虚拟主机上甚至无法实现.当然,我们还可以采用TXT文本替代数据库,但TXT文本是比较难操作的,我们必须一行一行的读取判断,还要用分隔字符串实现字段分离,无法进行复杂运算. 现在,我们可以使用"可扩展的标记语言 (XML)" 来保存通讯录的数据,从而体现出XML的优点:表现数据的结构化方法,对于保存许多关系型数据结构的文件很有帮助. 一.基本原理: 在Mic
怎样才能用js生成xmldom对象，并且在firefox中也实现xml数据岛？

一般来说,xml文件都是从外部载入的,那么我们如何只用js生成xml对象呢?下面的程序实现了这一点,只需要输入字符串形式的xml数据,就可以转换为xml对象,并且兼容firefox. 用这种方法,我们也可以在firefox中实现xml数据岛,即用xmp标签来装载xml字符串,然后调用createXml函数来生成xml. 由于firefox中不支持节点的.xml属性,所以需要给它添加该属性,使之与IE一致复制代码代码如下: <body> <xmp id=x1> &l
XML指南——XML数据岛

使用IE5.0或者更高的版本,XML数据可以以数据岛的形式嵌入HTML页面. 在HTML页面中嵌入XML数据使用非官方标准的<xml>标记可以将XML数据嵌入到HTML页面中. XML数据可以象下面的例子那样嵌入HTML页面: <xml id="note"> <note> <to>Tove</to> <from>Jani</from> <heading>Re
HTML中的XML数据岛记录编辑与添加

<HTML><HEAD><Title>HTML中的数据岛中的记录集</Title></HEAD><body bkcolor=#EEEEEE text=blue bgcolor="#00FFFF"><Table align=center width="100%"><TR><TD align="center"> <h5><
关于html嵌入xml数据岛如何穿过树形结构关系的问题

如下面的代码细节,html里面引用xml的数据岛,如何穿过树形结构的关系? 我不知道这个datafld里面应该如何使用xml里面的标签名称,如何加前缀,如何从resume得到name子元素?同时我的html文件应该如何修改呢? xml的数据文件是: XML code: 复制代码代码如下: <?xml version="1.0" encoding="UTF-8"?> <resume> <name>mike</name>
利用AJAX与数据岛实现无刷新绑定

首先我们今天要用到的是Ajax.NET Professional ,您可以从http://www.schwarz-interactive.de/ 获取关于AJAX.NET的相关信息.其次还需要知道XML数据岛的相关知识. 下面我们先来看一个简单的绑定例子: 第一步先确定XML数据源 <xml ID="xmlData" name="xmlData"> <root> <METADATA> <AUTHOR>John Smit
Web设计中如何使用XML数据

XML数据源对象是一个ActiveX控件,允许你在XML文件和HTML页面之间操作数据.本文将向你展示如何从各种XML数据源中提取数据,以及如何使用JavaScript显示这些数据. XML数据源对象DSO是一个微软ActiveX控件,构建在微软IE4以后的版本上.这个对象允许你把一个外部的XML文件或者嵌入HTML文件中的内容提取到HTML页面中. 你可以在一个Web页面中使用XML - DSO从一个外部XML文件中选取内容,从嵌入Web页面的XML中提取XML数据,然后使用JavaScrip
PHP实现使用DOM将XML数据存入数组的方法示例

本文实例讲述了PHP实现使用DOM将XML数据存入数组的方法.分享给大家供大家参考,具体如下: <?php $doc = new DOMDocument('1.0','utf-8'); $doc->load("config.xml"); $roots=$doc->documentElement;//获取根节点也就是config(仅有一个) $childs=$roots->childNodes;//获取根节点下所有子节点也就是 db smarty for($i=0
Python基于dom操作xml数据的方法示例

本文实例讲述了Python基于dom操作xml数据的方法.分享给大家供大家参考,具体如下: 1.xml的内容为del.xml,如下 <?xml version="1.0" encoding="utf-8"?> <catalog> <maxid>4</maxid> <login username="pytest" passwd='123456'> <caption>Python
使用JS+XML（数据岛）实现分页）

作者:bencalie 整理日期:2004年6月15日 user 1 name 1 user 2 name 2 user 3 name 3 user 4 name 4 user 5 name 5 user 6 name 7 user 7 name 7 user 8 name 8 user 9 name 9 Previous Page Next Page [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 很明显,这些XML数据是直接放到客户端的,因此只适合以下条件的应用: 1) 数据量

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

相关推荐

随机推荐