My First Ajax application

Mon Aug 06, 2007 10:56 am

My first Ajax application ,(Read XML file from AJAX) this application is so simple.The AJAX application read an XML file from the server and load some data from it.

Here is the html file :
html code

<html>
<script type="text/javascript">
//read data from xml file
function getXMLdata()
{
var request=null;

  //Depends on the your browser 
    if(window.XMLHttpRequest)	
	{
       //Mozila FireFox
	request=new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
       //Internet Explore
	request = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	if(request)
	{
	//The autocalled funtion when the status changed
request.onreadystatechange = function() {

//Status cases of the readState varrible
  if(request.readyState==0)
document.getElementById('status').innerHTML='Uninitialized';
else  if(request.readyState==1)
document.getElementById('status').innerHTML='Loading...';
else  if(request.readyState==2)
document.getElementById('status').innerHTML='Loaded';
else  if(request.readyState==3)
document.getElementById('status').innerHTML='Interactive';
else  if(request.readyState==4)
{
document.getElementById('status').innerHTML='Completed';
var xml_response = request.responseXML;
xml_response.loadXML(request.responseText);
	 var myname=xml_response.getElementsByTagName('name');
	 document.getElementById('Txtdata').value=myname[0].childNodes[0].nodeValue;
}
 
}
      
	request.open("GET","Data.xml");
	//send the request 
	request.send(null);
 	
	}
	else 
	//not request opened
	document.getElementById('Txtdata').value='Nothing';
}

</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- used for as a meta informaton to the browser -->
<title>Untitled Document</title>
</head>

<span id = "status"></span ><br>
<input type="text" id="Txtdata" />
<input type="button" value="Load"  onclick="getXMLdata();" />
<body>
</body>
</html>

And here is XML file :
xml code

<?xml version = "1.0" ?>
<Boss>
<name>AAA</name>
<age>43
</age>
<sex>Male
</sex>
<name>ALI</name>
<age>43
</age>
<sex>Male
</sex>
</Boss>

In the beginning i faced an problem when i tried to show the data. Every time i had to got " undefined " instead of the real data.The problem was in the following part of the code.
javascript code

document.getElementById('Txtdata').value=myname[0].childNodes[0].nodeValue;

You have to take care where is your element position in the XML file and which node you want to get data from inside the XML file.

My First Ajax application

My First Ajax application

Topic Tags