WEB前端需要了解的XML相关基础知识

什么是 XML?

  • XML 指可扩展标记语言（EXtensible Markup Language）
  • XML 是一种标记语言，很类似 HTML
  • XML 的设计宗旨是传输数据，而非显示数据
  • XML 标签没有被预定义。您需要自行定义标签。
  • XML 被设计为具有自我描述性。
  • XML 是 W3C 的推荐标准

XML DOM

加载并解析 XML 文件

JS代码：

var xmlhttp,xmlDoc;
if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}else{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open('get','./http.xml',false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.getElementById('to').innerHTML = xmlDoc.getElementsByTagName('to')[0].childNodes[0].nodeValue;

http.xml代码：

<note>
    <to>George</to>
    <from>John</from>
    <heading>Reminder</heading>
    <body>Don't forget the meeting!</body>
</note>

详细了解： XMLHttpRequest 对象

加载并解析 XML 字符串

<body>
<h1>W3School.com.cn Internal Note</h1>
<p>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</p>
<script type="text/javascript">
var txt = `
    <note>
        <to>George</to>
        <from>John</from>
        <heading>Reminder</heading>
        <body>Don't forget the meeting!</body>
    </note>
`;
<!--
txt="<note>";
txt=txt+"<to>George</to>";
txt=txt+"<from>John</from>";
txt=txt+"<heading>Reminder</heading>";
txt=txt+"<body>Don't forget the meeting!</body>";
txt=txt+"</note>";
-->

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;
document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;

XML to HTML

HTML代码 ：

<body>
<script type="text/javascript">
if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","./http.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("block");
for (i=0;i<x.length;i++){
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("to")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("from")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
</script>
</body>

http.xml代码：

<note>
    <block>
        <to>George</to>
        <from>John</from>
    </block>
    <block>
        <to>China</to>
        <from>America</from>
    </block>
</note>

注意：出于安全方面的原因，现代的浏览器不允许跨域的访问。假如你打算在自己的网页上使用上面的例子，则必须把 XML 文件放到自己的服务器上。否则，xmlDoc.load() 将产生错误 "Access is denied"。

XML 命名空间（XML Namespaces）

使用前缀来避免命名冲突

此文档带有某个表格中的信息：

<h:table>
   <h:tr>
   <h:td>Apples</h:td>
   <h:td>Bananas</h:td>
   </h:tr>
</h:table>

此 XML 文档携带着有关一件家具的信息：

<f:table>
   <f:name>African Coffee Table</f:name>
   <f:width>80</f:width>
   <f:length>120</f:length>
</f:table>

现在，命名冲突不存在了，这是由于两个文档都使用了不同的名称来命名它们的<table> 元素 (<h:table> 和 <f:table>)。

通过使用前缀，我们创建了两种不同类型的 <table> 元素。

使用命名空间（Namespaces）

这个 XML 文档携带着某个表格中的信息：

<h:table xmlns:h="http://www.w3.org/TR/html4/">
   <h:tr>
   <h:td>Apples</h:td>
   <h:td>Bananas</h:td>
   </h:tr>
</h:table>

此 XML 文档携带着有关一件家具的信息：

<f:table xmlns:f="http://www.w3school.com.cn/furniture">
   <f:name>African Coffee Table</f:name>
   <f:width>80</f:width>
   <f:length>120</f:length>
</f:table>

与仅仅使用前缀不同，我们为<table> 标签添加了一个xmlns 属性，这样就为前缀赋予了一个与某个命名空间相关联的限定名称。

(xmlns) 属性

XML 命名空间属性被放置于元素的开始标签之中，并使用以下的语法：

xmlns:namespace-prefix="namespaceURI"

详细参考：XML 命名空间（XML Namespaces）

XML CDATA

非法的 XML 字符必须被替换为实体引用

假如您在 XML 文档中放置了一个类似 "<" 字符，那么这个文档会产生一个错误，这是因为解析器会把它解释为新元素的开始。因此你不能这样写：

<message>if salary < 1000 then</message>

为了避免此类错误，需要把字符"<" 替换为实体引用，就像这样：

<message>if salary &lt; 1000 then</message>

在 XML 中有 5 个预定义的实体引用：

&lt; < 小于
&gt; > 大于
&amp; & 和号
&apos; ' 省略号
&quot; " 引号

注释：严格地讲，在 XML 中仅有字符 "<"和"&" 是非法的。省略号、引号和大于号是合法的，但是把它们替换为实体引用是个好的习惯。

CDATA

在 XML 元素中，"<" 和 "&" 是非法的。

"<" 会产生错误，因为解析器会把该字符解释为新元素的开始。

"&" 也会产生错误，因为解析器会把该字符解释为字符实体的开始。

某些文本，比如 JavaScript 代码，包含大量 "<" 或 "&" 字符。为了避免错误，可以将脚本代码定义为 CDATA。

CDATA 部分中的所有内容都会被解析器忽略。

CDATA 部分由 "<![CDATA[" 开始，由 "]]>" 结束：

<script>
<![CDATA[
function matchwo(a,b)
{
if (a < b && a < 0) then
  {
  return 1;
  }
else
  {
  return 0;
  }
}
]]>
</script>

 详细参考：《XML CDATA》

 详细的基础知识参考：《W3school：XML 教程》

posted @ 2018-12-03 21:27  风雨后见彩虹  阅读(2543)  评论(0)  编辑  收藏  举报