Javascript function not loading xml properly

Question

Hey guys, I've looked around online and on here a fair amount in order to try and figure out what the problem with this is. I am a newbie to anything not html, and I can not figure out why this XML is not loading.

Say I just have two files, "/contact.xml" and "/xmltest.html" and I want to load the xml into the html page using javascript. Here is what I have so far.

<html>
<body>
<h1>Carney Contacts Test</h1>
<b>Name:</b> <span id="name"></span><br />
<b>Email:</b> <span id="email"></span><br />
<b>Phone:</b> <span id="number"></span>

<script type="text/javascript">
var xmlhttp=new XMLHttpRequest();

xmlhttp.open("GET","contacts.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.getElementById("name").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;

document.getElementById("email").innerHTML=
xmlDoc.getElementsByTagName("email")[0].childNodes[0].nodeValue;

document.getElementById("phone").innerHTML=
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
</script>

</body>

Much of this was directly off the w3c site, and I still can not get it to work! Chrome is giving me "Uncaught TypeError: Cannot call method 'getElementsByTagName' of null", if that helps anyone.

Help appreciated!

What doesn't work exactly? Does the request fire? Have you considered using a library like jQuery to fix cross-browser compatibility issues? — Pekka
– Pekka, Commented Nov 10, 2010 at 20:57
Are you using Firefox? Load the XML page manually, and see if your traversing is correct, and return the correct value. And don't forget that .firstChild is a simpler way to write .childNodes[0] — LostInTheCode
– LostInTheCode, Commented Nov 10, 2010 at 21:05

TeaDrivenDev · Accepted Answer · 2010-11-10 21:15:24Z

1

You missed the next part on the site (I suppose by "w3c" you mean w3schools.com):

if (window.DOMParser)
  {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(text,"text/xml");
  }
else // Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
  }

The XML text needs to be loaded into a DOM parser; in your above code, xmlDoc is just an arbitrary variable without any DOM parsing abilities.

But I guess the first problem is that you're maybe just opening the HTML file via the local file system - in that case your XML document will never be loaded, because an XMLHttpRequest only works via HTTP; it can only load stuff from a web server, not from the file system (which is why the responseXML is null, as the browser reports).

edited Nov 10, 2010 at 21:15

answered Nov 10, 2010 at 21:09

TeaDrivenDev

6,62937 silver badges51 bronze badges

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

3 Comments

bobince Over a year ago

Er, W3C (w3.org) is the organisation that produced the DOM spec and many other web standards. W3Schools is an independent web site full of error-prone documentation and poor-quality tutorials, whose name seems to imply a relationship with W3C where there is none. Anyhow, getting the reponseXML DOM from a XMLHttpRequest is more cross-browser reliable than manual XML parsing; the question is just why the property has unexpectedly come back as null.

TeaDrivenDev Over a year ago

Yes, I know about W3C and W3Schools. The property has come back as null most probably because the OP tried to execute an XMLHttpRequest without HTTP, i.e. the xmltest.html page was not called from an actual web server.

elykl33t Over a year ago

Ohk, thanks guys. I had figured it had something to do with opening it locally, because i found some documentation of that online but could not fully understand it. However, I did figure that much out.

bobince · Accepted Answer · 2010-11-10 21:46:18Z

0

How are you serving contacts.xml? Check it gets an appropriate Content-Type for XML, eg text/xml.

If you aren't serving contacts.xml at all, but just accessing it from the file system, well, that's your problem. Some browsers (Chrome, IE with native XMLHttpRequest) don't allow a web page on the filesystem to read other documents from the filesystem, as it's a clear security risk. Open up the JS console in Chrome's developer tools and you'll see the explanatory error:

XMLHttpRequest cannot load file:///.../contacts.xml. Cross origin requests are only supported for HTTP.

Chuck your files on a local web server and it should work fine.

answered Nov 10, 2010 at 21:46

bobince

538k111 gold badges675 silver badges846 bronze badges

2 Comments

elykl33t Over a year ago

Ok, thanks to everyone for helping me out. But now, I am having a problem with the content-type. When I add the DOMParser code in, I get an error telling me that text is not defined. How can I fix this?

bobince Over a year ago

You've used a variable text without assigning it from anything (eg xhr.responseText). But, don't use DOMParser. Use the responseXML document.

Collectives™ on Stack Overflow

Javascript function not loading xml properly

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related