import XML Elements error - Ajax code

bimatngoinhama

02-18-2006, 02:36 PM

I do not know the reason.

In data.xml file, when i do not put html tag like

<?xml version="1.0" encoding="UTF-8"?>
<data>
<pets>
<pet>Cat</pet>
<pet>Dog</pet>
<pet>Fish</pet>
</pets>
</data>

The code below will work

<script type="text/javascript">
function loadXMLDoc(url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}

function processReqChange() {
// only if req shows "loaded"
if (req.readyState == 4) {

// only if "OK"
if (req.status == 200) {
var result=req.responseXML;
if (!result.documentElement && req.responseStream) {
result.load(req.responseStream);
}
var ev = result.getElementsByTagName('pet');
document.getElementById("cd2").innerHTML=result.getElementsByTagName("pet").length;

} else {
alert("There was a problem retrieving the XML data:\n" +
req.statusText);
}
}
}
</script>
<body>

<a href="#a" onclick="loadXMLDoc('data.xml')">Test</a>
<div id="cd2"></div>
</body>

It returns 3 Ok

But when I try to change data.xml like

<?xml version="1.0" encoding="UTF-8"?>
<data>
<pets>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td><pet>Cat</pet></td>
</tr>
<tr>
<td><pet>Dog</pet></td>
</tr>
<tr>
<td><pet>Fish</pet></td>
</tr>
</table>
</pets>
</data>

The script will return 0 :( Maybe it does not find <pet> element? What is different here? Please help me how to solve the problem Thanks in advance

Skyzyx

02-18-2006, 11:26 PM

Well, first of all, XML is intended for data, not presentation, so trying to include a table within the XML data is highly discouraged.

Secondly, it seems you're getting back status codes instead of your data. Looking at the XMLHttpRequest code you've got there, it looks broken. My suggestion? Simplify your life with something like moo.ajax (http://www.mad4milk.net/entry/moo.ajax)... seriously.

Try loading moo.ajax (as well as the required Prototype (http://prototype.conio.net/) or Prototype Lite (http://moofx.mad4milk.net/scripts/prototype.lite.js) libraries), and give this code a whirl:

<script type="text/javascript">
function loadXMLDoc(file) {
var options = {
method:'get',

onComplete:function(req) {
var xml = req.responseText;
$('cd2').innerHTML = xml.getElementsByTagName('pet').length;
return false;
}
};

ajax(file, options);
}

</script>

<a href="" onclick="loadXMLDoc('data.xml')">Test</a>
<div id="cd2"></div>

bimatngoinhama

02-19-2006, 03:52 AM

yeah, it works now :thumbsup: thank you thank you Skyzyx :thumbsup:

:)

KC-Luck

02-19-2006, 04:20 AM

Worked fine after a slight modification for running it via file: protocol, from local files here that is.

<html>
<head>
<title>loadXMLDoc sample</title>
<script type="text/javascript">

function loadXMLDoc(url) {
try {req = new XMLHttpRequest();} catch(e) {
try {req = new ActiveXObject("Microsoft.XMLHTTP");} catch(e) {}}
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
var remoteServer = (/^http:/i.test(url) || /http:/.test(location.protocol));
if (!remoteServer || req.status == 200) {
var result = req.responseXML;
if (!result.documentElement && req.responseStream) {
result.load(req.responseStream);
}
var pets = result.getElementsByTagName("pet");
document.getElementById("cd2").innerHTML = pets.length;
} else {
alert("There was a problem retrieving the XML data:\n"+ req.statusText );
}
}
};
req.open("GET", url, true);
req.send(null);
} else {
alert("Your browser does not support Ajax functionality.");
}
}

</script>
</head>
<body>
<a href="#cd2" onclick="loadXMLDoc('XMLFile1.xml')">Test</a>
<div id="cd2"></div>
</body>
</html>
Also, in response to Skyzyx, libraries are quite nice, but I think many people here want to LEARN the code :) so then they can know what is going on...?

Just keep in mind, if you test these pages locally, you will not have receive some properties that would be set from remote server responses.

req.status will return 0
req.statusText will return "Unknown"
even though you have valid responseXML/responseText

Skyzyx

02-19-2006, 06:14 PM

Also, in response to Skyzyx, libraries are quite nice, but I think many people here want to LEARN the code :) so then they can know what is going on...?

I agree with you 100%. You should always take the time to learn how something works, as doing so will make you a better coder. However, once you understand how it works, then it becomes a matter of being as efficient as possible, IMHO.

Prototype and moo.ajax are very efficient and very helpful tools for handling these kinds of things. Prototype especially has a TON of built-in functionality that truly makes life simpler for people working with particularly dynamic stuff.

Hope this helps! :thumbsup:

KC-Luck

02-20-2006, 04:41 PM

Yes, but even better, create your "own" library, when you have surpassed the error-prone libraries available :)
All depends on your results, we need enterprise-level e-learning applications, so can't leave any methods up for mis-interpretations/exceptions :)

Teach a man to code well, and feed them for life :)
or, something like that...