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

【 tulaoshi.com - 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标准中没有明确定义的接口，不同解析器的实现方法可能会有所差别。

　　二、具体流程为：
　　１、定义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页面：
　　HTMLBODY 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.length1) 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
　　centerb计算机世界----通信录/bbrbr
　　TABLE id="table" DATASRC='#xmldso' BORDER CELLPADDING=3
　　!--进行数据绑定--
　　THEADTH编号/THTH部门名称/THTH电话号码/THTH电子邮件/TH/THEAD
　　TR
　　TDacronym title='点击即可删除该记录'INPUT TYPE=button size=4 DATAFLD="contactID" onclick="delID(this.value)"/acronym/TD
　　TDINPUT TYPE=TEXT DATAFLD="部门名称"/TD
　　TDINPUT TYPE=TEXT DATAFLD="电话号码"/TD 
　　TDINPUT 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的简化版，去除所有增加、删除、修改和保存功能，只在表格单元格中用ＬＡＢＥＬ显示数据：
　　HTMLBODY bgColor=#a1bae6
　　XML id=xmldso src="tele.xml"/XML
　　centerb计算机世界----通信录/bbrbr
　　TABLE id="table" DATASRC='#xmldso' BORDER CELLPADDING=3
　　THEADTH编号/THTH部门名称/THTH电话号码/THTH电子邮件/TH
　　/THEAD
　　TR
　　TDlabel DATAFLD="contactID"/label/TD
　　TDlabel DATAFLD="部门名称"/label/TD
　　TDlabel DATAFLD="电话号码"/label/TD 
　　TDlabel 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（显示通讯录）:
　　HTMLBODY bgColor=#a1bae6
　　XML id=xmldso src="tele.xml"/XML
　　centerb计算机世界----通迅录/bbrbr
　　TABLE id="table" DATASRC='#xmldso' BORDER CELLPADDING=3
　　THEADTH编号/THTH部门名称/THTH电话号码/THTH电子邮件/TH
　　/THEAD
　　TR
　　TDlabel DATAFLD="contactID"/label/TD
　　TDlabel DATAFLD="部门名称"/label/TD
　　TDlabel DATAFLD="电话号码"/label/TD 
　　TDlabel DATAFLD="电子邮件"/label/TD
　　/TR
　　/TABLE
　　/center/BODY/HTML
　　****************************************************************************
　　二、dom.htm（在线编辑通讯录）：
　　HTMLBODY 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.length1) 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
　　centerb计算机世界----通信录/bbrbr
　　TABLE id="table" DATASRC='#xmldso' BORDER CELLPADDING=3
　　THEAD
　　TH编号/TH
　　TH部门名称/TH
　　TH电话号码/TH
　　TH电子邮件/TH
　　/THEAD
　　TR
　　TDacronym title='点击即可删除该记录'INPUT TYPE=button size=4 DATAFLD="contactID" onclick="delID(this.value)"/acronym/TD
　　TDINPUT TYPE=TEXT DATAFLD="部门名称"/TD
　　TDINPUT TYPE=TEXT DATAFLD="电话号码"/TD 
　　TDINPUT 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"
　　部门名称尚未输入/部门名称
　　电话号码保密/电话号码
　　电子邮件保密/电子邮件
　　/计算机世界
　　/中国计算机世界出版服务公司通信录