JS高程：读书摘要（十六）XML

一、 XML

1.1 什么是XML

• 曾有一段时间，XML 是互联网上传输结构化数据的事实标准，突出的特点是服务器与服务器间通信。后来更多采用JSON来读写结构化数据。
• XML 指可扩展标记语言（EXtensible Markup Language）
• XML 的设计宗旨是结构化、存储和传输数据，焦点是数据的内容；而非显示数据(HTML)。
• XML 仅仅是纯文本而已，有能力处理纯文本的软件都可以处理XML。
• XML 没有预定义的标签，允许创作者自定义标签和文档结构。

1.2 XML用途

• XML 把数据从 HTML 分离

如果你需要在 HTML 文档中显示动态数据，那么每当数据改变时将花费大量的时间来编辑 HTML，通过 XML，数据能够存储在独立的 XML 文件中。通过使用几行 JavaScript，你就可以读取一个外部 XML文件，然后更新 HTML 中的数据内容。

• XML 简化数据共享

XML 数据以纯文本格式进行存储，因此提供了一种独立于软件和硬件的数据存储方法。这让创建不同应用程序可以共享的数据变得更加容易。

• XML 兼容性强

通过 XML，可以在不兼容的系统之间轻松地交换数据。不同的应用程序都能够访问您的数据，不仅仅在 HTML 页中，也可以从XML 数据源中进行访问。通过 XML，您的数据可供各种阅读设备使用（手持的计算机、语音设备、新闻阅读器等），还可以供盲人或其他残障人士使用。

1.3 XML结构

 
// 第一行是 XML 声明。它定义 XML 的版本 (1.0) 和所使用的编码
 // 描述文档的根元素
    George
    John
    Reminder
    Don't forget the meeting! // 4个子元素
  // 根元素结尾

1.4 XML语法

• 所有 XML 元素都须有关闭标签。
• XML 标签对大小写敏感。在 XML 中，标签 与标签 是不同的。必须使用相同的大小写来编写打开标签和关闭标签。
• XML必须正确地嵌套，且必须有根元素（必须有一个元素是所有其他元素的父元素）
• XML 的属性值须加引号；
• 实体引用，<、>、&、'、"来引用< > & ' "。
• 注释与HTML一样；<！-- -->
• 在 XML 中，空格会被保留。以 LF 存储换行，对应ASCII中转义字符\n。

1.5 XML元素

• 元素可包含其他元素、文本或者两者的混合物。元素也可以拥有属性。
• 命名规则
  • 名称可以含字母、数字以及其他的字符，但不能以数字或者标点符号开始。
  • 名称不能以字符 “xml”（或者 XML、Xml）开始，不能包含空格。
  • 建议是有下划线连接_，不建议是有-、.、:连接语义标签。会被一些软件误解析。

1.6 XML属性

• 属性值必须被引号包围，单引号和双引号均可。
• 如果属性值本身包含双引号，那么有必要使用单引号包围它
• 如果信息感觉起来很像数据，应该尽量避免使用属性，改为使用子元素。元数据（有关数据的数据）应当存储为属性，而数据本身应当存储为元素。

二、 XLST

2.1 XLS

• XSL 指扩展样式表语言（EXtensible Stylesheet )
• XSL = XML 样式表。（亦同css和html）
• XSL 包括三部分：
  • XSLT：一种用于转换 XML 文档的语言。
  • XPath：一种用于在 XML 文档中导航的语言。
  • XSL-FO：一种用于格式化 XML 文档的语言。

  // 外链XSL文件  

  
    Belgian Waffles
    $5.95
    
       two of our famous Belgian Waffles
    
    650
  

把文档声明为 XSL 样式表的根元素是 或

// 或者

如需访问 XSLT 的元素、属性以及特性，我们必须在文档顶端声明 XSLT 命名空间。例：xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

2.2 XLST简介

• XSLT 指 XSL 转换（XSL Transformations），可将一种 XML 文档转换为另外一种 XML 文档（或者说是可被浏览器识别的其他类型的文档）。使用 XPath 在 XML 文档中进行导航。
• 通过 XSLT，可以向或者从输出文件添加或移除元素和属性。您也可重新排列元素，执行测试并决定隐藏或显示哪个元素，等等。
• 描述转化过程的一种通常的说法是，XSLT 把 XML 源树转换为 XML 结果树。

2.3 XLST转换

例：我们现在要把下面这个 XML 文档（"cdcatalog.xml"）转换为 XHTML。

  
    
    Bob Dylan
    USA
    Columbia
    10.90
    1985
  
  ...
  ...
  ...

然后创建一个带有转换模板的 XSL 样式表（"cdcatalog.xsl"）

  
  
    
My CD Collection
    
    

    

      
Title
      
Artist
    
    

      

      

    
    
    
  
  

向 XML 文档（"cdcatalog.xml"）添加XSL 样式表引用，如果您使用的浏览器兼容 XSLT，它会很顺利地把 XML 转换为 XHTML。

  
    
    Bob Dylan
    USA
    Columbia
    10.90
    1985
  

转化后的展示

2.5 XSLT 元素

