XML DOM - 加载

在本章中，我们将研究 XML 加载和解析。

为了描述 API 提供的接口，W3C 使用一种称为接口定义语言 (IDL) 的抽象语言。使用 IDL 的优点是开发人员可以学习如何使用自己喜欢的语言使用 DOM，并且可以轻松切换到其他语言。

缺点是，由于 IDL 是抽象的，因此 Web 开发人员无法直接使用 IDL。由于编程语言之间的差异，他们需要在抽象接口和具体语言之间进行映射(或绑定)。 DOM 已映射到 Javascript、JScript、Java、C、C++、PLSQL、Python 和 Perl 等编程语言。

在以下章节中，我们将使用 Javascript 作为编程语言来加载 XML 文件。

解析器

解析器 是一种软件应用程序，旨在分析文档(在我们的例子中是 XML 文档)并对信息执行特定操作。下表列出了一些基于 DOM 的解析器 −

S.No	解析器 &描述
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>
         //如果浏览器支持 XMLHttpRequest
            
            if (window.XMLHttpRequest) { // 创建 XMLHttpRequest 对象的实例。 
               code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp  =  new XMLHttpRequest();
            } else { // code for IE6, IE5 
               xmlhttp  =  new ActiveXObject("Microsoft.XMLHTTP");
            }
   
         // 设置并发送调用"node.xml"的请求
            xmlhttp.open("GET","/dom/node.xml",false);
            xmlhttp.send();

         // 设置并返回内容为 XML DOM
            xmlDoc = xmlhttp.responseXML;

         //解析 DOM 对象
            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 DOM 中转换 XML 内容。
将 XML 内容转换为 JavaScript XML DOM 后，您可以使用 JS DOM 方法和属性访问任何 XML 元素。我们使用了 DOM 属性，例如 childNodes、nodeValue 和 DOM 方法，例如 getElementsById(ID)、getElementsByTagName(tags_name)。

执行

将此文件另存为 loadingexample.html 并在浏览器中打开。您将收到以下输出 −

内容为 XML 字符串

以下示例演示了当 XML 内容作为 XML 文件接收时，如何使用 Ajax 和 Javascript 加载 XML 数据。在这里，Ajax 函数获取 xml 文件的内容并将其存储在 XML DOM 中。一旦创建了 DOM 对象，就会对其进行解析。

<!DOCTYPE html>
<html>
   <head>
      <script>
         
         // 在 dom 对象中加载 xml 字符串
         function loadXMLString(t) { // 对于非 IE 浏览器
            if (window.DOMParser) {
               // 为 xml dom 对象创建一个实例 parser = new DOMParser();
               xmlDoc = parser.parseFromString(t,"text/xml");
            }
            // code for IE
            else { // 为 xml dom 对象创建一个实例
               xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
               xmlDoc.async = false;
               xmlDoc.loadXML(t);
            }
            return xmlDoc;
         }
      </script>
   </head>
   <body>
      <script>
         
         // 带有字符串的变量
            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>";

         // 调用带有"text"函数的 loadXMLString() 并将 xml dom 存储在变量中
            var xmlDoc = loadXMLString(text);
	
         //解析 DOM 对象
            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 属性。