Reading an external XML file with jQuery

Question

Edited

I need to fill a webpage with content stored in an external XML file. I found a working example: http://jsfiddle.net/9eqvq/

However, in this example the data is directly written into the HTML document.

The application should be able to read from a remote XML file. I tried to do this with the jQuery parseXML method, but I can't get access to the XML document.

When I'm trying to output the entire content of the XML document in the console as shown in the code below, I see the following error in Chrome's console:

XMLHttpRequest cannot load file://localhost/Users/Fabi/Documents/xml/xml.xml. 
Cross origin requests are only supported for protocol schemes: 
http, data, chrome-extension, https, chrome-extension-resource.   VM71 jquery-1.10.1.js:8724
send                                                              VM71 jquery-1.10.1.js:8724
jQuery.extend.ajax                                                VM71 jquery-1.10.1.js:8154
(anonymous function)                                              VM72 index.html:19
fire                                                              VM71 jquery-1.10.1.js:3074
self.fireWith                                                     VM71 jquery-1.10.1.js:3186
jQuery.extend.ready                                               VM71 jquery-1.10.1.js:433
completed                                                         VM71 jquery-1.10.1.js:104

Here's the code I'm using:

<html>
<head>
<title>Parsing XML File</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>  
</head>

<body>
    <div id="output">Default text without manpulation</div>

    <script>

        $(document).ready(function()
        {
          $.ajax({
            url: "xml/xml.xml",
            dataType: "xml",
            success: function(data)
            {
                console.log(data);
                $("#output").text("Message from Success function"); 
            }, 
            error:function()
            {
                $("#output").text("Message from Error function");   
            }
          });
        }); 

    </script>
</body>
</html>

When I open index.html (by double-clicking) which includes the script above, I see the the success essage

Message from Success function

but not the data of the XML document. When I replace $("#output").text("Message from Success function"); with $("#output").text(data); Safari, Chrome and Firefox only show me

[object XMLDocument]

Can someone tell me what I'm doing wrong? Are there maybe working demo files which do not require a local webserver? By the way I also tried to run the code with Safari, Chrome, Firefox on a XAMPP and on a Node.js webserver – without success. Any help would be appreciated.

`file://` protocol looks suspicious in error. Ar you running this on localhost server? Default browser security settings don't allow ajax to `file://` — charlietfl, Oct 26 '14 at 10:48
No, I'm not running a local server.I'm trying to avoid this. Is there no possibilitéy to read an XML File wihout a local server? — wurstbrotrest, Oct 26 '14 at 15:59
it can be done but requires changing user security settings in browser. Not a good thing for production code — charlietfl, Oct 26 '14 at 16:04
I updated my post above, but there is still no clarity. What security settings do you mean in detail, for example in Chrome? I tried to set the --allow-file-access-from-files flag in Chrome, but this didn´t change anything. — wurstbrotrest, Oct 27 '14 at 08:56
if success handler is working you are receiving the data. Now just parse the xml to html — charlietfl, Oct 27 '14 at 12:58

score 1 · Accepted Answer · answered Nov 16 '14 at 09:45

charlietfl was right:

if success handler is working you are receiving the data

I tried to start the same HTML-doc in Chrome, Firefox and Safari. Previously I relied mostly on Chrome. Chrome did not display the HTML-document generated with XML data. Firefox and Safari however did the job. Doing some research I found out that I have to start Chrome this way: Go to the Terminal and and start Chrome with the allow-file-access-from-files - flag by typing in:

Google\ Chrome.app --args --allow-file-access-from-files

For those who have the same problem – Here is a demo. For me it´s working. Save both files index.html and cd_catalog.xml in the same directory and open index.html in your browser. I can´t remember where I found this example, but I was free enough to modify it :-) You´d better don´t do this in Chrome. Prefer Firefox or Safari.

index.html

<html>
<body>

<script>
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","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
</script>

</body>
</html>

cd_catalog.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- Edited by XMLSpy -->
<CATALOG>

    <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>
    <CD>
        <TITLE>Greatest Hits</TITLE>
        <ARTIST>Dolly Parton</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>RCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1982</YEAR>
    </CD>
    <CD>
        <TITLE>When a man loves a woman</TITLE>
        <ARTIST>Percy Sledge</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Atlantic</COMPANY>
        <PRICE>8.70</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Black angel</TITLE>
        <ARTIST>Savage Rose</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Mega</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1995</YEAR>
    </CD>

</CATALOG>

Reading an external XML file with jQuery

1 Answers1