新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
  •   Add to Google

    >> 本版讨论DOM, SAX, XPath等。
    [返回] 中文XML论坛 - 专业的XML技术讨论区XML.ORG.CN讨论区 - XML技术『 DOM/SAX/XPath 』 → 用XML数据岛结合Dom制作通讯录 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 34604 个阅读者浏览上一篇主题  刷新本主题   平板显示贴子 浏览下一篇主题
     * 贴子主题: 用XML数据岛结合Dom制作通讯录 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     hsower 帅哥哟,离线,有人找我吗?狮子座1983-8-21
      
      
      威望:7
      等级:大四寒假(收到IBM的Offer啦)
      文章:72
      积分:1606
      门派:XML.ORG.CN
      注册:2004/4/3

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给hsower发送一个短消息 把hsower加入好友 查看hsower的个人资料 搜索hsower在『 DOM/SAX/XPath 』的所有贴子 引用回复这个贴子 回复这个贴子 查看hsower的博客楼主
    发贴心情 用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动态验证通讯录数据。

    全部源程序
    *******************************************************************
    一、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">
    <部门名称>尚未输入</部门名称>
    <电话号码>保密</电话号码>
    <电子邮件>保密</电子邮件>
    </计算机世界>
    </中国计算机世界出版服务公司通信录>


       收藏   分享  
    顶(0)
      




    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2005/1/21 0:59:00
     
     GoogleAdSense狮子座1983-8-21
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 DOM/SAX/XPath 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2024/3/28 16:30:08

    本主题贴数11,分页: [1] [2]

     *树形目录 (最近20个回帖) 顶端 
    主题:  用XML数据岛结合Dom制作通讯录(10841字) - hsower,2005年1月21日
        回复:  我 一模一样的把你源文件 放到文件中INDEX.HTM 可以看到数据 但DOM.HTM 确无法..(136字) - zhangleking,2005年12月27日
        回复:  [求助]土问:如何部署(163字) - bsat,2005年12月17日
        回复:  谢谢了啊!(10字) - lazyy,2005年9月9日
        回复:  好的(4字) - 奉旨灌水,2005年9月2日
        回复:  thank you.(10字) - jr_liang,2005年8月4日
        回复:  我也要JSP的(11字) - bsspirit,2005年5月16日
        回复:  还的努力啊我说我自己呢!!!(30字) - lili,2005年5月12日
        回复:  哦,看来我学的还不够深啊(24字) - lili,2005年5月12日
        回复:  有没有用jsp 编写的代码啊,?急用,谢谢了(37字) - tjl2000,2005年5月8日
        回复:  非常感谢,正是我需要的(22字) - miniJJ,2005年3月27日

    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    78.125ms