How do I load data from an XML file on an HTML page using JavaScript

Question

How I could display XML data on a web page using JavaScript. The XML data could be a local file or residing on a cloud storage.

There are many ways to do this, please modify your question where specifically explain what you want to make. — luukvhoudt, Jan 07 '16 at 07:14

score 0 · Answer 1 · answered Jan 07 '16 at 07:10

See an example using jQuery.parseXML(): https://api.jquery.com/jQuery.parseXML/

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery.parseXML demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

  <p id="someElement"></p>
  <p id="anotherElement"></p>

  <script>
    var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
      xmlDoc = $.parseXML(xml),
      $xml = $(xmlDoc),
      $title = $xml.find("title");

     // Append "RSS Title" to #someElement
    $("#someElement").append($title.text());

     // Change the title to "XML Title"
    $title.text("XML Title");

     // Append "XML Title" to #anotherElement
    $("#anotherElement").append($title.text());
  </script>

</body>

</html>

score 0 · Answer 2 · answered Jan 07 '16 at 07:12

0

You could take a look at xslt.

Tutorial here: http://www.w3schools.com/xsl/default.asp

answered Jan 07 '16 at 07:12

Vasco

782
1
5
22

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

get the XML content from the server using Ajax and just display it.

ajax reference : Simple AJAX example - load data from txt file

On server side use htmlspecialchars() before sending content

reference: http://php.net/manual/en/function.htmlspecialchars.php

edited May 23 '17 at 12:22

Community

1
1

answered Jan 07 '16 at 07:13

Vegeta

1,319
7
17

rhitz · Accepted Answer · 2016-01-07T07:30:59.377

Use XMLHttpRequest

Example for reference:

<script>  
 function showXML()
 {
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
  else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
  xmlhttp.open("GET","myfile.xml",false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML;
  value=xmlDoc.getElementsByTagName("yourxmltag")[0].nodeValue;
  document.getElementById("showXMLContent").innerHTML=value;
 }
</script>

Reference: Good Reference

How do I load data from an XML file on an HTML page using JavaScript

4 Answers4