用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文件如下所示:

<中国计算机世界出版服务公司通信录>
<计算机世界 contactID="2">
<部门名称>计算机室

<电话号码>139

<电子邮件>[email protected]

将上述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页面:

 1<html><body bgcolor="#a1bae6">
 2<xml id="xmldso" src='\"tele.xml\"'></xml>
 3<xml id="newid"></xml> <!--加载xml数据-->
 4<script language="JavaScript">   
 5newid.async = false;   
 6newid.load(\"newid.xml\");   
 7//增加记录;   
 8function addID(){   
 9var doc=xmldso.XMLDocument   
10var rootnode=doc.documentElement   
11var sortNode = rootnode.selectNodes(\"//部门名称\")   
12var currentid = sortNode.length-1   
13var cc=sortNode.item(currentid).text;   
14if ((cc==\"尚未输入\")||(cc==\"\"))   
15{   
16alert(\"请将最后一行数据填写完毕后再增加新的记录!\");   
17}   
18else   
19{   
20var node= newid.documentElement.childNodes(0).cloneNode(true);   
21var contactID=parseInt(sortNode.item(currentid).parentNode.getAttribute(\"contactID\"))+1;   
22node.setAttribute(\"contactID\",contactID);   
23xmldso.documentElement.appendChild(node);   
24}   
25}   
26//删除记录   
27function delID(whichFld){   
28var sortNode = xmldso.selectSingleNode(\"//计算机世界[@contactID=\'\"+whichFld+\"\']\");   
29if (sortNode.parentNode.childNodes.length>1) sortNode.parentNode.removeChild(sortNode);   
30}   
31</script>
32<script language='\"vbscript\"'>   
33Sub cc_onmouseup \'保存记录;   
34Dim objXML, objXSL, objFSO,strFile, strFileName, strXSL,strURL,TheForm   
35set SaveXMLDoc=xmldso.XMLDocument   
36strURL=\"dns2.asp\"   
37Set objXML = CreateObject(\"Microsoft.XMLHTTP\") \'创建MS的XMLHTTP组件;   
38objXML.Open \"post\",strURL,false \'采用Post提交方式;   
39objXML.setrequestheader \"content-type\",\"application/x-www-form-urlencoded\"   
40objXML.send SaveXMLDoc \' 发送信息,保存XML数据;   
41\'xmlGet = objXML.responsebody \'稍等片刻后,得到服务器端传回来的结果;   
42msgbox \"保存成功!\"   
43Set objXML = Nothing   
44end sub   
45</script>
46<center><b>计算机世界----通信录</b><br/><br/>
47<table border="" cellpadding="3" datasrc="\'#xmldso\'" id='\"table\"'>
48<!--进行数据绑定-->
49<thead><th>编号</th><th>部门名称</th><th>电话号码</th><th>电子邮件</th></thead>
50<tr>
51<td><acronym title="\'点击即可删除该记录\'"><input datafld='\"contactID\"' onclick='\"delID(this.value)\"' size="4" type="button"/></acronym></td>
52<td><input datafld='\"部门名称\"' type="TEXT"/></td>
53<td><input datafld='\"电话号码\"' type="TEXT"/></td>
54<td><input datafld='\"电子邮件\"' type="TEXT"/></td>
55</tr>
56</table>
57<input id="dd" name="dd" onmousedown='\"addID();\"' onmouseover='\"this.focus()\"' type="BUTTON" value='\"增加记录\"'/>
58<input id="cc" name="cc" type="BUTTON" 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显示数据:

 1<html><body bgcolor="#a1bae6">
 2<xml id="xmldso" src='\"tele.xml\"'></xml>
 3<center><b>计算机世界----通信录</b><br/><br/>
 4<table border="" cellpadding="3" datasrc="\'#xmldso\'" id='\"table\"'>
 5<thead><th>编号</th><th>部门名称</th><th>电话号码</th><th>电子邮件</th>
 6</thead>
 7<tr>
 8<td><label datafld='\"contactID\"'></label></td>
 9<td><label datafld='\"部门名称\"'></label></td>
10<td><label datafld='\"电话号码\"'></label></td>
11<td><label datafld='\"电子邮件\"'></label></td>
12</tr>
13</table>
14</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(显示通讯录):

 1<html><body bgcolor="#a1bae6">
 2<xml id="xmldso" src='\"tele.xml\"'></xml>
 3<center><b>计算机世界----通迅录</b><br/><br/>
 4<table border="" cellpadding="3" datasrc="\'#xmldso\'" id='\"table\"'>
 5<thead><th>编号</th><th>部门名称</th><th>电话号码</th><th>电子邮件</th>
 6</thead>
 7<tr>
 8<td><label datafld='\"contactID\"'></label></td>
 9<td><label datafld='\"部门名称\"'></label></td>
10<td><label datafld='\"电话号码\"'></label></td>
11<td><label datafld='\"电子邮件\"'></label></td>
12</tr>
13</table>
14</center></body></html>

二、dom.htm(在线编辑通讯录):

 1<html><body bgcolor="#a1bae6">
 2<xml id="xmldso" src='\"tele.xml\"'></xml>
 3<xml id="newid"></xml>
 4<script language="JavaScript">   
 5newid.async = false;   
 6newid.load(\"newid.xml\");   
 7function addID(){   
 8var doc=xmldso.XMLDocument   
 9var rootnode=doc.documentElement   
10var sortNode = rootnode.selectNodes(\"//部门名称\")   
11var currentid = sortNode.length-1   
12var cc=sortNode.item(currentid).text;   
13if ((cc==\"尚未输入\")||(cc==\"\"))   
14{   
15alert(\"请将最后一行数据填写完毕后再增加新的记录!\");   
16}   
17else   
18{   
19var node= newid.documentElement.childNodes(0).cloneNode(true);   
20var contactID=parseInt(sortNode.item(currentid).parentNode.getAttribute(\"contactID\"))+1;   
21node.setAttribute(\"contactID\",contactID);   
22xmldso.documentElement.appendChild(node);   
23}   
24}   
25function delID(whichFld){   
26var sortNode = xmldso.selectSingleNode(\"//计算机世界[@contactID=\'\"+whichFld+\"\']\");   
27if (sortNode.parentNode.childNodes.length>1) sortNode.parentNode.removeChild(sortNode);   
28}   
29</script>
30<script language='\"vbscript\"'>   
31Sub cc_onmouseup \'当点击“保存”按钮时触发;   
32Dim objXML, objXSL, objFSO,strFile, strFileName, strXSL,strURL,TheForm   
33set SaveXMLDoc=xmldso.XMLDocument   
34strURL=\"dns2.asp\"   
35Set objXML = CreateObject(\"Microsoft.XMLHTTP\") \'创建MS的XMLHTTP组件;   
36objXML.Open \"post\",strURL,false \'采用Post提交方式;   
37objXML.setrequestheader \"content-type\",\"application/x-www-form-urlencoded\"   
38objXML.send SaveXMLDoc \' 发送信息   
39\'xmlGet = objXML.responsebody \'稍等片刻后,得到服务器端传回来的结果;   
40msgbox \"保存成功!\"   
41Set objXML = Nothing   
42end sub   
43</script>
44<center><b>计算机世界----通信录</b><br/><br/>
45<table border="" cellpadding="3" datasrc="\'#xmldso\'" id='\"table\"'>
46<thead>
47<th>编号</th>
48<th>部门名称</th>
49<th>电话号码</th>
50<th>电子邮件</th>
51</thead>
52<tr>
53<td><acronym title="\'点击即可删除该记录\'"><input datafld='\"contactID\"' onclick='\"delID(this.value)\"' size="4" type="button"/></acronym></td>
54<td><input datafld='\"部门名称\"' type="TEXT"/></td>
55<td><input datafld='\"电话号码\"' type="TEXT"/></td>
56<td><input datafld='\"电子邮件\"' type="TEXT"/></td>
57</tr>
58</table>
59<input id="dd" name="dd" onmousedown='\"addID();\"' onmouseover='\"this.focus()\"' type="BUTTON" value='\"增加记录\"'/>
60<input id="cc" name="cc" type="BUTTON" value='\"保存\"'/></center></body></html>

三、dns2.asp(后台保存通讯录):

1   
2Set ReceivedDoc = CreateObject(\"Microsoft.XMLDOM\")   
3ReceivedDoc.async=False   
4ReceivedDoc.load Request   
5Set files=Server.CreateObject(\"Scripting.FileSystemObject\")   
6Set numtxt=files.CreateTextFile(Server.MapPath(\"tele.xml\"),True)   
7numtxt.WriteLine(replace(ReceivedDoc.xml,\"?>\",\" encoding=\"\"gb2312\"\"?>\"))   
8numtxt.Close   
9response.write ReceivedDoc.xml   

四、tele.xml(通讯录XML文档):

<中国计算机世界出版服务公司通信录>
<计算机世界 contactID="1">
<部门名称>电话总机

<电话号码>010-68130909

<电子邮件>[email protected]


五、newid.xml(通讯录XML初始化文档):

<中国计算机世界出版服务公司通信录>
<计算机世界 contactID="1">
<部门名称>尚未输入

<电话号码>保密

<电子邮件>保密

Published At
Categories with Web编程
Tagged with
comments powered by Disqus