社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > 後端開發 > XML/RSS教程 > 透過XML資料島和Dom製作通訊錄的程式碼實例詳解

透過XML資料島和Dom製作通訊錄的程式碼實例詳解

黄舟
發布： 2017-03-25 10:36:08
原創
1595 人瀏覽過

一般情况下，如果要为网站提供一个通讯录程序，需要使用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> <!--加载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=&#39;"+whichFld+"&#39;]"); 
if (sortNode.parentNode.childNodes.length>1) sortNode.parentNode.removeChild(sortNode);  
} 
</SCRIPT> 
<script language="vbscript"> 
Sub cc_onmouseup &#39;保存记录； 
Dim objXML, objXSL, objfso,strFile, strFileName, strXSL,strURL,TheForm 
set SaveXMLDoc=xmldso.XMLDocument 
strURL="dns2.asp" 
Set objXML = CreateObject("Microsoft.XMLHTTP") &#39;创建MS的XMLHTTP组件； 
objXML.Open "post",strURL,false &#39;采用Post提交方式； 
objXML.setrequestheader "content-type","application/x-www-form-urlencoded" 
objXML.send SaveXMLDoc &#39; 发送信息，保存XML数据； 
&#39;xmlGet = objXML.responsebody &#39;稍等片刻后，得到服务器端传回来的结果； 
msgbox "保存成功！"  
Set objXML = Nothing 
end sub  
</SCRIPT> 
<center><b>计算机世界----通信录</b><br><br> 
<TABLE id="table" DATASRC=&#39;#xmldso&#39; BORDER CELLPADDING=3> 
<!--进行数据绑定--> 
<THEAD><TH>编号</TH><TH>部门名称</TH><TH>电话号码</TH><TH>电子邮件</TH></THEAD> 
<TR> 
<TD><acronym title=&#39;点击即可删除该记录&#39;><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") &#39;创建 XML DOM实例； 
ReceivedDoc.async=False 
ReceivedDoc.load Request &#39;接收XML数据； 
Set files=Server.CreateObject("Scripting.FileSystemObject") 
Set numtxt=files.CreateTextFile(Server.MapPath("tele.xml"),True) 
numtxt.WriteLine(replace(ReceivedDoc.xml,"?>"," encoding=""gb2312""?>")) &#39;将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=&#39;#xmldso&#39; 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=&#39;#xmldso&#39; 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=&#39;"+whichFld+"&#39;]"); 
if (sortNode.parentNode.childNodes.length>1) sortNode.parentNode.removeChild(sortNode);  
} 
</SCRIPT> 
<script language="vbscript"> 
Sub cc_onmouseup &#39;当点击“保存”按钮时触发； 
Dim objXML, objXSL, objFSO,strFile, strFileName, strXSL,strURL,TheForm 
set SaveXMLDoc=xmldso.XMLDocument 
strURL="dns2.asp" 
Set objXML = CreateObject("Microsoft.XMLHTTP") &#39;创建MS的XMLHTTP组件； 
objXML.Open "post",strURL,false &#39;采用Post提交方式； 
objXML.setrequestheader "content-type","application/x-www-form-urlencoded" 
objXML.send SaveXMLDoc &#39; 发送信息 
&#39;xmlGet = objXML.responsebody &#39;稍等片刻后，得到服务器端传回来的结果； 
msgbox "保存成功！"  
Set objXML = Nothing 
end sub  
</SCRIPT> 
<center><b>计算机世界----通信录</b><br><br> 
<TABLE id="table" DATASRC=&#39;#xmldso&#39; BORDER CELLPADDING=3> 
<THEAD> 
<TH>编号</TH> 
<TH>部门名称</TH> 
<TH>电话号码</TH> 
<TH>电子邮件</TH> 
</THEAD> 
<TR> 
<TD><acronym title=&#39;点击即可删除该记录&#39;><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制作通讯录的代码实例详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！

相关文章：

php实现在线通讯录功能（附源码），通讯录源码

详解HTML5通讯录获取指定多个人的信息的示例代码

js实现做通讯录的索引滑动显示效果和滑动显示锚点效果

相關標籤：
XML，Dom，通讯录
來源：php.cn
上一篇：詳細介紹使用XMLHTTP發送超長XML表單資料的詳解 下一篇：教你怎樣快速從一個XML檔中找出資訊的詳細介紹
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
2
2031
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2195
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1849
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1741
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1763
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板