XMLHttpRequest vs document.implementation

[msandersen]

I'm trying to get to grips with Javascript and Ajax. I've tried out a few scripts I've found.
In one script from the Apple developer site, they extract XML tags and display the content using getElementsByTagName('tagname')[0].firstChild.nodeValue

However, trying out an alternate method fails; I can get the responseText, but not the contents of the tags.

Here's a listing with 2 main functions. The first works, the other doesn't.
It says response.getElementsByTagName('apple')[0] has no properties

<script language="javascript">
<!--
function importXML()
{
	if (document.implementation && document.implementation.createDocument)
	{
		xmlDoc = document.implementation.createDocument("", "", null);
		xmlDoc.onload = createTable;
	}
	else if (window.ActiveXObject)
	{
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.onreadystatechange = function () {
			if (xmlDoc.readyState == 4) createTable()
		};
 	}
 	else
 	{
 		alert('Your browser doesn\'t support this script');
 		return
 	}
	xmlDoc.load('apple.xml');
}

function createTable() { 
  document.getElementById('xmlcontent').innerHTML = 
  	xmlDoc.getElementsByTagName('apple')[0].firstChild.nodeValue +
	'<br>' + xmlDoc.getElementsByTagName('macintosh')[0].firstChild.nodeValue
}

// Alternate //
var xmlDoc = false; 

function loadXMLDoc(url) {
    // Mozilla, Safari, Opera, IE7+  etc
    if(window.XMLHttpRequest) {  // && !(window.ActiveXObject)
	xmlDoc = new XMLHttpRequest();

    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
       	try {
        	xmlDoc = new ActiveXObject("Msxml2.XMLHTTP");
      	} catch(e) {
        	try {
          		xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
        	} catch(e) {
          		xmlDoc = false;
        	}
	}
    }
    else { alert("There was a problem retrieving the XML data:\n" + xmlDoc.statusText);
           return false 
    }
    if(xmlDoc) {
	xmlDoc.onreadystatechange = processReqChange 
	// To prevent caching in IE with GET
	// xmlDoc.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" );
	xmlDoc.open("GET", url, true);
	xmlDoc.send("");
    }
}

function processReqChange() {
    // only if xmlDoc shows "loaded"
    if (xmlDoc.readyState == 4) {
        // only if status is "OK"
     //   if (xmlDoc.status == 200) {
    	response = xmlDoc.responseXML.documentElement;
    	apple = response.getElementsByTagName('apple')[0].firstChild.data;
    	macintosh = response.getElementsByTagName('macintosh')[0].firstChild.data;  

    	document.getElementById('xmlcontent').innerHTML = //
    		response.getElementsByTagName('apple')[0].firstChild.nodeValue +
		'<br>' + xmlDoc.getElementsByTagName('macintosh')[0].firstChild.nodeValue +
		'<br>Apple: ' + apple + '<br>Macintosh: ' + macintosh;
   // } else {
     //       alert("There was a problem retrieving the XML data:\n" + xmlDoc.statusText);
     //   }
    }
}

// -->
</script>

<p><a href="javascript:importXML()">Import XML</a>. Compare the <a href="apple.xml">XML file</a>.</p>
<p><a href="javascript:loadXMLDoc('apple.xml');">XML test 2</a></p>
<p id="xmlcontent">This paragraph should contain the XML data.</p>

apple.xml:

<apple>
	This is the Apple tag.
	<macintosh>
		This is the Macintosh tag
	</macintosh>
</apple>

[msandersen]

I found an error, which makes it work in FireFox, but not IE.
Changed: '<br>' + response.getElementsByTagName in processReqChange()
I had to make some changes from the version posted here:
http://ww
w.xml.com/pub/a/2005/02/09/xml-http-request.html
Specifically, they specify
response = xmlDoc.responseXML.documentElement;
but it only works without the .documentElement

also their version has
apple = response.getElementsByTagName('apple')[0].firstChild.data;
but it needs
apple = response.getElementsByTagName('apple')[0].firstChild.nodeValue;

any suggestions as to why? And how to make it work cross-platform?