Alaa Badran

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>

Related posts:

Tips for Better Website Performance How to convert HTML Forms into AJAX simply Drag and Drop with jQuery for Touch Devices How to: Drag and Drop with HTML5