XML和JavaScript-续2

原创 2007年09月27日 19:30:00
    在该窗口中,单击【上一页】,【下一页】,【第一页】,【最后一页】会显示相应的数据信息。读者自己可以操作一下。
    现在我们编写另外一个显示页面view4.html,该页面主要显示的是查询指定信息的显示页面,该页面的显示中有三个样式供我们选择。首先我们创建三个样式文件,打开记事本,在里面输入下面的代码:
实例代码11-15
<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
    <html>
       <head><title>使用不同的样式</title></head>
       <body>
          <table border="1">
          <xsl:for-each select="客户表/客户">
          <tr>
          <xsl:apply-templates/>
          </tr>
          </xsl:for-each>
          </table>
        </body>
   </html>
</xsl:template>
<xsl:template match="*">
          <td> <font color="red"><xsl:node-name/></font></td>
          <td> <font color="blue"><xsl:value-of/></font></td>
</xsl:template>
</xsl:stylesheet>
    将该文件保存,文件名为cha1.xsl。这个文件主要是定义XML文件显示的样式。这个文件使用了两个模板,第一个为根模板,第二个模板匹配于任何一个标记。在第二个模板中定义显示的样式,首先使用“<xsl:node-name/>”显示的是该节点的名称,然后使用“<xsl:value-of/>”才显示节点的值。创建第二个XSL文件,打开记事本,在里面输入下列代码:
实例代码11-16
<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
    <html>
       <head><title>使用不同的样式</title></head>
       <body>
           <table border="1">
          <xsl:for-each select="客户表/客户">
          <tr>
          <xsl:apply-templates/>
          </tr>
          </xsl:for-each>
          </table>
         </body>
   </html>
</xsl:template>
<xsl:template match="*">
          <td><font color="green"><xsl:node-name/></font></td>
          <td><a href=""><b><xsl:value-of/></b></a></td>
</xsl:template>
</xsl:stylesheet>
    保存该文件,文件名为cha2.xsl,文件保存的位置在Example文件夹下,该例子的模板和cha1.xsl中模板结构一样,只不过样式不同罢了。打开记事本,创建第三个样式文件,在里面输入下列代码:
实例代码11-17
<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
    <html>
       <head><title>使用不同的样式</title></head>
       <body bgcolor="#ffff">
        <table border="1">
          <xsl:for-each select="客户表/客户">
          <tr>
          <xsl:apply-templates/>
          </tr>
          </xsl:for-each>
          </table>
       </body>
   </html>  
</xsl:template>
<xsl:template match="*">
          <td> <font color="red"><xsl:node-name/></font></td>
          <td> <font color="blue"><s><xsl:value-of/></s></font></td>
</xsl:template>
</xsl:stylesheet>
    将该文件保存,文件名为cha3.xsl,文件保存的位置在Example文件夹下。样式文件创建完毕后,创建HTML文件,打开记事本,在里面输入下列代码:
实例代码11-18
<html>
<head>
<title> DSO与XSL转换 </title>
<script language = "JavaScript">
function load1()
{
var xmlDso = sdb.XMLDocument;
var xslDso = Stylesheet1.XMLDocument;
divResults.innerHTML = xmlDso.transformNode(xslDso);
}
function load2()
{
var xmlDso = sdb.XMLDocument;
var xslDso = Stylesheet2.XMLDocument;
divResults.innerHTML = xmlDso.transformNode(xslDso);
}
function load3()
{
var xmlDso = sdb.XMLDocument;
var xslDso = Stylesheet3.XMLDocument;
divResults.innerHTML = xmlDso.transformNode(xslDso);
}
</script>
</head>
 <body bgcolor= "#FFFFF" onLoad="load1()">
    <center>
    <p style="color:orange;font-size:29;font-weight:bold;text-align:center;background-color:aqua;">请选择自己喜欢的样式</p>
   <xml id="sdb" src="cha.xml"></xml>
   <xml id="Stylesheet1" src="cha1.xsl"></xml>
   <xml id="Stylesheet2" src="cha2.xsl"></xml>
   <xml id="Stylesheet3" src="cha3.xsl"></xml>
   <DIV id="divResults"></DIV>
   <form>
      <input type=button value="样式1" onclick="load1()">
      <input type=button value="样式2" onclick="load2()">
      <input type=button value="样式3" onclick="load3()">
   </form>
   <a href="cha.xml">查看源文件</a>
  </center>
 </body>
