XML技术及应用 第8章_XML结合JavaScript的应用.ppt

《XML技术及应用 第8章_XML结合JavaScript的应用.ppt》由会员分享，可在线阅读，更多相关《XML技术及应用 第8章_XML结合JavaScript的应用.ppt（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、XML技术及应用第八章XML结合JavaScript的应用水利水电出版社水利水电出版社水利水电出版社水利水电出版社古凌岚、罗佳等编著知识要点o数据岛oXML数据的嵌入与读取o结合JavaScript脚本的应用8.1XML数据岛的应用oXML数据的嵌入和读取数据的嵌入和读取数据岛：是一个XML标签元素，该元素含一个ID属性，用于指定该数据岛的名称，元素中的内容即为XML代码。将XML数据嵌入HTML：内嵌方式和外部引用方式。o内嵌方式例如：春天天籁之声音像公司8.1XML数据岛的应用oXML数据的嵌入和读取数据的嵌入和读取o外部引用方式：在XML标签中通过SRC属性引用，该属性既可以引用本地的文

2、件，也可以指定一个URL例1，SRC属性引用本地的XML文件：例2，引用一个远程服务器上的XML文件：8.1XML数据岛的应用oXML数据的嵌入和读取数据的嵌入和读取获取HTML中数据岛的内容o采用数据绑定的方法，将数据控件（数据岛）与HTML元素建立起一种联系，数据控件负责管理数据，并为HTML元素提供数据，而HTML元素则负责在浏览器上显示数据o数据绑定的实现需要设置两个属性：DATASRC指定要绑定的数据源，并要求数据源名要加“#”前缀；DATAFLD指定绑定数据控件的具体字段，字段是指数据控件所管理数据中的列，也可以理解为数据库表中的列。8.1XML数据岛的应用o实实例例：在在网网页页

3、定定制制XML格格式式图图书书信信息息的的显显示方式示方式问题问题书店管理系统中网上图书浏览功能，要求按照指定的样式显示图书详细信息，图书详细信息存放在BOOKLIB_1.xml文件，指定格式要求：（1）显示图书的ISBN、书名、作者、价格以及出版社（2）表格显示，要求有标题（3）表格底色为淡红色8.1XML数据岛的应用实现效果实现效果8.1XML数据岛的应用分析分析确定图书信息显示的机制图书信息显示完整代码8.1XML数据岛的应用解决解决o确定图书信息显示的机制将XML数据岛嵌入HTML页面，即显示内容以XML文档数据为原始依据，表现形式使用HTML元素来实现。8.1XML数据岛的应用图书信

4、息显示o采用外部引用方式，嵌入图书信息XML数据岛的语句为：o采用HTML表格显示数据8.1XML数据岛的应用完整代码（略）8.1XML数据岛的应用o单元练习单元练习酒店管理系统要求在网上，客户可以浏览酒店所有房间的信息，以便订房。请按指定格式显示客房信息。格式要求：（1）显示房间的类型、房价、位置（2）表格显示8.2结合结合JavaScript的应用的应用DataPageSize属性属性TABLE元元 素素 的 DataPageSize属属 性性 也也 是是HTML对对数数据据岛岛的的支支持持属属性性，指指定定每每页页记记录录条条数数transformNode方法方法o若若XML数据显示需要

5、设置显示格式，可通过以下数据显示需要设置显示格式，可通过以下几步实现：几步实现：1.创建创建XSLT2.引用引用XML，引用，引用XSLT3.利用利用XSLT对数据岛中的数据进行转换，通过对数据岛中的数据进行转换，通过HTML元元素可输出指定的表现形式素可输出指定的表现形式8.2结合结合JavaScript的应用的应用transformNode方法方法o第三步中对数据岛的数据转换，可采用第三步中对数据岛的数据转换，可采用DOMDocument类的类的transformNode()方法方法o实现方式：musicXML.transformNode(musicXSLT.XMLDocument);说明

6、：其中musicXML、musicXSLT分别为数据岛、XSLT的ID。8.2结合结合JavaScript的应用的应用实例：控制图书信息显示方式实例：控制图书信息显示方式问题问题书店管理系统中，网上浏览图书信息的方式可以根据客户需要，变换显示方式为列表或表格。8.2结合结合JavaScript的应用的应用实现效果实现效果表格显示列表显示8.2结合结合JavaScript的应用的应用分析分析创建表格和列表的XSLT引用数据岛，XSLT创建脚本，实现XSLT对数据岛的数据转换8.2结合结合JavaScript的应用的应用解决解决o创建表格和列表的XSLTo表格表格XSLT文件文件bookTable

7、.xsl1.2.4.5.6.7.ISBN8.书名书名9.作者作者10.价格价格11.出版社出版社12.13.14.15.16.17.18.19.20.21.22.23.24.o列表列表XSLT文件文件bookLi.xsl1.2.4.5.6.7.8.9.10.11.12.13.14.15.16.17.8.2结合结合JavaScript的应用的应用8.2结合结合JavaScript的应用的应用引用数据岛、XSLTo引用数据岛语句为：o使用表格显示方式，引用XSLT的语句：o使用列表显示方式，引用XSLT的语句：8.2结合结合JavaScript的应用的应用创建脚本，实现XSLT对数据岛的数据转换o

8、在脚本中调用transformNode方法，实现数据岛数据的XSLT转换，o将结果通过HTML元素如DIV或SPAN的属性innerHTML，在相应的区域显示。8.2结合结合JavaScript的应用的应用o单元练习单元练习酒店想通过网络实现在线订房。需要显示其客房详细信息。这些详细信息包括客房编号、客房标准编号、客房状态、备注。客户可以选择以表格形式还是子列表形式查看产品的详细信息。8.2结合结合JavaScript的应用的应用o实例：实现指定条件的图书详细信息浏览问题问题书店管理系统中的图书量很大，客户对于感兴趣的图书，可以通过选择图书名称，了解该图书的详细信息。8.2结合结合JavaSc

9、ript的应用的应用实现效果实现效果图书列表下拉控件图书详细信息8.2结合结合JavaScript的应用的应用分析分析根据问题场景，将采用下拉控件显示图书名称，并根据所选项，读取相应记录并显示。创建下拉控件，并初始化为图书名称列表根据图书名称，获取相应的图书详细信息显示图书详细信息完整代码8.2结合结合JavaScript的应用的应用解决解决o创建下拉控件，并初始化为图书名称列表实现下拉控件的代码段：varstr=;for(vari=0;isNode.length;i+)str+=+sNode.item(i).firstChild.nodeValue+;str+=;8.2结合结合JavaScr

10、ipt的应用的应用根据图书名称，获取相应的图书详细信息o要读取图书节点集o根据图书名称的序号，读对应记录的详细内容o例：varbisbn=resultNode.item(i).attributes.getNamedItem(ISBN).valuevarbnameNode=resultNode.item(i).firstChild;varbname=bnameNode.firstChild.nodeValue;8.2结合结合JavaScript的应用的应用显示图书详细信息o采用表格形式，来显示图书详细信息，这里要注意数据是通过脚本得到，所以显示格式的设置也需要在脚本中实现o例：/指定图书的详细信息存入字符串bookDetailvarbookDetail=+bisbn+;bookDetail+=bname+bauthor+bpublish+bprice+;bookDetail+=bquantity+bplace+;8.2结合结合JavaScript的应用的应用完整代码（略）8.2结合结合JavaScript的应用的应用o单元练习单元练习酒店管理系统中，由于客流量大，工作人员需要随时了解入住情况，要求系统提供根据客房房间号来浏览，该客房的入住情况。前提条件，客房是指已入住客人的房间。