Categories
AJAX Browsers DHTML Free Stuff HTML Java Script Misc Web & Programming Web Browsers XHTML XML

Better way to load XML document with Javascript

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

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>

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

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>

By Alaa Badran

Front-End and Web developer

One reply on “Better way to load XML document with Javascript”

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 *