元素用于构建模板。match 属性用于关联 XML 元素和模板。match 属性也可用来为整个文档定义模板。match 属性的值是 XPath 表达式（举例，match="/" 定义整个文档）。元素内部的内容定义了写到输出结果的 HTML 代码。

// 由于 XSL 样式表本身也是一个 XML 文档，因此它总是由 XML 声明起始：

// 定义此文档是一个 XSLT 样式表文档（连同版本号和 XSLT 命名空间属性）

// xsl:template 元素定义了一个模板。而 match="/" 属性则把此模板与 XML 源文档的根相联系。
...
...
...

2.6 XSLT 元素

元素用于提取某个选定节点的值，并把值添加到转换的输出流中：

    
    

// 选定了XML中catalog/cd/title元素的值 输出在这个td中。
// 这里只捕获了一个匹配的元素 使用下面的for-each可以捕获全部

2.7 XSLT 元素

元素可用于选取指定的节点集中的每个 XML 元素。

  // 在 xls:for-each 的select属性上定义需要循环的节点
    
        
        
    

• 结果过滤

• 合法的过滤运算符:= (等于) != (不等于) < (小于) > (大于)

2.8 XSLT 元素

如需对结果进行排序，只要简单地在 XSL 文件中的 元素内部添加一个 元素：

// select 属性指示需要排序的 XML 元素。
    
        
        
    

2.9 XSLT 元素

元素用于放置针对 XML 文件内容的条件测试。

// 仅仅会输出价格高于 10 的 CD 的 title 和 artist 元素。
   
        
        
   

2.10 XSLT 元素

XSLT 元素用于结合 和 来表达多重条件测试。

    
    
        
            
             // 价格大于10的artist有背景
        
        
            // 可以多个判断条件 价格大于9时小于10时 另外一种背景
             
        
        
            
        
    

2.11 XSLT 元素

元素可把一个模板应用于当前的元素或者当前元素的子节点。

My CD Collection
 
 //在这里应用模板 






  // 应用在哪些元素





Title: 
 // 怎么应用



Artist: 

三、 XLST高级

之前讲到的是如何使用 XSLT 将某个 XML 文档转换为 XHTML。我们是通过以下途径完成这个工作的：向 XML 文件添加 XSL 样式表，并通过浏览器完成转换。但是在无法识别XSLT的浏览器这种方法就无法奏效，更通用的方法是使用 JavaScript 来完成转换。通过使用 JavaScript，我们可以进行浏览器确认测试并根据浏览器和使用者的需求来使用不同的样式表。

• XSLT - 客户端

之前是在xml文件外联xsl文件然后由浏览器进行转换，现在可以使用JS直接完成加载与转换。

// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false // 是否异步加载 默认为true
xml.load("cdcatalog.xml")

// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")

// Transform
document.write(xml.transformNode(xsl))

• XSLT - 在服务器上

JavaScript 解决方案无法工作于没有 XML解析器的浏览器。为了让 XML 数据适用于任何类型的浏览器，我们必须在服务器上对 XML 文档进行转换，然后将其作为 XHMTL 发送到浏览器。XSLT 的设计目标之一是使数据在服务器上从一种格式转换到另一种格式成为可能，并向所有类型的浏览器返回可读的数据。

<%
'Load XML
set xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load(Server.MapPath("cdcatalog.xml"))

'Load XSL
set xsl = Server.CreateObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load(Server.MapPath("cdcatalog.xsl"))

'Transform file
Response.Write(xml.transformNode(xsl))
%>

// ASP写法

四、 XPath

在 XPath 中，有七种类型的节点：元素、属性、文本、命名空间、处理指令、注释以及文档节点（或称为根节点）。

  
  29.99


  
  39.95

其中（文档节点）29.99 （元素节点）lang="eng"（属性节点），39.95 、"en"等属于基本值。

节点关系也存在与HTML一样的，父、子、同胞、先辈、后代。

4.1 语法

XPath 使用路径表达式来选取 XML 文档中的节点或节点集。

