《《XML技术及应用》-古凌岚-电子教案 第8章_XML结合JavaScript的应用》由会员分享，可在线阅读，更多相关《《XML技术及应用》-古凌岚-电子教案 第8章_XML结合JavaScript的应用（31页珍藏版）》请在金锄头文库上搜索。
1、XML技术及应用 第八章 XML结合JavaScript的应用,水利水电出版社,古凌岚、罗佳等编著,知识要点,数据岛 XML数据的嵌入与读取 结合JavaScript脚本的应用,8.1 XML数据岛的应用,XML数据的嵌入和读取 数据岛：是一个XML标签元素，该元素含一个ID属性，用于指定该数据岛的名称，元素中的内容即为XML代码。 将XML数据嵌入HTML：内嵌方式和外部引用方式。 内嵌方式 例如： 春天 天籁之声音像公司 ,8.1 XML数据岛的应用,XML数据的嵌入和读取 外部引用方式 ：在XML标签中通过SRC属性引用，该属性既可以引用本地的文件，也可以指定一个URL 例1，SRC属性
2、引用本地的XML文件： 例2，引用一个远程服务器上的XML文件： ,8.1 XML数据岛的应用,XML数据的嵌入和读取 获取HTML中数据岛的内容 采用数据绑定的方法，将数据控件（数据岛）与HTML元素建立起一种联系，数据控件负责管理数据，并为HTML元素提供数据，而HTML元素则负责在浏览器上显示数据 数据绑定的实现需要设置两个属性： DATASRC指定要绑定的数据源，并要求数据源名要加“#”前缀； DATAFLD指定绑定数据控件的具体字段，字段是指数据控件所管理数据中的列，也可以理解为数据库表中的列。,8.1 XML数据岛的应用,实例：在网页定制XML格式图书信息的显示方式 问题 书店管理
3、系统中网上图书浏览功能，要求按照指定的样式显示图书详细信息，图书详细信息存放在BOOKLIB_1.xml文件，指定格式要求： （1）显示图书的ISBN、书名、作者、价格以及出版社 （2）表格显示，要求有标题 （3）表格底色为淡红色,8.1 XML数据岛的应用,实现效果,8.1 XML数据岛的应用,分析 确定图书信息显示的机制 图书信息显示 完整代码,8.1 XML数据岛的应用,解决 确定图书信息显示的机制 将XML数据岛嵌入HTML页面，即显示内容以XML文档数据为原始依据，表现形式使用HTML元素来实现。,8.1 XML数据岛的应用,图书信息显示 采用外部引用方式，嵌入图书信息XML数据岛的
4、语句为： 采用HTML表格显示数据,8.1 XML数据岛的应用,完整代码（略）,8.1 XML数据岛的应用,单元练习 酒店管理系统要求在网上，客户可以浏览酒店所有房间的信息，以便订房。请按指定格式显示客房信息。格式要求： （1）显示房间的类型、房价、位置 （2）表格显示,8.2 结合JavaScript的应用,DataPageSize属性 TABLE元素的DataPageSize属性也是HTML对数据岛的支持属性，指定每页记录条数 transformNode方法 若XML数据显示需要设置显示格式，可通过以下几步实现： 创建XSLT 引用XML，引用XSLT 利用XSLT对数据岛中的数据进行转换
5、，通过HTML元素可输出指定的表现形式,8.2 结合JavaScript的应用,transformNode方法 第三步中对数据岛的数据转换，可采用DOMDocument类的transformNode()方法 实现方式： musicXML.transformNode(musicXSLT. XMLDocument); 说明：其中musicXML、musicXSLT分别为数据岛、XSLT的ID。,8.2 结合JavaScript的应用,实例：控制图书信息显示方式 问题 书店管理系统中，网上浏览图书信息的方式可以根据客户需要，变换显示方式为列表或表格。,8.2 结合JavaScript的应用,实现效果
6、,表格显示,列表显示,8.2 结合JavaScript的应用,分析 创建表格和列表的XSLT 引用数据岛，XSLT 创建脚本，实现XSLT对数据岛的数据转换,8.2 结合JavaScript的应用,解决 创建表格和列表的XSLT,表格XSLT文件bookTable.xsl ISBN 书名 作者 价格 出版社 ,列表XSLT文件bookLi.xsl ,8.2 结合JavaScript的应用,8.2 结合JavaScript的应用,引用数据岛、XSLT 引用数据岛语句为： 使用表格显示方式，引用XSLT的语句： 使用列表显示方式，引用XSLT的语句： ,8.2 结合JavaScript的应用,创建
7、脚本，实现XSLT对数据岛的数据转换 在脚本中调用transformNode方法，实现数据岛数据的XSLT转换， 将结果通过HTML元素如DIV或SPAN的属性innerHTML，在相应的区域显示。,8.2 结合JavaScript的应用,单元练习 酒店想通过网络实现在线订房。需要显示其客房详细信息。这些详细信息包括客房编号、客房标准编号、客房状态、备注。客户可以选择以表格形式还是子列表形式查看产品的详细信息。,8.2 结合JavaScript的应用,实例：实现指定条件的图书详细信息浏览 问题 书店管理系统中的图书量很大，客户对于感兴趣的图书，可以通过选择图书名称，了解该图书的详细信息。,8.
8、2 结合JavaScript的应用,实现效果,图书列表下拉控件,图书详细信息,8.2 结合JavaScript的应用,分析 根据问题场景，将采用下拉控件显示图书名称，并根据所选项，读取相应记录并显示。 创建下拉控件，并初始化为图书名称列表 根据图书名称，获取相应的图书详细信息 显示图书详细信息 完整代码,8.2 结合JavaScript的应用,解决 创建下拉控件，并初始化为图书名称列表 实现下拉控件的代码段： var str=“; for(var i=0;i“ +sNode.item(i).firstChild.nodeValue+ “; str+=“;,8.2 结合JavaScript的应用
9、,根据图书名称，获取相应的图书详细信息 要读取图书节点集 根据图书名称的序号，读对应记录的详细内容 例： var bisbn= resultNode.item(i).attributes.getNamedItem(“ISBN“).value var bnameNode=resultNode.item(i).firstChild; var bname=bnameNode.firstChild.nodeValue;,8.2 结合JavaScript的应用,显示图书详细信息 采用表格形式，来显示图书详细信息 ，这里要注意数据是通过脚本得到，所以显示格式的设置也需要在脚本中实现 例： /指定图书的详细信息存入字符串bookDetail var bookDetail=“+bisbn+“; bookDetail+=bname+“+bauthor+“+bpublish+“+bprice+“; bookDetail+=bquantity+“+bplace+“;,8.2 结合JavaScript的应用,完整代码（略）,8.2 结合JavaScript的应用,单元练习 酒店管理系统中，由于客流量大，工作人员需要随时了解入住情况，要求系统提供根据客房房间号来浏览，该客房的入住情况。前提条件，客房是指已入住客人的房间。,
