In this tutorial we will show you the solution of how to run XML file in HTML, using AJAX we will execute XML file in html. AJAX stands Asynchronously JavaScript and XML.
It allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. It means parts of webpage updated, without reloading the whole page.
Step By Step Guide On How To Run Xml File In HTML :-
In ajax using XMLHttpRequest object for interact with servers. We can retrieve data from URL without full page refresh.
By using XMLHttpRequest we will interact with server and when server status is ready myFunction() method is called with this object.
With this object we are retrieved data from server by responceXML. In xml file we retrieves only heading of ‘ARTIST’ and ‘TITLE’ contents only and displayed on table defined in html document.
<!DOCTYPE html>
<html>
<head>
<title> How to run xml file in html</title>
</head>
<body>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>
<table border="1px solid black" id="demo"></table>
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
cd_catalog.xml
<CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> </CATALOG>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and if need any external file those links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- When the <button> tag clicked by user ‘onclick’ event will load the loadXMLDoc() function. <table> tag with id ‘demo’ used for display the result of xml file.
- XMLHttpRequest creates new object name ‘xmlhttp’ for interact with server, then its checking server status by onreadystatechange. When readySate equal to 4 and status equal to 200 server is ready otherwise server is not ready.
- If server is not ready we need to reinitialize the object ‘xmlhttp’ using open() and request xml file by ‘GET’ then send it to client-side using send().
- If server ready means myFunction() called with ‘this’ object. In this function responseXML returns document containing HTML or XML retrieved by the request. It is stored to ‘xmlDoc’.
- Table variable defined with table headings row in html elements. getElementsByTagName("CD") finds the count of <CD> tag in xml file and stored to variable ‘x’.
- Using for loop adding result of artist, title heading contents values into table up to variable length of ‘x’. table variable results bind to <table> tag with id ‘demo’ by ‘innerHTML’. In cd_catalog xml file has two block of <CD> tag, so the result will contain two rows of values with title of ‘artist’ and ‘title’ only.
- In ajax we used XMLHttpRequest for request the server so don’t fail to run the server before execute the program.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
I hope this tutorial on how to run xml file in HTML helps you and the steps and method mentioned above are easy to follow and implement.
In conclusion now we are learn using javascript AJAX method we can execute XML file in HTML. XML stands extensible markup language and used to store data in the form of hierarchical elements.
XML is looks same as HTML but it does stores and transfers data only.
AJAX also javascript’s most useful methodology and this is used in front end.
It’s a easy and fast make of dynamic website and also for update contents in websites without refresh full page.
About Amruta
