XML DOM加載

在本章中，我們將學習XML加載和解析。
爲了描述API提供的接口，W3C使用稱爲接口定義語言(IDL)的抽象語言。使用IDL的優勢在於開發人員可以學習如何將DOM與他/她喜歡的語言一起使用，並可以輕鬆切換到其他語言。

缺點是，由於它是抽象的，因此Web開發人員不能直接使用IDL。由於編程語言之間的差異，它們需要在抽象接口和它們的具體語言之間進行映射或綁定。 DOM已經映射到編程語言，如：Javascript，JScript，Java，C，*C++*，PLSQL，Python和Perl。

在以下章節中，我們將使用Javascript 作爲編程語言來加載XML文件。

1. 解析器

解析器是一種軟件應用程序，用於分析文檔，在示例中是XML文檔，並根據信息執行某些操作。一些基於DOM的解析器列在下表中 -

序號

解析器

描述

JAXP

Sun Microsystem的XML解析Java API(JAXP)

XML4J

IBM的XML XML解析器(XML4J)

msxml

Microsoft的XML解析器(msxml)版本2.0內置於IE 5.5中

4DOM

4DOM是Python編程語言的解析器

XML::DOM

XML::DOM是一個Perl模塊，用於使用Perl處理XML文檔

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>[email protected]</Email> 
   </Employee>  

   <Employee category = "Non-Technical"> 
      <FirstName>Max</FirstName> 
      <LastName>Su</LastName> 
      <ContactNo>1334667898</ContactNo> 
      <Email>[email protected]</Email> 
   </Employee>  

   <Employee category = "Management"> 
      <FirstName>Min</FirstName> 
      <LastName>Su</LastName> 
      <ContactNo>1364562350</ContactNo> 
      <Email>[email protected]</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 並在瀏覽器中將其打開。將看到以下輸出 -

XML

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>Yiibai</FirstName>";
            text = text+"<LastName>Su</LastName>";
            text = text+"<ContactNo>1804567890</ContactNo>";
            text = text+"<Email>[email protected]</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,並在瀏覽器中將其打開。將看到以下輸出 -

XML

DOM教程

XML DOM操作

XML DOM對象

1. 解析器

2. 加載和解析XML

2.1. 直接作爲XML文件

2.2. 內容爲XML字符串