Better way to load XML document with Javascript


Posted on December 31st, by Alaa Badran in AJAX, Browsers, DHTML, Free Stuff, HTML, Java Script, Misc, Web & Programming, Web Browsers, XHTML, XML. 1 Comment

Better way to load XML document with Javascript

The better way to load XML document on all browsers is to use AJAX technique.

After testing XML with Javascript. I fount that Safari (on Mac OSX 10) does not support XML with Javascript.
So, How to load it then?

Simply, AJAX load for XML is only way to do that.

So, i wrote the code below to enable XML load on all web browsers (Except browsers that does not support AJAX).

The code shows the import function for XML.


<script>
var xmlDoc;

function importXML() {
	var xfile = "test.xml";
	try{
                // for IE browsers. 
		if (window.ActiveXObject){
			var errorHappendHere = "Check Browser and security settings";
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
			xmlDoc.async=false;
			xmlDoc.load(xfile);
		} else if(window.XMLHttpRequest) {
                        // Browsers that support AJAX.
			var errorHappendHere = "Error handling XMLHttpRequest request";
			var d = new XMLHttpRequest();
			d.open("GET", xfile, false);
			//d.async=false;
			d.send(null);
			isSafari=true;
			xmlDoc=d.responseXML;
		} else {
                        // Other Browsers.
			var errorHappendHere = "Error Loading.";
			xmlDoc = document.implementation.createDocument("","",null);
			xmlDoc.async=false;
			xmlDoc.load(xfile);
		}
	} catch(e) {
	// Sending Error.
		alert(errorHappendHere);
	}
	
	runCode();
}
</script>

Below we continue managing XML document with JavaScript after load.


var counter;
function runCode(){
	try{
	num = xmlDoc.getElementsByTagName('item').length-1;
	} catch(e){}
	if(counter>num){
		counter = 0;
	}
	try{ var x = xmlDoc.getElementsByTagName('details'); 
	tdetails = x[counter].firstChild.nodeValue;} catch (e){ try{tdetails = xmlDoc.getElementsByTagName('details')[counter].childNodes[0].nodeValue;}catch(e){tdetails='';}}
	//alert("Data: "+xmlDoc.getElementsByTagName('name')[counter].firstChild.nodeValue);
	try{var tname = xmlDoc.getElementsByTagName('name')[counter].firstChild.nodeValue;} catch (e) { try{ tname = xmlDoc.getElementsByTagName('name')[counter].childNodes[0].nodeValue; } catch(e) {tname='';}}	
	try{
	var tlocation = xmlDoc.getElementsByTagName('location')[counter].firstChild.nodeValue;} catch (e){ 
	alert(); alert(tdetails +" ------- "+tname+" ------ "+tlocation);
	}
	
	counter++;
}


The XML document Schema is:


<?xml version="1.0" encoding="UTF-8" ?>
<contents>
	<item>
		<details><![CDATA[somedata here]]></details>
		<name><![CDATA[name here]]></name>
		<location><![CDATA[location here]]></location>
	</item>	
	<item>
		<details><![CDATA[some data here]]></details>
		<name><![CDATA[name here]]></name>

		<location><![CDATA[Location here]]></location>
	</item>	
	<item>
		<details><![CDATA[some data here]]></details>
		<name><![CDATA[Name here]]></name>
		<location><![CDATA[Location here]]></location>
	</item>	
</contents>





One thought on “Better way to load XML document with Javascript

  1. You should test for window.XMLHttpRequest first. It’s the standard. Also it’s the preferred method (over ActiveX) for those IEs that support it.

Leave a Reply

Your email address will not be published. Required fields are marked *