WEB前端須要瞭解的XML相關基礎知識

時間 2019-12-06

標籤 web 前端須要瞭解 xml 相關基礎知識欄目 HTML 简体版

原文原文鏈接

什麼是 XML?

XML 指可擴展標記語言（EXtensible Markup Language）
XML 是一種標記語言，很相似 HTML
XML 的設計宗旨是傳輸數據，而非顯示數據
XML 標籤沒有被預約義。您須要自行定義標籤。
XML 被設計爲具備自我描述性。
XML 是 W3C 的推薦標準

XML DOM

加載並解析 XML 文件

JS代碼：javascript

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代碼：html

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

詳細瞭解： XMLHttpRequest 對象java

加載並解析 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代碼：node

<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>)。dom

經過使用前綴，咱們建立了兩種不一樣類型的 <table> 元素。async

使用命名空間（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 個預約義的實體引用：

<	<	小於
>	>	大於
&	&	和號
'	'	省略號
"	"	引號

註釋：嚴格地講，在 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 教程》

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。