XML教學 | XML Parser
XML Parser是什麼？
首先要知道目前的瀏覽器都有一個內置的XML解析器，可以將文本轉換為XML DOM (Document Object Model)對象。
XML解析器把XML檔轉換為XML DOM對象，然後可以通過JavaScript操作的對象。
簡單來說XML DOM (Document Object Model)定義了訪問和編輯XML的屬性和方法。
所以在訪問XML檔之前，必須將其加載到XML DOM對象中。
註：
XML DOM將會在下一章節進行說明與教學。
解析文本字串
範例使用 w3schools - Try dom load xml text
1 | <html> |
範例<script>說明：
- 首先建立三個變數
text、parser、xmlDoc。1
var text, parser, xmlDoc;
- 定義了
text的文本字串。1
2
3
4
5text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>"; - 實例一個
XML DOM解析器DOMParser物件。1
parser = new DOMParser();
- 使用
parseFromString解析包含HTML或XML的字串，返回一個XML DOM對象(HTMLDocument或XMLDocument)。1
xmlDoc = parser.parseFromString(text,"text/xml");
註：詳細
parseFromString()，參考。 - 使用
getElementsByTagName方法返回具有給定標籤名稱的HTMLCollection元素，並更新網頁物件ID為demo的內容。1
2document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;註：詳細
getElementsByTagName()，參考。
範例<html>說明：
- 建立一個
p區塊，並設定id為demo。
1 | <p id="demo"></p> |
執行效果：
XMLHttpRequest 對象
XMLHttpRequest對象有一個內置的XML解析器。
responseText屬性以字符串形式回應。responseXML屬性將回應作為XML DOM對象返回。
所以要將回應用作XML DOM對象，可以使用responseXML屬性。
範例使用 w3schools - Try dom xmlhttprequest_responsexml
1 |
|
範例<script>說明：
首先建立一個名為
loadXMLDoc的function。1
function loadXMLDoc()
以建構元實例一個
XMLHttpRequest物件。1
var xhttp = new XMLHttpRequest();
使用
onreadystatechange屬性指定每次XMLHttpRequest對象的狀態發生變化時要執行的函數。1
xhttp.onreadystatechange = function()
函數內判斷當
readyState屬性為4且status屬性為200時，表示回應完成。1
if (this.readyState == 4 && this.status == 200)
註：
readyState數字的狀態描述，參考。將
XML DOM指this對象傳至myFunction的function。1
myFunction(this);
使用
open()方法，設定請求xmlhttp_info.txt檔。1
xhttp.open("GET", "cd_catalog.xml", true);
註：詳細
open()，參考。最後發送請求
send()方法。1
xhttp.send();
註：詳細
send()，參考。建立一個名為
myFunction的function。1
function myFunction(xml)
建立四個變數
x、i、xmlDoc、txt。1
var x, i, xmlDoc, txt;
定義
xmlDoc為responseXMLtxt為空字串。x= 使用getElementsByTagName方法返回具有給定標籤名稱的HTMLCollection元素。註：解析的cd_catalog.xml檔內可見
ARTIST為多個。
1
2
3xmlDoc = xml.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");針對
x使用迴圈，取得值並不斷附加至txt內，最後將其更新網頁物件ID為demo的內容。1
2
3
4for (i = 0; i< x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
範例<html>說明：
- 建立一個
p區塊，並設定id為demo。
1 | <p id="demo"></p> |
執行效果：
結語
此章節「簡單」介紹了XML Parser和取得XML DOM，使用簡單範例其訪問與操作。
進而不在只是冷冷的純文字XML檔，已經透過程式對其進行訪問與操作。
下一章節將會介紹XML DOM的部份。
註：以上參考了
MDN - DOMParser.parseFromString
MDN - Document.getElementsByTagName
w3resource.com - XML Parser
RUNOOB.COM - XML Parser
維基百科-XML
Family with 220 icons by inipagi
