PDA

View Full Version : XMLHttpRequest vs document.implementation



msandersen
01-29-2007, 05:16 AM
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
01-29-2007, 05:29 AM
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 (http://www.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?