XML DOM - 載入

本章我們將學習XML的載入和解析。

為了描述API提供的介面，W3C使用一種名為介面定義語言（IDL）的抽象語言。使用IDL的優點是，開發人員可以學習如何使用他們最喜歡的語言來使用DOM，並且可以輕鬆地切換到不同的語言。

缺點是，由於它是抽象的，因此Web開發人員無法直接使用IDL。由於程式語言之間的差異，它們需要在抽象介面及其具體語言之間進行對映——或繫結。DOM已對映到Javascript、JScript、Java、C、C++、PLSQL、Python和Perl等程式語言。

在接下來的章節中，我們將使用Javascript作為我們的程式語言來載入XML檔案。

解析器

解析器是一個軟體應用程式，它旨在分析文件（在本例中為XML文件）並對資訊執行特定操作。一些基於DOM的解析器列在下面的表格中：

序號	解析器及描述
1	JAXP Sun Microsystem 的 Java XML 解析 API (JAXP)
2	XML4J IBM 的 Java XML 解析器 (XML4J)
3	msxml Microsoft 的 XML 解析器 (msxml) 2.0 版本內置於 Internet Explorer 5.5 中
4	4DOM 4DOM 是 Python 程式語言的解析器
5	XML::DOM XML::DOM 是一個 Perl 模組，用於使用 Perl 操作 XML 文件
6	Xerces Apache 的 Xerces Java 解析器

在像 DOM 這樣的基於樹的 API 中，解析器會遍歷 XML 檔案並建立相應的 DOM 物件。然後，您可以來回遍歷 DOM 結構。

載入和解析 XML

載入 XML 文件時，XML 內容可以有兩種形式：

直接作為 XML 檔案
作為 XML 字串

內容作為 XML 檔案

下面的示例演示瞭如何在 XML 內容作為 XML 檔案接收時，使用 Ajax 和 Javascript 載入 XML (node.xml) 資料。在這裡，Ajax 函式獲取 xml 檔案的內容並將其儲存在 XML DOM 中。建立 DOM 物件後，對其進行解析。

<!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
            
            if (window.XMLHttpRequest) { // Create an instance of XMLHttpRequest object. 
               code for IE7+, Firefox, Chrome, Opera, Safari 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","/dom/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>Tanmay</FirstName> 
      <LastName>Patil</LastName> 
      <ContactNo>1234567890</ContactNo> 
      <Email>tanmaypatil@xyz.com</Email> 
   </Employee>  
   
   <Employee category = "Non-Technical"> 
      <FirstName>Taniya</FirstName> 
      <LastName>Mishra</LastName> 
      <ContactNo>1234667898</ContactNo> 
      <Email>taniyamishra@xyz.com</Email> 
   </Employee>  
   
   <Employee category = "Management"> 
      <FirstName>Tanisha</FirstName> 
      <LastName>Sharma</LastName> 
      <ContactNo>1234562350</ContactNo> 
      <Email>tanishasharma@xyz.com</Email> 
   </Employee> 
</Company>

大部分程式碼細節都在指令碼程式碼中。

Internet Explorer 使用ActiveXObject("Microsoft.XMLHTTP") 建立 XMLHttpRequest 物件的例項，其他瀏覽器使用XMLHttpRequest() 方法。
responseXML 將 XML 內容直接轉換為 XML DOM。
將 XML 內容轉換為 JavaScript XML DOM 後，您可以使用 JS DOM 方法和屬性訪問任何 XML 元素。我們使用了諸如childNodes、nodeValue之類的 DOM 屬性以及諸如 getElementsById(ID)、getElementsByTagName(tags_name) 之類的 DOM 方法。

執行

將此檔案儲存為 loadingexample.html 並將其在瀏覽器中開啟。您將收到以下輸出：

內容作為 XML 字串

下面的示例演示瞭如何在 XML 內容作為 XML 檔案接收時，使用 Ajax 和 Javascript 載入 XML 資料。在這裡，Ajax 函式獲取 xml 檔案的內容並將其儲存在 XML DOM 中。建立 DOM 物件後，對其進行解析。

<!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 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>Tanmay</FirstName>";
            text = text+"<LastName>Patil</LastName>";
            text = text+"<ContactNo>1234567890</ContactNo>";
            text = text+"<Email>tanmaypatil@xyz.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 元素。我們使用了諸如childNodes、nodeValue之類的 DOM 屬性。

執行

將此檔案儲存為 loadingexample.html 並將其在瀏覽器中開啟。您將看到以下輸出：

現在我們已經瞭解了 XML 內容如何轉換為 JavaScript XML DOM，您現在可以使用 XML DOM 方法訪問任何 XML 元素。

列印頁面