在本章中，我們將學習XML加載和解析。
為了描述API提供的介面，W3C使用稱為介面定義語言(IDL)的抽象語言。 使用IDL的優勢在於開發人員可以學習如何將DOM與他/她喜歡的語言一起使用，並可以輕鬆切換到其他語言。
缺點是，由於它是抽象的，因此Web開發人員不能直接使用IDL。 由於編程語言之間的差異，它們需要在抽象介面和它們的具體語言之間進行映射或綁定。 DOM已經映射到編程語言，如：Javascript，JScript，Java，C，C++，PLSQL，Python和Perl。
在以下章節中，我們將使用Javascript 作為編程語言來加載XML檔。
1. 解析器
解析器是一種軟體應用程式，用於分析文檔，在示例中是XML文檔，並根據資訊執行某些操作。 一些基於DOM的解析器列在下表中 -
| 序號 | 解析器 | 描述 |
|---|---|---|
| 1 | JAXP | Sun Microsystem的XML解析Java API(JAXP) |
| 2 | XML4J | IBM的XML XML解析器(XML4J) |
| 3 | msxml | Microsoft的XML解析器(msxml)版本2.0內置於IE 5.5中 |
| 4 | 4DOM | 4DOM是Python編程語言的解析器 |
| 5 | XML::DOM | XML::DOM是一個Perl模組，用於使用Perl處理XML文檔 |
| 6 | Xerces | Apache的Xerces Java解析器 |
在像DOM這樣基於樹的API，解析器遍曆XML檔並創建相應的DOM對象。 然後，可以來回遍曆DOM結構。
2. 加載和解析XML
在加載XML文檔時，XML內容可以有兩種形式 -
- 直接作為XML檔
- 作為XML字串
2.1. 直接作為XML檔
以下示例演示了當XML內容作為XML檔接收時如何使用Ajax和Javascript加載XML(node.xml)數據。 這裏，Ajax函數獲取xml檔的內容並將其存儲在XML DOM中。 創建DOM對象後，將對其進行解析。
檔：loading-example.html -
<!DOCTYPE html>
<html>
<body>
<div>
<b>FirstName:</b> <span id = "FirstName"></span><br>
<b>LastName:</b> <span id = "LastName"></span><br>
<b>ContactNo:</b> <span id = "ContactNo"></span><br>
<b>Email:</b> <span id = "Email"></span>
</div>
<script>
//if browser supports XMLHttpRequest
var xmlhttp = null;
if (window.XMLHttpRequest) { // Create an instance of XMLHttpRequest object.
//code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest();
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// sets and sends the request for calling "node.xml"
xmlhttp.open("GET","/node.xml",false);
xmlhttp.send();
// sets and returns the content as XML DOM
xmlDoc = xmlhttp.responseXML;
//parsing the DOM object
document.getElementById("FirstName").innerHTML =
xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0].nodeValue;
document.getElementById("LastName").innerHTML =
xmlDoc.getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
document.getElementById("ContactNo").innerHTML =
xmlDoc.getElementsByTagName("ContactNo")[0].childNodes[0].nodeValue;
document.getElementById("Email").innerHTML =
xmlDoc.getElementsByTagName("Email")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
檔：node.xml -
<Company>
<Employee category = "Technical" id = "firstelement">
<FirstName>Susen</FirstName>
<LastName>Su</LastName>
<ContactNo>1584567890</ContactNo>
<Email>susen@xuhuhu.com</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Max</FirstName>
<LastName>Su</LastName>
<ContactNo>1334667898</ContactNo>
<Email>maxsu@xuhuhu.com</Email>
</Employee>
<Employee category = "Management">
<FirstName>Min</FirstName>
<LastName>Su</LastName>
<ContactNo>1364562350</ContactNo>
<Email>minsu@xuhuhu.com</Email>
</Employee>
</Company>
代碼的大部分細節都在腳本代碼中說明了，這裏簡單表述 -
- Internet Explorer使用
ActiveXObject("Microsoft.XMLHTTP")來創建XMLHttpRequest對象的實例，其他流覽器使用XMLHttpRequest()方法。 responseXML直接在XML DOM中轉換XML內容。- 將XML內容轉換為JavaScript XML DOM後，可以使用JS DOM方法和屬性訪問任何XML元素。使用了DOM屬性，如
childNodes，nodeValue和DOM方法，如getElementsById(ID)，getElementsByTagName(tags_name)。
執行
將此檔另存為loading-example.html 並在流覽器中將其打開。將看到以下輸出 -
2.2. 內容為XML字串
下麵的示例演示了當XML內容作為XML檔接收時如何使用Ajax和Javascript加載XML數據。 這裏，Ajax函數獲取xml檔的內容並將其存儲在XML DOM中。 當創建了DOM對象，就會對其進行解析。
檔：loading-example2.html -
<!DOCTYPE html>
<html>
<head>
<script>
// loads the xml string in a dom object
function loadXMLString(t) { // for non IE browsers
if (window.DOMParser) {
// create an instance for xml dom object
var parser = new DOMParser();
xmlDoc = parser.parseFromString(t,"text/xml");
}
// code for IE
else { // create an instance for xml dom object
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(t);
}
return xmlDoc;
}
</script>
</head>
<body>
<script>
// a variable with the string
var text = "<Employee>";
text = text+"<FirstName>zaixian</FirstName>";
text = text+"<LastName>Su</LastName>";
text = text+"<ContactNo>1804567890</ContactNo>";
text = text+"<Email>zaixian.su@xuhuhu.com</Email>";
text = text+"</Employee>";
// calls the loadXMLString() with "text" function and store the xml dom in a variable
var xmlDoc = loadXMLString(text);
//parsing the DOM object
y = xmlDoc.documentElement.childNodes;
for (i = 0;i<y.length;i++) {
document.write(y[i].childNodes[0].nodeValue);
document.write("<br>");
}
</script>
</body>
</html>
代碼的大部分細節都在腳本代碼中說明了，這裏簡單表述 -
- Internet Explorer 使用
ActiveXObject("Microsoft.XMLDOM")將XML數據加載到DOM對象中，其他流覽器使用DOMParser()函數和parseFromString(text，'text/xml')方法。 - 變數
text包含帶有XML內容的字串。 - 將XML內容轉換為JavaScript XML DOM後，可以使用JS DOM方法和屬性訪問任何XML元素。上面代碼中使用了DOM屬性，例如：
childNodes，nodeValue。
執行結果
將此檔另存為loading-example2.html,並在流覽器中將其打開。將看到以下輸出 -
