Hello folks! welcome back to a new section of our tutorial on XML DOM. In this tutorial, we are going to be studying about the XML DOM Loading.
In order to describe the interfaces provided by the Application Programming Interface (API), the W3C uses an abstract language called the Interface Definition Language (IDL). The advantage of using IDL is that the developer learns how to use the DOM with his or her own preferred language and can switch easily to another language.
In order to describe the interfaces provided by the Application Programming Interface (API), the W3C uses an abstract language called the Interface Definition Language (IDL). The advantage of using IDL is that the developer learns how to use the DOM with his or her own preferred language and can switch easily to another language.
READ: XML DOM | Model
The disadvantage of using IDL is that, since it is abstract, it cannot be used directly by developers. Due to th differences between the languages, they need to have mapping or binding between the abstract interfaces and their concrete languages. DOM has been mapped to languages such as JScript, Java, JavaScript, C++, C, PLSQL, Python, and Perl.
In our subsequent tutorials, we are going to be using JavaScript as our programming language to load XML files.
Parser
A parser is a software application designed to analyze a document, in the case of this tutorial XML document and do something specific with the information. Some of the DOM based parsers are listed in the below table -
| S.No | Parser & Description |
|---|---|
| 1 | JAXP Sun Microsystem’s Java API for XML Parsing (JAXP) |
| 2 | XML4J IBM’s XML Parser for Java (XML4J) |
| 3 | msxml Microsoft’s XML parser (msxml) version 2.0 is built-into Internet Explorer 5.5 |
| 4 | 4DOM 4DOM is a parser for the Python programming language |
| 5 | XML::DOM XML::DOM is a Perl module to manipulate XML documents using Perl |
| 6 | Xerces Apache’s Xerces Java Parser |
READ: XML DOM | Node Tree
In a tree based API like DOM, the parser traverses the XML file and then creates the corresponding DOM object. Then you now traverse the DOM structure back and forth.
Loading and Parsing XML
While loading an XML document, the XML content can come in two forms -
- Directly as XML file
- As XML string
Content as XML File
The following example below demonstrates how to load XML(node.xml) data using Ajax and JavaScript when the XML content is received as an XML file. In this example, the Ajax function gets the content of an xml file and stores it in XML DOM. Once the DOM object is created, it is then parsed -
<!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>Kennedy</FirstName> <LastName>Nkpara</LastName> <ContactNo>1234567890</ContactNo> <Email>kennedynkpara@xyz.com</Email> </Employee> <Employee category = "Non-Technical"> <FirstName>Stephanie</FirstName> <LastName>Francis</LastName> <ContactNo>1234667898</ContactNo> <Email>stephaniefrancis@xyz.com</Email> </Employee> <Employee category = "Management"> <FirstName>Justice</FirstName> <LastName>Douglas</LastName> <ContactNo>1234562350</ContactNo> <Email>justicedouglas@xyz.com</Email> </Employee> </Company>
READ: XML DOM | Nodes
Most of all the details of the code are in the script code.
- Microsoft Internet Explorer makes use of the ActiveXObject("Microsoft.XMLHTTP"") to create an instance of XMLHttpRequest object, other web browsers makes use of the XMLHttpRequest() method.
- The responseXML transforms the XML content directly in XML DOM.
- Once the XML content is transformed into JavaScript XML DOM, you can access any XML element by using the JavaScript DOM methods and properties. We have used the DOM properties such as the childNodes, nodeValue and DOM methods such as the getElementByTagName(tags_name) and the getElementById(ID).
Output
Save this file as loadingexample.html and open it in your web browser. The following output will be displayed on your screen -
Content as XML string
The following example below demonstrates how to load XML data by using of Ajax and JavaScript when XML content is received as XML file. Here the Ajax function, gets the content of an xml file and stores it in XML DOM. Once the DOM object is created, it is then parsed -
<!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>Kennedy</FirstName>"; text = text+"<LastName>Nkpara</LastName>"; text = text+"<ContactNo>1234567890</ContactNo>"; text = text+"<Email>kennedynkpara@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>
Most of all the details of the code are in the script code.
- Microsoft Internet Explorer makes use of the ActiveXObject("Microsoft.XMLDOM") to load XML data into a DOM object, other browsers uses the DOMParser() function and the parseFromString(text, 'text/xml') method.
- The variable text shall contain a string with XML content.
- Once the XML content is transformed into JavaScript XML DOM, you can access any XML element by using the JavaScript DOM methods and properties. We have used the DOM properties such as the childNodes, nodeValue.
Output
Save this file as loadingexample.html and open it in your web browser. The following output will be displayed on your screen -
Now that we saw how the XML content transforms into JavaScript XML DOM, you can now access any XML element by using XML DOM methods.
READ: XML DOM | Methods
Alright guys! This is where we are going to be rounding up for this tutorial post. In our next tutorial, we are going to be discussing about XML DOM Traversing.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.