asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0

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

关键词XML    Dom                                          

一般情况下,如果要为网站提供一个通讯录程序,需要使用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">
<部门名称>尚未输入</部门名称>
<电话号码>保密</电话号码>
<电子邮件>保密</电子邮件>
</计算机世界>
</中国计算机世界出版服务公司通信录>

/html>
posted on 2006-04-18 10:53 汪杰 阅读(511) 评论(1)  编辑 收藏 引用 所属分类: xml

FeedBack:
# re: 用XML数据岛结合Dom制作通讯录
2009-03-16 10:13 | 《数字技术与应用》征稿函
《数字技术与应用》征稿函
国际刊号ISSN1007-9416 国内刊号CN12-1369/TN。邮发代号:6-251
国家级学术期刊 数字信息、技术教育交流平台

《数字技术与应用》杂志是天津市电子仪表信息研究所主办的国家级学术期刊。是一本反映数字技术、应用研究的教育刊物。本刊为月刊
本刊被《中国核心期刊(遴选)数据库》《中国学术期刊(光盘版)》《万方数据数字化期刊群》《中文科技期刊数据库》等网络媒体全文收录,国内外深有影响。
【办刊宗旨】
《数字技术与应用》是面向数字科技、高端技术教育工作者的国家级学术刊物。旨在推广数字新技术、科技新理念,为广大教育、科研工作者提供学术交流平台,推动数字科技教育事业发展,我刊愿与社会各界合作,携手共进。
【主要栏目】
数字技术、应用研究、科教创新、管理观察、教育时空、学术论坛、工业工程、体育与艺术
【征稿对象】
全国各大院校及科研院所的教科研人员,教授、副教授、硕士生、博士生相关的技术人员、研发人员、管理者等。本刊欢迎就新理论、新技术、新科教技术应用发表真知灼见。
【来稿须知】
① 稿件应具有科学性、技术教育性、数字技术应用性和实用性,论点明确、论据可靠、数据准确、逻辑严谨、文字通顺。
② 论文2200—6000字符数为宜,来稿请使用word排版,并请注明作者姓名、单位、通讯地址、邮编、电子信箱、联系电话等,本刊欢迎网上投稿。本刊已被《中国核心期刊(遴选)数据全文收录
③ 论文的基本要素齐全,文章标题、作者单位、作者姓名、关键词、摘要、结语、参考文献等。
④ 所投稿件请保证文章版权的独立性,无抄袭、署名排序无争议、文责自负,请勿一稿多投!
*来稿无论我刊选用与否,都会在5个工作日内将审理结果尽快通知作者,作者也可来电查询,以免影响正常发表。
【网上查证】
登陆以下官方网站可对《数字技术与应用》进行网上查询。
中国新闻总署: www.gapp.gov.cn/
优秀稿件我们会提交参选我社论文评优活动,获奖作品颁布发荣誉证书。
详情请来电来函咨询:13041165487 010-680955582〈 转分机101 〉
E-mail:shuzijishu2009@yahoo.com.cn

【联系方式】

联系人:叶燕.编辑 工作QQ:924672991
手机:13041165487
电话:010-80955582 转101 传真:010-59679784
投稿信箱:shuzijishuyeyan@sina.com
shuzijishu09@yahoo.com.cn
地址:北京市朝阳区壹线国际3-605室
邮编:100013


【来稿格式】
论文题目(宋体:3号字)
基金项目
作者姓名、单位、地址、邮编
关键词:xxx(宋体,5号字)
摘 要:xxx(宋体,5号字,300字以内)
正 文:……(宋体,5号字,正文字数不少于2200)
注 释:采用尾注形式,需注明引文出处、作者、出版社、页码(宋体,5号)
作者简介:姓名(出生年月)、性别、学历、职称、研究方向;单位名称、通信地址、邮政编码、联系电话、E-mail。  回复  更多评论
  
只有注册用户登录后才能发表评论。

<2018年11月>
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 380267
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