'Getting' data from xml to input into html via javascript (Beginner)

Question

--Updated Code to make it...more simple--

Kind of a strange situation, according to w3schools my code should work, but for some reason it doesn't...connect. Here's my code for my java script.

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
    </head>
    <body>
        <p id="intro">Hello</p>
        <script type="text/javascript" id="announce" src="announce.js"></script>
    </body>
</html>

JavaScript

/*jscript*/
var newannouncement = document.createElement('p');
newannouncement.id = 'announcing';
newannouncement.appendChild(document.createTextNode('Here is an announcement'));
var scr = document.getElementById('announce');
scr.parentNode.insertBefore(newannouncement, scr);      

if(window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
} else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

**xmlhttp.open("GET", "catalog.xml",false);**
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

var x=xmlDoc.getElementsByTagName("cd");
for (i=0; i<x.length; i++)
{
    alert("for")
}

XML

<?xml version="1.0"?>
<catalog 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="catalog.xsd">
    <cd>
    <author>Ferdi</author>
    <date>1192</date>
    </cd>
    <cd>
    <author>JRR</author>
    <date>1995</date>
     </cd>
</catalog>

Update 1

Due to the fact that I considered the previous code, too confusing, I've changed it to make it simpler so that I can actually find out what the heck is cracking off. The problem appears to be the xmlhttp.open() as the for loop doesn't run. I've switched to xhtml as it keeps the code...easier to read (for me) and I understand that document.write() doesn't work.

The problem

I simply just call the function in-line. The *'s indicate the line that fails. Now, I've tried just leaving it as announce.xml (leaving the announce.xml in same directory) and I've now tried moving it down a directory. I've also tried adding /../ but to no avail.

I didn't see any 'technical' requirements on the w3schools website...so I'm assuming like html it works out of the box.

Further notes

If possible if you're going to suggest technology, such as AJAX, could you please describe what it is, what it does and if possible a link to a suitable place to find out more. Thanks

I suspect something like this: http://stackoverflow.com/questions/5396527/error-origin-null-is-not-allowed-by-access-control-allow-origin-when-loading The example is with jQuery AJAX, but it also works with `xmlhttprequest`. — kapa, Feb 16 '12 at 21:34
You might consider using jquery as it simplifies every aspect of getting files/data from the server. http://api.jquery.com/jQuery.get/ is a good starting point to check out. It does require you to load an extra library but it wraps up that XMLHttp request so you don't have to worry about which browser can use which object and the error status's and such. You tell the api what url to hit, what data (if any) to send, what to expect back, what to do when the request completes successfully, and what to do in case of error. — scrappedcola, Feb 16 '12 at 21:39
jQuery isn't an option at this moment. Mostly due to the need to learn and a little to do with added software...you know what they say, too many cooks spoil the broth. But point taken. — Ravenshade, Feb 16 '12 at 21:49

RoToRa · Accepted Answer · 2012-02-20T08:20:00.773

(This isn't really an answer, but a comment, however I have several points I'd like to make which is easier in an answer).

Are you using a debugger with your browser (FireBug extention for Firefox, or the one built into Chrome or IE)? Is the Console in the debugger reporting an error? Also debuggers let you track the requests the browser makes. Does it show your request?

There are several points independent from your problem:

Be very careful with w3schools. Despite its name it's unrelated to W3C and the quality is often very lacking.
Any special reason you aren't using an AJAX framework such as jQuery? (It's great not using one, if you what to understand how AJAX works in it's basics, but a framework really simplifies everything).
You are doing a synchronous request, which you never should do. Synchronous requests block the browser making it unresponsive for the user.
You need to be very careful with document.write. It only works during page loading and because you are doing a synchronous request. In other cases you can easily "overwrite" your page with it.

EDIT:

The problem is most likely what @bazmegakapa suggested: XMLHttpRequest usually only works when on a web server. What you need to do is install a web server locally on your development computer and use it for testing. This is usually quite simple. Even Apache is quickly installed and runs with little configuration. Or a package with Apache and including a DB server (MySQL) and PHP called "AMP" which are often specifically made for local web page development and testing and are setup even easier. And finally many web development IDEs have a simple web server built in (I like Aptana Studio, for example).

What you are doing is commonly called "AJAX" which stands for "Asynchronous JavaScript and XML", except you are not doing it asynchronously, which you should not. Have a look at a short tutorial from the Mozilla Developer Network work how to do it right: https://developer.mozilla.org/en/AJAX/Getting_Started

If you still have problems, then you'll need to give more detailed information, most importantly the error message the browser gives in its console (see my remark on debuggers above).

Okay firstly 1. I agree and I am aware that w3schools is not w3c though it hasn't let me down yet. I mostly use it as a reference. — Ravenshade, Feb 16 '12 at 16:33
ups...don't press enter. Anyway. Secondly...AJAX? I'm just trying to get data from XML and put it into HTML... I know nothing about Ajax or for that matter JQuery. Thirdly...would you suggest a better solution? (First endeavour into xml). — Ravenshade, Feb 16 '12 at 16:35
@Ravenshade Don't use w3schools as a reference. You might just not be aware that it let you down :). Use MDN. Ajax is (originally) nothing but getting XML data asynchronously with Javascript, so basically what you are doing. Are you using these codes on your local machine, not through a webserver? Some browsers don't allow `xmlhttprequest` on local files. — kapa, Feb 16 '12 at 21:31
-_- thanks for that. That's probably the issue however I do need to test this before I upload to anywhere. Any other solution around xmlhttprequest? As for using w3schools as a reference, I do find it handy to remind myself but I actually haven't (personally) found anything better in terms of thoroughness or as broad, although I am currently looking through that list. — Ravenshade, Feb 16 '12 at 21:42
Nice and imnformative, thank you RoToRa! I'll start looking into the Asynchronous bit, there's a lot of conflicting information in tutorials. — Ravenshade, Feb 18 '12 at 02:26
@Ravenshade If you have conflicting information just open a new question on it. I'm sure someone here can sort it out. — RoToRa, Feb 20 '12 at 08:24