Problems accessing xml on localhost and access to getbytagname
Hello,
I am new to javascript coding and and am trying to access an xml doc on the localhost and write its contents to a div. The xml file is not formated as a hierarchical data file unfortunately but rather as html, i.e., <table>, <tr>, <td>, etc. tags. The data I'm trying to get to is in the <td> tags - see code below. So, I'm trying too access the xml doc, "parse" the dom, get to the values in the <td> tags, and write the table of data (from the xml file) to the targetDiv. Right now, nothing is happening when I click the input button, i.e., no errors, etc., nothing happens. Thanks for any help!
Code:
<html>
<head>
<title>Ajax at work</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
var txt,x,xx,i;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
txt="<table
border='1'><tr><th>Score</th><th>Origin</th><th>Target</th><th>Target
Location</th><th>Purpose</th></tr>";
//document.write("XML document loaded into an XML DOM Object.");
x=xmlhttp.responseXML.documentElement.getElementsByTagName("<TD>");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("<TD>");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("<td>");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('targetDiv').innerHTML=txt;
}
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Fetching data...</H1>
<form>
<input type = "button" value = "Display Message"
onclick = "getData('http://localhost/IIQ/out_RSS_example2.xml', 'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>
</body>
</html>
Ok, now using the error console and I was getting at least one syntax error - added a missing curly bracket. Now I'm getting the following error but I'm not sure why the function is null or undefined or not an object. I defined it in the head of the document, etc. The xml file which it points to is there on the localhost in the path specified, so not sure what's up.
SCRIPT5007: The value of the property 'getData' is null or undefined, not a Function object
BTW, can you recommend a good free dev environment?
Ok, yes, my code may be a little screwy, but that's why I'm here :-) And, I do really appreciate the help!
Agreed, seeing the xml is probably a good idea, so I'm pasting it below..... I think it's not a "pretty" xml file or not formated as an xml data file should be, but it wasn't for me to choose. I just have to parse it and display the data in the tables (well, actually the contents of the whole file, but I'm starting with the data in the tables). Hopefully I can convince the client that they need to format the xml as xml data, etc.
True it is html and good/great suggestion! However, I have a couple objectives going on - 1st is to parse the file/data, but 2nd is to access xml on remote servers and parse the xml (albeit in this case html). I need to do both, access the file on a server, and parse it. I also have other objectives on the presentation or client-side, but right now, I'd like to pretend that this is an actual xml file on a server. Eventually my customer will produce an actual xml file (and I need to know how to do this in general), hopefully sooner rather than later.
So, wondering if you (all) can still help me figure out why my code isn't finding all the <td>'s and spitting them out onto the screen in the target div? The code is supposed to create an html table of the data in that xml(html) file.
So, wondering if you (all) can still help me figure out why my code isn't finding all the <td>'s and spitting them out onto the screen in the target div? The code is supposed to create an html table of the data in that xml(html) file.
Also, if by "remote servers" you mean servers OTHER than the one where the HTML page is running, you can't do that with JavaScript. JavaScript only allows you to access data from the SAME DOMAIN as the page running the script.
You would need to set up a proxy server on your own domain that fetched the remote data for you. Not hard to do, but can't be done with JS.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Ok, sorry for the delay.....life etc., but i tried the code you provided and unfortunately it didn't work. The console reports that it's missing a ";" but I don't see where it should be - I mean, it looks like all of the ';' are in the right place.
???
Michael
P.S. Thanks for the heads-up on accessing other servers via js!
Success! Got it to work! Copy and pasted from the quote/editor. I had to edit the path to the data file to: "http://localhost/IIQ/some.xml".... Why would I have to specify the specific path if the the file, some.xml, was in the same directory as the index.html?
Will this code work on my original file that isn't formatted as xml (i.e., it's just html)? (I'll try it and see.) If you think it won't work, what can I do to get my original code to read the html file - basically to do what you did with this xml file?