XML DOM加载
在本章中,我们将学习XML加载和解析。
为了描述API提供的接口,W3C使用称为接口定义语言(IDL
)的抽象语言。 使用IDL
的优势在于开发人员可以学习如何将DOM与他/她喜欢的语言一起使用,并可以轻松切换到其他语言。
缺点是,由于它是抽象的,因此Web开发人员不能直接使用IDL。 由于编程语言之间的差异,它们需要在抽象接口和它们的具体语言之间进行映射或绑定。 DOM已经映射到编程语言,如:Javascript,JScript,Java,C,C++,PLSQL,Python和Perl。
在以下章节中,我们将使用Javascript 作为编程语言来加载XML文件。
1. 解析器
解析器是一种软件应用程序,用于分析文档,在示例中是XML文档,并根据信息执行某些操作。 一些基于DOM的解析器列在下表中 -
序号 | 解析器 | 描述 |
---|---|---|
1 | JAXP | Sun Microsystem的XML解析Java API(JAXP) |
2 | XML4J | IBM的XML XML解析器(XML4J) |
3 | msxml | Microsoft的XML解析器(msxml)版本2.0内置于IE 5.5中 |
4 | 4DOM | 4DOM是Python编程语言的解析器 |
5 | XML::DOM | XML::DOM 是一个Perl模块,用于使用Perl处理XML文档 |
6 | 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>susen@zyiz.net</Email> </Employee> <Employee category = "Non-Technical"> <FirstName>Max</FirstName> <LastName>Su</LastName> <ContactNo>1334667898</ContactNo> <Email>maxsu@zyiz.net</Email> </Employee> <Employee category = "Management"> <FirstName>Min</FirstName> <LastName>Su</LastName> <ContactNo>1364562350</ContactNo> <Email>minsu@zyiz.net</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 并在浏览器中将其打开。将看到以下输出 -
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>zyiz</FirstName>"; text = text+"<LastName>Su</LastName>"; text = text+"<ContactNo>1804567890</ContactNo>"; text = text+"<Email>zyiz.su@zyiz.net</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,并在浏览器中将其打开。将看到以下输出 -
扫描二维码
程序员编程王