How can I write a code in javascript to read xml files

Question

I just wanted to know that how can i write code in using JavaScript and HTML in order to make XML file work. I am currently using this code but it is not working

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p>
<h1 id="to">To:
<h1 id="from">From:
<h1 id="message">Message:
<p>
</div>

<script>
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
} 
else{ 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","FileName.xml", false); 
xmlhttp.send(); 
xmlDoc=xmlhttp.responseXML;

document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to").childNodes[0].nodeValue;
document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from").childNodes[0].nodeValue;
document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("message").childNodes[0].nodeValue;
</script>
</body>
</html>

And i am using this XML code

<?xml version="1.0" encoding="UTF-8"?>
<e-mail>
<to>John</to>
<from>Larry</from>
<message>Hello how are you!</message>
</e-mail>

score 0 · Accepted Answer · answered May 22 '16 at 15:46

0

You are missing closing </h1> tags, also <h1> is not valid child of <p> element; use .onload event of XMLHttpRequest() to perform tasks with .responseText; add index [0] following getElementsByTagName() call to reference specific element in HTMLCollection

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div>
    <h1 id="to">To:</h1>
    <h1 id="from">From:</h1>
    <h1 id="message">Message:</h1>
  </div>
  <script>
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "FileName.xml", false);
    xmlhttp.onload = function() {
      xmlDoc = xmlhttp.responseXML;
      document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
      document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
      document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("message")[0].childNodes[0].nodeValue;
    }
    xmlhttp.send();
  </script>
</body>
</html>

plnkr https://plnkr.co/edit/jLsO3SgV8dMG3sRBZbds?p=preview

answered May 22 '16 at 15:46

guest271314

1
15
104
177

To not overwrite existing `html` at `h1` elements use `+=` operator when setting `.innerHTML` – guest271314 May 22 '16 at 15:53
It shows nothing except simple HTML headings of _To_, _From_ and _Message_. XML is not working – Himalya vats May 23 '16 at 14:39
@Himalyavats Are any errors logged at `console`? Does `XMLHttpRequest()` successfully complete? What does `console.log(xmlhttp.responseXML)` log? – guest271314 May 24 '16 at 00:53
On console there are 2 errors, first is `XMLHttpRequest cannot load` and second is `Uncaught NetworkError : failed to execute` – Himalya vats May 24 '16 at 05:01
@Himalyavats Are you trying at `file:` protocol? – guest271314 May 24 '16 at 05:13
Yes, I am trying at `file:` protocol. – Himalya vats May 24 '16 at 05:30
Hey thanks a lot for giving me a hint about `file:` protocol. I get to know that chrome and IE does not allow XML to run on `file:` protocol. Webpage is working fine on mozilla. **Thanks a lot.** – Himalya vats May 24 '16 at 05:45
@Himalyavats See http://stackoverflow.com/questions/32996001/jquery-load-only-working-in-firefox/ – guest271314 May 24 '16 at 05:59

How can I write a code in javascript to read xml files

1 Answers1