表达式	结果
bookstore	选取 bookstore 元素的所有子节点。
/bookstore	选取根元素 bookstore。以/开头，代表着是绝对路径。
bookstore/book	选取属于 bookstore 的子元素的所有 book 元素。
//book	选取所有 book 子元素，而不管它们在文档中的位置。
bookstore//book	选择属于 bookstore 元素的后代的所有 book 元素，而不管它们位于 bookstore 之下的什么位置。
//@lang	选取名为 lang 的所有属性。
/bookstore/book[1]	选取属于 bookstore 子元素的第一个 book 元素。
/bookstore/book[last()]	选取属于 bookstore 子元素的最后一个 book 元素。
/bookstore/book[last()-1]	选取属于 bookstore 子元素的倒数第二个book 元素。
/bookstore/book[position()<3]	选取最前面的两个（所在位置小于3）属于 bookstore 元素的子元素的 book元素。
//title[@lang]	选取所有拥有名为 lang 的属性的 title 元素。
//title[@lang='eng']	选取所有拥有值为 eng 的 lang 属性 title 元素
/bookstore/book[price>35.00]	选取 bookstore 元素的所有 book 元素中 price > 35的book元素
/bookstore/book[price>35.00]/title	选取 bookstore 元素的所有 book 元素中 price > 35的book元素下的title元素。
/bookstore/*	选取 bookstore 元素的所有子元素
//*	选取文档中的所有元素。
//title[@*]	选取所有带有属性的 title 元素。
node()	匹配任何类型的节点。
@*	匹配任何属性节点。
//title | //price	选取文档中的所有 title 和 price元素。

4.2 轴

轴可定义相对于当前节点的节点集。

轴名称	结果
ancestor	选取当前节点的所有先辈（父、祖父等）。
ancestor-or-self	选取当前节点的所有先辈（父、祖父等）以及当前节点本身。
attribute	选取当前节点的所有属性。
child	选取当前节点的所有子元素。
descendant	选取当前节点的所有后代元素（子、孙等）。
descendant-or-self	选取当前节点的所有后代元素（子、孙等）以及当前节点本身。
following	选取文档中当前节点的结束标签之后的所有节点。
namespace	选取当前节点的所有命名空间节点。
parent	选取当前节点的父节点。
preceding	选取文档中当前节点的开始标签之前的所有节点。
preceding-sibling	选取当前节点之前的所有同级节点。
self	选取当前节点。

4.3 步

每个步均根据当前节点集之中的节点来进行计算。语法：轴名称::节点测试[谓语]

例子	结果
child::book	选取所有属于当前节点的子元素的 book节点。
attribute::lang	选取当前节点的 lang 属性。
child::*	选取当前节点的所有子元素。
attribute::*	选取当前节点的所有属性。
child::text()	选取当前节点的所有文本子节点。
child::node()	选取当前节点的所有子节点。
descendant::book	选取当前节点的所有 book 后代。
ancestor::book	选择当前节点的所有 book 先辈。
ancestor-or-self::book	选取当前节点的所有 book先辈以及当前节点（如果此节点是 book 节点）
child::*/child::price	选取当前节点的所有 price孙节点。

4.4 XPath 运算符

区别于常规运算符的有：

运算符	描述	实例	返回值
|	计算两个节点集	//book | //cd	返回所有拥有 book 和 cd 元素的节点集
div	除法	8 div 4	2
or	或	price=9.80 or price=9.70	price等于9.80或9.70时返回true
and	和	price>9.00 and price<9.90	price在9.00 - 9.90之间返回true
mod	求模	5 mod 2	1

4.5 加载 XML 文档

所有现代浏览器都支持使用 XMLHttpRequest 来加载 XML 文档的方法

var xhr = new XMLHttpRequest
// 针对IE 5 和 6
var xhr = new ActiveXObject("Microsoft.XMLHTTP")

4.6 选取节点

xmlDoc.evaluate(xpath, xmlDoc, null, XPathResult.ANY_TYPE,null);
// IE
xmlDoc.selectNodes(xpath);

五、 XML & JavaScript

5.1 XMLHttpRequest 对象

XMLHttpRequest 对象用于在后台与服务器交换数据。创建XMLHttpRequest 对象的语法见4.5

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

var xmlhttp;
function loadXMLDoc(url){
    xmlhttp=null;
    if (window.XMLHttpRequest){
    // code for all new browsers
        xmlhttp=new XMLHttpRequest();
    } else if (window.ActiveXObject){
    // code for IE5 and IE6
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp!=null) {
        xmlhttp.onreadystatechange=state_Change;
        xmlhttp.open("GET",url,true); // 第三个参数规定请求是否异步处理
        // true 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。
        xmlhttp.send(null);
    } else {
        alert("Your browser does not support XMLHTTP.");
    }
}

function state_Change(){
    if (xmlhttp.readyState==4) {
      // 4 = "loaded"
        if (xmlhttp.status==200){
        // 200 = OK
        // ...our code here...
        } else {
            alert("Problem retrieving XML data");
        }
    }
}

5.2 加载并解析XML 文件

// 使用XMLHttpRequest 对象
xmlhttp.open("GET","/example/xmle/note.xml",false); // 加载
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; // 获取

// IE
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("note.xml");

// Firefox 及 其他浏览器
var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("note.xml");

// 解析
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;

5.3 加载并解析XML 字符串

// 使用浏览器提供的解析方法
var txt="";
txt=txt+"George";
txt=txt+"John";
txt=txt+"Reminder";
txt=txt+"Don't forget the meeting!";
txt=txt+"";

if (window.DOMParser) { // 现代浏览器
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(txt,"text/xml");
} else { // Internet Explorer
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(txt);
}

// 解析
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;

六、 XML DOM

6.1 XML DOM 常用属性

x 是一个节点对象

• x.nodeName - x 的名称
• x.nodeValue - x 的值
• x.parentNode - x 的父节点
• x.childNodes -x 的子节点
• x.attributes - x 的属性节点

6.2 XML DOM 方法

• x.getElementsByTagName(name)- 获取带有指定标签名称的所有元素
• x.appendChild(node) - 向 x 插入子节点
• x.removeChild(node) - 从 x 删除子节点

xmlDoc- 由解析器创建的 XML DOM 也能调用这些方法。

// 从