- 浏览: 877619 次
- 性别:
- 来自: 青岛
文章分类
最新评论
-
chienchia:
请问下,第4步,vpn做了什么使数据包发送到真实网卡,而不会再 ...
如何使用Android系统自带的VPN服务框架 -
fangyafenqidai:
我只要选第二个就可以呢,怒需要选第一个。之后不会有啥问题。正常 ...
Android Studio 超级简单的打包生成apk -
michaelye1988:
不错,很棒!
getcachedir和getexternalcachedir的区别 -
whlei01:
文章棒棒哒
常用的AS3代码 -
whlei01:
很不错 之前打开及时600M的内存 ,现在打开只有300兆了 ...
flash builder内存不够的解决办法
摘要: HTML 是目前常用的网页标识语言,而 XML 的优点在于能有效地存贮各种形式的数据,它克服了 HTML 表达能力差的缺点。本文对在一个 HTML 文档中插入 XML 数据,并在 IE5 浏览器中显示的两种常见的策略(数据绑定、 DOM )进行了深入的探讨。
关键词: HTML XML DOM DSO 数据绑定
XML 的全名是 eXtenxible Markup Language (可以延伸或扩展的标记语言),它的语法类似 HTML ,都是用标签来描述数据。 HTML 的标签是固定的,我们只能使用、不能修改; XML 则不同,它没有预先定义好的标签可以使用,而是依据设计上的需要,自行定义标签。所以在电子商务的网络时代,用 XML 来组织数据,再用 HTML 页面来显示,将是设计网页的新方向。
本文主要对两种在 HTML 中存贮并显示 XML 文档数据的策略(数据绑定、 DOM )进行探讨。
一、 数据绑定( Data Binding )技术
数据绑定技术适用于结构规则的 XML 文档,它对 XML 文档的数据用类似于关系数据库的技术进行处理。
例如,有一个关于产品目录的 XML 文档( product.xml )结构如下:
……
<CATALOGUE>
<PRODUCT InStock=”yes”>
<PRODUCTID>00001</PRODUCTID>
<PRODUCTNAME Supplier=”fuller”>
football </PRODUCTNAME>
<PRICE> 50</PRICE>
……
</PRODUCT>
……
</CATALOGUE>
按下面介绍的两个步骤,可将 XML 文档和 HTML 文档绑定,并在 IE5 中显示 XML 文档的数据。
1. 把一个 XML 文档连接到一个 HTML 文档中
方法一:将整个 XML 文档插入至 HTML 文档中,其形式如下:
<HTML>
<HEAD>
<TITLE> product decription</TITLE>
</HEAD>
<BODY>
<XML ID=”product”>
<?XML version=”1.0”?>
…… ' 将以上的 product.xml 文档的内容插入至该处
</XML>
……
<BOLY>
</HTML>
方法二:只将一个对 XML 文档的引用插入至 HTML 文档中,其形式如下:
<HTML>
<HEAD>
<TITLE> product decription</TITLE>
</HEAD>
<BODY>
<XML ID=”product” SRC=”product.xml”> </XML> ' 用 src 指出引用的 XML 文档源
……
</BODY>
</HTML>
方法二的好处在于:它将 XML 文档的数据和 HTML 的显示格式分开,便于用户进行维护。而且,多个 HTML 文档可以共享一个 XML 文档。
当 IE5 打开一个 HTML 文档时,其内置的 XML 处理器会读取和分析页面中已连接的 XML 文档,然后产生一个数据源对象( DSO ,全称是 Data Source Object ),以便存贮和读取数据。 DSO 在存贮 XML 文档中的数据时,会将元素解释成记录和字段的集合,并自动抽取 XML 元素的数据和处理所有的显示细节。
2 .将标准的 HTML 元素(例如 TABLE 、 SPAN 等)和 XML 元素绑定
方法一:表数据绑定,即将 HTML 的 TABLE 元素和 XML 数据绑定,以便在 IE5 中用表格的形式一次性地显示整个 XML 文档的数据。
其形式如下:
……
<TABLE DATASRC=”#PRODUCT” BORDER=”1” ……>
<THEAD>
<TH> productid</TH>
……
</TH>
</THEAD> ' 显示表格的标题
<TR ALIGN=”center”>
<TD><SPAN DATAFLD=”productid”></SPAN></TD> ' 在表格单元格中显示 productid 的内容
……
</TR>
</TABLE>
……
方法二:单一记录数据绑定,即将 HTML 元素(如 SPAN 、 BUTTON 或 LABEL 等非表格元素)和 XML 文档中的一个单一的字段进行绑定,以便在 IE5 中一次只显示一条记录的内容。此时,为了浏览方便,最好在页面中增加关于记录的导航按钮。
其形式如下:
……
<SPAN STYLE=”font-style:italic”> ProductID</SPAN> ' 显示标题
<SPAN DATASRC=”#product” DATAFLD=”productid”
STYLE=”font-weight:bold”></SPAN> ' 显示 productid 的内容
……
<BUTTON ONLICK=”product.recordset.moveprevious();
if (product.recordset.bof)
product.recordset.movenext()”>
<back;
</BUTTON> ' 产生一个向前导航的按钮
……
注意:当用数据绑定技术显示 XML 文档数据时,如果 XML 元素中有参数,则 DSO 会将该元素处理成层次型的记录。例如: product.xml 文档中的“ PRODUCTNAME ”元素有一个“ Supplier ”参数,则 DSO 会将该元素处理成下面的形式:
<PRODUCTNAME>
<Supplier> fuller</Supplier>
<$TEXT>football</$TEXT>
</PRODUCTNAME>
此时,必须用 $TEXT 作为字段名来读取“ football ”数据,其形式如下:
……
<TABLE DATASRC=”#product” DATAFLD=”productname”>
<TR>
<TD><SPAN DATAFLD=”$TEXT”></SPAN></TD>
<TD><SPAN DATAFLD=”Supplier”></SPAN></TD>
</TR>
<TABLE>
……
二、 DOM 技术
1 . DOM 技术的特点
DOM 是 XML Document Object Model 的简称。它是 XML 文档和 HTML 文档的接口,其中包含一系列代表 XML 文档不同部件的程序对象。利用这些对象的属性和方法,并使用脚本语言(如 VBScript 或 JavaScript 等)编制成脚本后,就可以在一个 HTML 页面中显示 XML 文档的数据。虽然利用 DOM 技术比数据绑定技术复杂,但它可以处理及显示结构规则或不规则的 XML 文档中任意部件(如元素、参数、处理指示、注释、实体和标记等)的数据内容,
和数据绑定技术类似,要使用 DOM 技术,必须首先对 XML 文档源进行引用:
<XML ID=”product” SRC=”product.xml”></XML> ' 对 XML 文档源的引用
接着,就可以利用 DSO 的 XMLDocument 成员使用 DOM :
Document=product.XMLDocument
作为 W3C 的标准接口规范,目前, DOM 由三部分组成,包括:核心( core )、 HTML 和 XML 。核心部分是结构化文档比较底层对象的集合,这一部分所定义的对象已经完全可以表达出任何 HTML 和 XML 文档中的数据。 HTML 接口和 XML 接口两部分则是专为操作具体的 HTML 文档和 XML 文档而提供的高级接口,它们可以使得对这两类文件的操作更加方便。
当 DOM 对 XML 文档进行分析之后,不管这个文档有多简单或者多复杂,其中的信息都会被转化成一棵对象节点树(如图 1 )。在这棵节点树中,有一个名为 Document 根节点,所有其他的节点都是根节点的后代节点。 DOM 实际上是利用对象来把文档模型化,这些模型不仅描述了文档的结构,还定义了模型中对象的行为。换句话说,图 1 中的节点不是数据结构,而是对象。 DOM 接口利用对象中包含的方法和属性,就可以访问、修改、添加、删除、创建树中的节点和内容。
在 DOM 接口规范中,有四个基本的接口: Document , Node , NodeList 以及 NamedNodeMap 。其中, Document 接口是对文档进行操作的入口。它是从 Node 接口继承过来的。 Node 接口是其他大多数接口的父类,象 Documet , Element , Attribute , Text , Comment 等接口都是从 Node 接口继承过来的。 NodeList 接口是一个节点的集合,它包含了某个节点中的所有子节点。 NamedNodeMap 接口也是一个节点的集合,通过该接口,可以建立节点名和节点之间的一一映射关系,从而利用节点名就可以直接访问特定的节点。
图1
2 .利用 DOM 对 XML 文档的数据进行处理
(1) 对 XML 某个元素的数据进行处理
其形式如下:
productid.innerText=DocumentElement.childNodes(0).text; ' 取得 productid 的数据,并将它赋给 HTML SPAN 元素的 innerText 属性
<SPAN ID=”productid” STYLE=”font-weight:bold”></SPAN> ' 显示 productid 的数据
(2) 对 XML 文档中同名元素的所有数据进行处理
其形式如下:
Nodelist=Document.getElementsByTagName(“productname”); ' 取得所有 productname 的数据,并形成一个 Nodelist 集合
For(i=0;i<Nodelist.length;++i)
ResultHTML+=Nodelist(i).xml+”\n\n”;
ResultDiv.innerText=ResultHTML; ' 用循环语句显示所有 productname 的数据
(3) 对 XML 元素的参数数据进行处理
其形式如下:
NamedNodeMap=Document.DocumentElement.childNodes(0).attributes; ' 取得所有 product 的参数,并形成一个 NamedNodeMap 集合
For(i=0;i<NamedNodeMap.length;++i)
Alert(NamedNodeMap.getNameItem(i).nodeValue); ' 用循环语句显示所有 product 参数的数据
如果在参数中包含有实体,则应采用下列形式对 XML 的实体和实体中的标记进行访问:
Attribute=Document.DocumentElement.childNodes(0).attributes(0); ' 取得 product 元素的参数
If(attribute.datatype==”entity”) ' 检测参数的类型是否为 entity 类型
Entity=Document.doctype.entities.getNameItem(attribute.nodeValue); ' 取得 XML 文档的 DTD 声明中的某个实体的名字
DisplayText=Entity.attributes.getNameItem(“SYSTEM”).nodeValue; ' 取得该实体中 system 的源文件数据
NotationName=Entity.attributes.getNameItem(“NDATA”).nodeValue; ' 取得该实体中 NDATA 标记的名字
三、结束语
目前,有三种途经可以在 IE5 中显示 XML 文档的数据:样式单、数据绑定及 DOM 。样式单的特点是单独设计一个用于处理显示格式的样式单( CSS 样式单或 XSL 样式单),然后在 XML 文档中对样式单进行引用;而后面两种技术的特点是利用 HTML 文档对 XML 存贮的数据进行显示,这样,可以将 XML 和 HTML 相结合,充分利用 XML 和 HTML 各自的优点。
参考书目:
(1) Natanya Pirts 编 . XML 轻松进阶 . 电子工业出版社 . 2000 年月 1 月
(2) Jake Sturm 编 . XML 解决方案 . 北京大学出版社 . 2001 年 4 月
发表评论
-
微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
2018-04-12 17:13 1748此类事件是手机touchmove默认事件行为,可以通过js代 ... -
判断横屏竖屏(三种)
2018-04-10 19:29 1设置页面竖屏或者横屏:portrait:竖屏 ... -
html中通过js获取接口JSON格式数据解析以及跨域问题
2016-11-07 14:43 3001前言:本人自学前端 ... -
网页中插入Flash中<object>标签属性
2014-04-14 10:43 789网页中插入Flash中<obje ... -
Html网页图片滚动代码
2013-04-08 14:26 4483<!--下面是向上滚动代码--> <div ... -
网页中插入FLASH(swf文件)的html代码【二】
2013-04-05 14:01 1440一、简单插入flash图像 <embed src=& ... -
网页中插入FLASH(swf文件)的html代码【一】
2013-04-05 13:40 6200HTML向FLASH传参数的三种方法 原文来处 一、S ... -
getURL或navigateToURL弹出窗口被IE拦截的解决方法
2012-08-16 20:48 1863方法一:通过设置wmode可以解决问题:当wmode=’win ... -
window.location详细介绍
2012-08-13 14:56 1026window.location方法获取URL ... -
Request、Request.Form和Request.QueryString的区别
2012-08-13 14:46 1304Request、Request.Form和Request.Q ... -
js屏蔽(禁止)键盘和鼠标功能键,如屏蔽鼠标右键,F5刷新等
2012-04-01 16:44 2416<!DOCTYPE HTML PUBLIC " ... -
禁止鼠标多次点击选中div中的文字
2012-03-30 16:09 4692<!DOCTYPE html><html&g ... -
html 禁止选择图片
2012-03-30 16:05 1如下: [code="java"] ... -
JS 简单的缓动效果
2012-01-31 14:07 1200<!DOCTYPE HTML> <html ... -
JavaScript 兼容IE、FireFox、Chrome等浏览器的xml处理函数
2012-01-11 16:25 1780在编写处理xml的网页时,经常为浏览器兼容性头疼。于是我将常用 ... -
iframe框架取值兼容ie/firefox/chrome的写法
2012-01-11 16:21 1555iframe框架内页: 引用<html> < ... -
AS3和JS互相调用的小技巧 【一】
2011-08-26 14:04 3717我对chm帮助手册小解: 选择“文件”>“新建”> ... -
Frame、Iframe、Frameset 的区别
2010-01-09 17:12 1661框架页有Frame、Iframe、Fr ...
相关推荐
另外,在基于XML 语言和web 数据库的一般策略的基础之上,分析了基于XML 的数据库交换数据的安全需求。同时,介绍了XML 安全服务标准和针对XML 数据交换的请求/响应机制,并提出了相应的控制措施,以保证XML 数据库...
《XML入门经典(第4版)》能帮助您快速从XML的基础知识提升到更为高级的编程技术中,您将深入钻研XML和数据库的使用艺术,包括如何查询XML信息、检索XML数据和创建新的XML文档等等。此外,您还将学会如何在Web上发布...
《XML入门经典(第4版)》能帮助您快速从XML的基础知识提升到更为高级的编程技术中,您将深入钻研XML和数据库的使用艺术,包括如何查询XML信息、检索XML数据和创建新的XML文档等等。此外,您还将学会如何在Web上发布...
《XML入门经典(第4版)》能帮助您快速从XML的基础知识提升到更为高级的编程技术中,您将深入钻研XML和数据库的使用艺术,包括如何查询XML信息、检索XML数据和创建新的XML文档等等。此外,您还将学会如何在Web上发布...
《XML入门经典(第4版)》能帮助您快速从XML的基础知识提升到更为高级的编程技术中,您将深入钻研XML和数据库的使用艺术,包括如何查询XML信息、检索XML数据和创建新的XML文档等等。此外,您还将学会如何在Web上发布...
本项目致力于研究并优化车联网在边缘节点下的协同数据下载策略。项目主要采用C语言进行开发,同时融合了C++、Python、Shell、HTML、Lua等多语言支持,以增强系统的灵活性与功能多样性。总计包含527个文件,其中代码...
《XML入门经典(第4版)》能帮助您快速从XML的基础知识提升到更为高级的编程技术中,您将深入钻研XML和数据库的使用艺术,包括如何查询XML信息、检索XML数据和创建新的XML文档等等。此外,您还将学会如何在Web上发布...
JSON和XML数据的解析 动态网页爬取技术(如使用Selenium等) 反爬机制与应对策略 反爬机制的类型和常见手段 User-Agent设置和IP代理的应用 验证码自动识别方法 文件IO操作 文件读写基本操作 CSV和Excel文件的处理 ...
在ActionScript中使用XML的示例:从Internet加载RSS数据 第章:使用本机JSON功能 JSONAPI概述 定义自定义JSON行为 第章:处理事件 事件处理基础知识 ActionScript事件处理与早期版本事件处理的不同之处 事件流 事件...
JSON和XML数据的解析 动态网页爬取技术(如使用Selenium等) 反爬机制与应对策略 反爬机制的类型和常见手段 User-Agent设置和IP代理的应用 验证码自动识别方法 文件IO操作 文件读写基本操作 CSV和Excel文件的处理 ...
如何把数据库中的数据以Excel文件的格式在显示浏览器中 129.如何给DataGrid控件添加个标题并实现分类显示 130.如何实现DataGrid控件中DropDownList控件的联动 131.DataGrid控件使用综合举例 第7章 ...
15.全站使用UTF-8国际编码,不管在国内的中文环境还是在国外的英文环境,网站都能正常显示; 16.网站搜索功能进行了整合; 17.优化了企业地址导航地图; 18.后台新增网站推广功能,更有利于企业网站的排名和收录; 19.对全...
128.如何把数据库中的数据以Excel文件的格式在显示浏览器中 129.如何给DataGrid控件添加个标题并实现分类显示 130.如何实现DataGrid控件中DropDownList控件的联动 131.DataGrid控件使用综合举例 第7章 数据绑定...
JSON和XML数据的解析 动态网页爬取技术(如使用Selenium等) 反爬机制与应对策略 反爬机制的类型和常见手段 User-Agent设置和IP代理的应用 验证码自动识别方法 文件IO操作 文件读写基本操作 CSV和Excel文件的处理 ...
15.全站使用UTF-8国际编码,不管在国内的中文环境还是在国外的英文环境,网站都能正常显示; 16.网站搜索功能进行了整合; 17.优化了企业地址导航地图; 18.后台新增网站推广功能,更有利于企业网站的排名和收录; 19.对全...
JSON和XML数据的解析 动态网页爬取技术(如使用Selenium等) 反爬机制与应对策略 反爬机制的类型和常见手段 User-Agent设置和IP代理的应用 验证码自动识别方法 文件IO操作 文件读写基本操作 CSV和Excel文件的处理 ...