通过XML数据岛和Dom制作通讯录的代码实例详解
<?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文档。
<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>２、服务器端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</电子邮件> </计算机世界> </中国计算机世界出版服务公司通信录>
****************************************************************************
<?xml version="1.0" encoding="gb2312"?> <中国计算机世界出版服务公司通信录> <计算机世界 contactID="1"> <部门名称>尚未输入</部门名称> <电话号码>保密</电话号码> <电子邮件>保密</电子邮件> </计算机世界> </中国计算机世界出版服务公司通信录>
以上就是用XML数据岛结合Dom制作通讯录的代码实例详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！
相关文章：
php实现在线通讯录功能（附源码），通讯录源码
详解HTML5通讯录获取指定多个人的信息的示例代码
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
相关资讯
技术文章 / 下载软件
趣味内容 / 专业带飞
