Javascript XML parsing not working

Question

I'm nearing my wits' end here on what should be a simple problem. I'm trying to use javascript to parse and return values from a very simple XML document to a very simple HTML document. My problem is that my script refuses to do this. The XML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<root>
<man>
  <name>Nicholas</name>
</man>
<man>
  <name>Peter</name>
</man>
</root>

This is strictly for my own education, hence the purposeless tags.

The JavaScript:

<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","dname",false);
xmlhttp.send();
return xmlhttp.responseXML; 
}

xmlDoc =     loadXMLDoc("https://dl.dropboxusercontent.com/u/22818342/Testing/javascript_test4.xml");

x = xmldoc.getElementsByTagName("name");

var content = function()
{
    document.write(x[0].childNodes[0].nodeValue);
};
</script>

Note that I'm using my Dropbox public folder to enable the HTTP-fetching part of the code. All these files are located in the same directory.

The (relevant) HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="https://dl.dropboxusercontent.com/u/22818342/Testing/javascript_test3.css" rel="stylesheet" type="text/css" />
<body>
<button type="button" onclick="content()">Click Me</button>
<body>

Also note that when I click the button, ostensibly firing the content() function, nothing happens--it's not a matter of everything being overwritten.

Other relevant information: --I'm testing this in Google Chrome --I lifted much of this code (again, learning purposes only) from the W3Schools XML-parsing demo and from another StackOverflow post from a user with a similar problem to mine. In both cases the code ran fine; it's only when I attempt to run it that things gum up. --I'm fairly new to Javascript and the XML DOM, so it's entirely possible that I made an elementary error somewhere.

I'd appreciate any help the community can provide.

Scratch that, in your initial call, don't quote out the variable name: xmlhttp.open("GET", dname, false); — faino
– faino, Commented May 30, 2013 at 2:44
Done that, still no dice...Do you see anything else that could be causing the problem? — The Walrus469
– The Walrus469, Commented May 30, 2013 at 2:52

GotDibbs · Accepted Answer · 2013-05-30 02:49:09Z

2

For starters, have you tried looking at the built in debugging tools (called developer tools) it offers? See here for a basic intro: https://developers.google.com/chrome-developer-tools/. If you open up the developer tools as mentioned in the link, the code you've posted spits out a couple of errors along the way into the Console tab.

Your two issues with the code that the developer tools would show for you:

When you attempt to access your variable xmlDoc you have cased it incorrectly.
In your loadXMLDoc function your open call is requesting a relative resource called "dname" (as a string), what it looks like you're trying to do is actually use the variable dname.

A corrected version would therefore be:

function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET",dname,false);
xmlhttp.send();
return xmlhttp.responseXML; 
}

xmlDoc =     loadXMLDoc("https://dl.dropboxusercontent.com/u/22818342/Testing/javascript_test4.xml");

x = xmlDoc.getElementsByTagName("name");

var content = function()
{
    document.write(x[0].childNodes[0].nodeValue);
};

answered May 30, 2013 at 2:49

GotDibbs

3,1571 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

The Walrus469 Over a year ago

Problem solved! I'll remember to use the debug tools next time. Of course, now I'm frustrated because I spent several hours phrasing and rephrasing my functions only to have the problem be in my casing and basic syntax...ah well, c'est la vie. Thank you so much!

faino · Accepted Answer · 2013-05-30 03:03:08Z

0

Here is a bit more unobtrusive way to approach parsing XML into your document, as well as an error fall back:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <title>XML Example</title>
        <meta charset="UTF-8" />
        <script>
            function content(dname) {
                var xhttp = null, xml = null, names = null, html = "", output = document.getElementById("output");
                output.innerHTML = "Loading...";
                if(window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                if(!xhttp) {
                    output.innerHTML = "Failed to make the request!";
                } else {
                    xhttp.open("GET", dname, false);
                    xhttp.send();
                    xml = xhttp.responseXML;
                    names = xml.getElementsByTagName("name");
                    for(var i = 0, len = names.length; i < len; i++) {
                        html += names[i].childNodes[0].nodeValue + "<br />";
                    }
                    output.innerHTML = html;
                }
            }
            window.onload = function(){
                document.getElementById("button").onclick = function(){
                    content("https://dl.dropboxusercontent.com/u/22818342/Testing/javascript_test4.xml");
                };
            };
        </script>
    </head>
    <body>
        <button type="button" id="button">Click Me</button>
        <div id="output"></div>
    </body>
</html>

answered May 30, 2013 at 3:03

faino

3,23417 silver badges17 bronze badges

2 Comments

The Walrus469 Over a year ago

I'll keep this in mind for my actual, more complicated project. Thank you! Other quick question: what does the third ("false") parameter on xhttp.open() actually do?

faino Over a year ago

It's for whether or not the call is made asynchronously, more information can be found here

Vignesh · Accepted Answer · 2013-05-30 03:52:03Z

0

USe ctrl+shift+j key in firefox to see errors, if you use firebug, go to "NET" menu tab in firebug there you can able to see request and response or any error.

To know more about xml parsing Have a look on this site XML DOM

answered May 30, 2013 at 3:52

Vignesh

1,51812 gold badges31 silver badges60 bronze badges

Collectives™ on Stack Overflow

Javascript XML parsing not working

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related