</html>
    将该文件保存,文件名为view4.html,文件保存的位置为Example文件夹下。在当前的页面中,HTML文件以数据岛的形式引入四个符合XML格式文件,一个保存数据的XML文件,另外三个指定显示样式的XML文件。数据源的名称分别为“sdb”,“Stylesheet1”,“Stylesheet2”,“Stylesheet3”,“src”表示要引入的文件是那个。
    在嵌入的JavaScript脚本程序中,创建了三个函数,每个函数的功能都是用来指定样式表显示的样式,以第一个函数为例,首先分别使用“var xmlDso = sdb.XMLDocument”和“var xslDso = Stylesheet1.XMLDocument”创建了XML文件的数据源对象和样式表单的数据源对象。然后使用“divResults.innerHTML = xmlDso.transformNode(xslDso)”指定样式来显示XML文件。其它的函数功能一样。在下面使用三个按钮,通过单击事件来触发相应的样式事件。我们还可以通过点击超级链接显示该XML文件的源代码。
若在图11-20所示的窗口中,输入你要查询的信息,如在里面输入的信息是“孙静”,这时会弹出如图11-32所示的窗口,

 
图11-32  【指定样式显示】窗口
    该样式的显示是以【样式1】显示的,在窗口中,分别单击【样式2】和【样式3】分别显示如图11-33所示的窗口和如图11-34所示的窗口。
 

 
图11-33  【样式2显示】窗口
 
图11-34  【样式3显示】窗口
    在上面的11-34的窗口中,单击“查看源文件”,会显示如图11-35所示窗口。本章实例仅供学习,编写有点仓促,程序处理不够细致处,望大家原谅。
 

图11-35  【cha.xml源文件显示】窗口
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

DHTML+CSS2+JAVASCRIPT+XML

  • 2008-06-06 19:24
  • 10.49MB
  • 下载

JavaScript高级程序设计之DOM2和DOM3之DOM 变化之针对XML命名空间的变化第12.1.1讲

DOM1 级主要定义的是HTML 和XML 文档的底层结构。DOM2 和DOM3 级则在这个结构 的基础上引入了更多的交互能力,也支持了更高级的XML 特性。为此,DOM2 和DOM3 级分为许多...

全栈JavaScript之路( 二十三 )DOM2、DOM3, 涉及XML命名空间的扩展(一)

Example XHTML page 以上例子展示,通过 xmlns 来指定命名空间,通过 xmlns:prefix 来指定 前缀,一但指定的前缀,就得在当前元素,以及子元素...

全栈JavaScript之路( 二十四 )DOM2、DOM3, 不涉及XML命名空间的扩展

(一)DocumentType 类型的变化新增三个属性: publicId,systemId,internalSubset(内部子集) 通过, document

XML Parser for JavaScript - xml2array()

JavaScript的XML解析器 - xml2array() xml2array()解析给定的XML文档并返回关联数组中的数据。 使用 XmlHttp.onreadystatechan...

JavaScript宝典(续2)

  • 2008-05-28 16:12
  • 3.31MB
  • 下载

Shadow DOM:[1-简介, 2-基础, 3-样式, 4-样式(续), 5-JavaScript, 6-综述]

Shadow DOM

javaScript/xml/jsp等等

  • 2014-08-11 12:23
  • 10.10MB
  • 下载

javascript解析读取XML

javascript 将xml字符串转换成json对象

xml字符串转换,首先要把字符串转换成dom对象,再从dom对象里获取你要的参数,可用getElementsByTagName之类的方法。以下是2个xml字符串转成dom对象的方法 方法1:load...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)