I rewrote the above usage example to work as a Javascript class, along with some comments that I wish I was told when I started doing JS Classes.
// A way to use XML in a JavaScript class, so as not to pollute the global namespace var classUsingXML = function () { // First, keep track of live instances: get the next instance in the array this.instance = classUsingXML.instances.length; //and set the array entry to ourselves classUsingXML.instances[this.instance]=this; /* Why do we do this? In the event of needing to use a member function in a setTimeout, for example, we can refer to ourselves as: setTimeout("classUsingXML.instances["+this.instance+"]()",5000);
Yes. I know it's a dirty kludge. You only need it if your script is going to be making periodic updates.
In the event we need to use a callback from an HTML tag (such as onClick), we would do it like this: tag.objXML=this; if (tag.attachEvent) tag.attachEvent('onclick',this.handler); //MS else if (tag.addEventHandler) tag.addEventHandler('click',this.handler,false); //W3C else tag.onclick=this.handler; //DOM 0 ... this.handler = function(e) { if (window.event) { e=window.event; objXML = e.srcElement.objXML; }else objXML = this.objXML; objXML.functionInClass(); } */ //Try it in W3C if (window.XMLHttpRequest) this.request = new XMLHttpRequest(); //No? How about Microsoft? else if (window.ActiveXObject) this.request = new ActiveXObject("Msxml2.XMLHTTP"); else { //No XML. Do something about it. } this.request.onreadystatechange = function () { //this currently refers to the XMLHttpRequest object if (this.readyState == 4) //we're ready if (this.responseXML != null) //It didn't return a blank doc, right? if (this.status == 400) { //If we got a '400 OK', do stuff with the result, for example: var myXMLTag = this.responseXML.getElementById("stuff"); if (myXMLTag.firstChild.data) document.getElementById("stuffTarget").innerHTML=myXMLTag.firstChild.data;
}else{ //We got an HTTP error. Do something about it. } else { //A different error; we got a blank document } //No else here; it's just not ready. } this.update = function () { try { this.request.open("GET", "myXMLDoc.xml", true); } catch (e) { /* The browser's not letting you do this. Why? Chances are, you're trying to run this from your local drive. For some reason, that's not allowed. */ } } }
classUsingXML.instances = Array();
// Instantiate the class... var myXML = new classUsingXML(); // And update your XML myXML.update();
Thanks for the update, Fordiman. I usually use JavaScript's object/class/JSON syntax in my own projects (JS isn't a true OOP language but it can get pretty close), but for this snippet, I was trying to keep things relatively simple so as not to turn off new coders
// A way to use XML in a JavaScript class, so as not to pollute the global namespace
var classUsingXML = function () {
// First, keep track of live instances: get the next instance in the array
this.instance = classUsingXML.instances.length;
//and set the array entry to ourselves
classUsingXML.instances[this.instance]=this;
/* Why do we do this?
In the event of needing to use a member function in a setTimeout,
for example, we can refer to ourselves as:
setTimeout("classUsingXML.instances["+this.instance+"]()",5000);
Yes. I know it's a dirty kludge. You only need it if your script is going to
be making periodic updates.
In the event we need to use a callback from an HTML tag (such as onClick),
we would do it like this:
tag.objXML=this;
if (tag.attachEvent)
tag.attachEvent('onclick',this.handler); //MS
else if (tag.addEventHandler)
tag.addEventHandler('click',this.handler,false); //W3C
else
tag.onclick=this.handler; //DOM 0
...
this.handler = function(e) {
if (window.event) {
e=window.event;
objXML = e.srcElement.objXML;
}else
objXML = this.objXML;
objXML.functionInClass();
}
*/
//Try it in W3C
if (window.XMLHttpRequest)
this.request = new XMLHttpRequest();
//No? How about Microsoft?
else if (window.ActiveXObject)
this.request = new ActiveXObject("Msxml2.XMLHTTP");
else {
//No XML. Do something about it.
}
this.request.onreadystatechange = function () {
//this currently refers to the XMLHttpRequest object
if (this.readyState == 4)
//we're ready
if (this.responseXML != null)
//It didn't return a blank doc, right?
if (this.status == 400) {
//If we got a '400 OK', do stuff with the result, for example:
var myXMLTag = this.responseXML.getElementById("stuff");
if (myXMLTag.firstChild.data)
document.getElementById("stuffTarget").innerHTML=myXMLTag.firstChild.data;
}else{
//We got an HTTP error. Do something about it.
}
else {
//A different error; we got a blank document
}
//No else here; it's just not ready.
}
this.update = function () {
try {
this.request.open("GET", "myXMLDoc.xml", true);
}
catch (e) {
/* The browser's not letting you do this. Why?
Chances are, you're trying to run this from your
local drive. For some reason, that's not allowed. */
}
}
}
classUsingXML.instances = Array();
// Instantiate the class...
var myXML = new classUsingXML();
// And update your XML
myXML.update();