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>[email protected]</Email> 
   </Employee>  
   
   <Employee category = "Non-Technical"> 
      <FirstName>Taniya</FirstName> 
      <LastName>Mishra</LastName> 
      <ContactNo>1234667898</ContactNo> 
      <Email>[email protected]</Email> 
   </Employee>  
   
   <Employee category = "Management"> 
      <FirstName>Tanisha</FirstName> 
      <LastName>Sharma</LastName> 
      <ContactNo>1234562350</ContactNo> 
      <Email>[email protected]</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>[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 元素。我们使用了诸如childNodes、nodeValue之类的 DOM 属性。

执行

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

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

打印页面