XML DOM - 加载

在本章中，我们将学习 XML加载和解析。

为了描述API提供的接口，W3C使用一种称为接口定义语言（IDL）的抽象语言。使用 IDL 的优点是开发人员可以学习如何使用他或她最喜欢的语言来使用 DOM，并且可以轻松切换到不同的语言。

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

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

解析器

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

序列号	解析器和描述
1	JAXP Sun Microsystem 的用于 XML 解析的 Java API (JAXP)
2	XML4J IBM 的 Java XML 解析器 (XML4J)
3	微软XML Microsoft 的 XML 解析器 (msxml) 2.0 版内置于 Internet Explorer 5.5 中
4	4DOM 4DOM 是 Python 编程语言的解析器
5	XML::DOM XML::DOM 是一个 Perl 模块，用于使用 Perl 操作 XML 文档
6	薛西斯 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>

节点.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>
         
         // 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')方法。
变量文本应包含带有 XML 内容的字符串。
一旦 XML 内容转换为 JavaScript XML DOM，您就可以使用 JS DOM 方法和属性来访问任何 XML 元素。我们使用了 DOM 属性，例如childNodes、nodeValue。

执行

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

现在我们已经了解了 XML 内容如何转换为 JavaScript XML DOM，您现在可以使用 XML DOM 方法访问任何 XML 元素。