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

陌生人河北人

陌生人河北人

2016-02-19 21:15

下面是个用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页面:
  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

  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
  

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  3、实际使用过程中,还需要增加一个显示通讯录的网页index.htm,其实就是上面dom.htm的简化版,去除所有增加、删除、修改和保存功能,只在表格单元格中用LABEL显示数据:
  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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  四、使用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(显示通讯录):
  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"
  部门名称尚未输入/部门名称
  电话号码保密/电话号码
  电子邮件保密/电子邮件
  /计算机世界
  /中国计算机世界出版服务公司通信录
  

展开更多 50%)
分享

猜你喜欢

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

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

qq通讯录怎么用?

手机软件 应用软件
qq通讯录怎么用?

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

群友通讯录怎么录入通讯录

手机软件 应用软件
群友通讯录怎么录入通讯录

群友通讯录怎么创建家族通讯录

手机软件 应用软件
群友通讯录怎么创建家族通讯录

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

iPhone通讯录/应用/数据备份教程

iphone iPhone 5s iPhone 6 iphone刷机
iPhone通讯录/应用/数据备份教程

通讯录的源代码(用链表实现)

编程语言 网络编程
通讯录的源代码(用链表实现)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何快速通过XSL转换XML文件

如何快速通过XSL转换XML文件

将改变我们生活的这些XML应用之二

将改变我们生活的这些XML应用之二
下拉加载更多内容 ↓