Confused about AJAX XMLHttpRequest

Question

The javascript is

function loadXMLDoc()
{
  xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      x=xmlhttp.responseXML.documentElement.getElementsByTagName("CALL");
      txt=x + x.length;
      document.getElementById("myDiv").innerHTML=txt;
    }
  }
xmlhttp.open("GET","ajax/calls.xml",true)
xmlhttp.send();
}

The response (seen by firebug) is

<?xml version="1.0" encoding="ISO-8859-1"?>
<CALL>
  <ID>0</ID>
</CALL>

I expect it to print something like "[0],1" (i.e. a list with one element, and the length of the list), but instead it prints "[object NodeList]0", so it doesn't see any "CALL" elements at all. What's going wrong? Thanks.

Answer 1

Your "x" variable will be a NodeList, not a string. You're going to have to work out what that "txt" string should be by iterating over your <call> elements, or whatever; it depends on what you want to see.

Also, when you leave off var in all of your variable declarations like that, somewhere a tiny kitten gets a thorn in its paw.

Answer 2

x is an xml NodeList

var txt = x.item(0).nodeValue + ', ' + x.item(0).childNodes.length;

Update

var call = xmlhttp.responseXML.documentElement;
var ids = call.getElementsByTagName('ID');
var txt = call.nodeName + ', ' +  call.nodeValue + ', ' + ids.length;

childNodes field return 3 elements two empty text nodes (before and after <ID>2</ID>)

var children = call.childNodes;
for (i=0; i<children.length; ++i) {
    println("'" + children.item(i).textContent +  "'");
}

prints

''
'0'
''