You can find a working example here. Note that i modified the XML file. The script looks as following
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("beanRepresentation");
for (i=0;i<x.length;i++) {
document.write("<div class=\"normal\" id=\"");
document.write(x[i].getElementsByTagName("beanRepId")[0].childNodes[0].nodeValue);
document.write("\" style=\"text-align:left;\ top:");
document.write(x[i].getElementsByTagName("top")[0].childNodes[0].nodeValue);
document.write("em; left:");
document.write(x[i].getElementsByTagName("left")[0].childNodes[0].nodeValue);
document.write("em; height:");
document.write(x[i].getElementsByTagName("height")[0].childNodes[0].nodeValue);
document.write("em; width:");
document.write(x[i].getElementsByTagName("width")[0].childNodes[0].nodeValue);
document.write("em;\"></div>");
}
It is based on the w3schools example you linked to. Feel free to ask further questions.