about retrieving data from xml and display it in the html page

**acoder** · Jun 11 '08, 06:00 PM

Welcome to Bytes!

See this example. You can also load an XML file without using Ajax, e.g. see this link. If you don't understand something or you can't adapt it to your needs, come back and ask.

PS. please use code tags when posting code. Thanks!

**vpriya6** · Jun 11 '08, 07:02 PM

[QUOTE=acoder]Welcome to Bytes!

Hi,
Thanks for your reply.
I saw the example in wschools.com/
In the example they are retrieving the records from the xml file. But here I have only one record.How can I do that?????
Please could you send me the code. Totally I am new to javascript and Ajax.......
Hope you will help me out.

Thanks

**acoder** · Jun 11 '08, 07:07 PM

Whether you have one record or many records, the code would be the same or similar. Show what you've tried.

**vpriya6** · Jun 15 '08, 06:27 PM

About retrieving data from xml

This code I tried to get records from the xml file.
I have a textfield tf1. In that text I will enter a customer id and when I click on customer id , it has to check that textfield with the customerid tag in the customerinfo.xm l file, if it matches it should display all the information of the customer else it should display alert message customerid not found.

I have two files customerinfo.xm l file and customerinf.htm l

customerinfo.xm l

[CODE=xml]<CUSTOMER>

<CUSTOMERID>111 1</CUSTOMERID>

<NAME>
<FNAME>Antony </FNAME>
<MNAME>Heff</MNAME>
<LNAME>huj</LNAME>
</NAME>

<CONTACT>
<EMAILID>abc@ya hoo.com</EMAILID>
<ALT_EMAILID>cd fvr@gmail.com</ALT_EMAILID>
<CONTACT_PHONE> 1234567895</CONTACT_PHONE>
<ALT_PHONE>4258 6934552</ALT_PHONE>
<ALT_PHONE2>789 4561230</ALT_PHONE2>
<ADD_LINE1>gthe nn</ADD_LINE1>
<ADD_LINE2>eeee </ADD_LINE2>
<ADD_LINE3>vbcc b</ADD_LINE3>
<CITY>Bangalore </CITY>
<ZIP>825021</ZIP>
<COUNTRY>Indi a</COUNTRY>
</CONTACT>

<PHOTOS>waterli ly.GIF</PHOTOS>

</CUSTOMER>
[/CODE]

customerinf.htm l file

[HTML]<html>
<form name="ff">
<head>
<title>Customer Info</title>
</head>

<script type="text/javascript">[/HTML]

Code:

	var xmlhttp;
	var xmlObj; 

	function loadXMLDoc(url)
	{				
		xmlhttp=null;
	
		if (window.XMLHttpRequest)
	  	{// code for IE7, Firefox, Mozilla, etc.
	  		xmlhttp=new XMLHttpRequest();
	  	}
		else if (window.ActiveXObject)
	  	{// code for IE5, IE6
	  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  	}
		if (xmlhttp!=null)
	  	{
	  		xmlhttp.onreadystatechange=onResponse;
	  		xmlhttp.open("GET",url,true);
	  		xmlhttp.send(null);
	  	}
		else
	  	{
	  		alert("Your browser does not support XMLHTTP.");
	  	}
	}

	function onResponse()
	{
	if(xmlhttp.readyState!=4) return;
	if(xmlhttp.status!=200)
	  {

	  alert("Problem retrieving XML data");
	  return;
	  }

	txt="<center><table border='3'><tr>";
	
	txt = txt + "<td>Customer ID</td><td>";
		
	y=xmlhttp.responseXML.documentElement.getElementsByTagName("CUSTOMERID");	        


		if(ff.tf1.value == y[0].firstChild.nodeValue)
	           {
                     alert("Strings are Equal");
                   }
		else
                   {
                     alert("Strings are Not Equal");
                   }


	txt=txt + y[0].firstChild.nodeValue + "</td></tr>";
			
	x=xmlhttp.responseXML.documentElement.getElementsByTagName("NAME");
	
	for (i=0;i<x.length;i++)
	  {
	  //txt=txt + "<tr>";
	  
	  xx=x[i].getElementsByTagName("FNAME");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<td>Name</td><td>" + xx[0].firstChild.nodeValue + " ";
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
	  xx=x[i].getElementsByTagName("MNAME");
		{
		try
		  {
		 	  txt=txt +  xx[0].firstChild.nodeValue +" ";
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		xx=x[i].getElementsByTagName("LNAME");
		{
		try
		  {
		    txt=txt +  xx[0].firstChild.nodeValue + "</td>";
		  }
		catch (er){
		  txt=txt + "<td> </td>";
		  }
		}
		
	  txt=txt + "</tr>";
	  }

Code:

z=xmlhttp.responseXML.documentElement.getElementsByTagName("CONTACT");
	
	for (i=0;i<z.length;i++)
	  {
	  //txt=txt + "<tr>";
	  
	  zz=z[i].getElementsByTagName("EMAILID");
		{
		try
		  {
		  	  txt=txt + "<td>Contact</td><td>Email ID</td><td>" + zz[0].firstChild.nodeValue + "</td></tr>";
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
	  zz=z[i].getElementsByTagName("ALT_EMAILID");
		{
		try
		  {
		  	txt=txt + "<tr><td></td><td>Alternate Email ID</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("CONTACT_PHONE");
		{
		try
		  {
		  txt=txt + "<tr><td></td><td>Contact Phone</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ALT_PHONE");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>Alternate Phone</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ALT_PHONE2");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>Alternate Phone 2</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ADD_LINE1");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>Address Line 1</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ADD_LINE2");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>Address Line 2</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ADD_LINE3");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>Address Line 3</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("CITY");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>CITY</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ZIP");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>ZIP</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("COUNTRY");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>COUNTRY</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		
	  txt=txt + "</tr>";
	  }
	  
	  a=xmlhttp.responseXML.documentElement.getElementsByTagName("PHOTOS");
	  txt = txt + "<tr><td>Photos</td><td><img src=" +a[0].firstChild.nodeValue + " width=100 height=100 border=2></td></td></tr>";
	  
	  
	  
	txt=txt + "</table></center>";
	document.getElementById('copy').innerHTML=txt;
	}

[HTML] </script>
</head>

<body bgcolor="lightg reen">
<center>
<br><br>
<div id="copy">
<b>Enter Customer ID<input type="text" name="tf1" ><br><br>
<button onclick="loadXM LDoc('customeri nfo.xml')">Get Customer Info</button></b>
</div>
</center>
</body>
</form>
</html>
[/HTML]

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Can any one tell me where did I go wrong.

**acoder** · Jun 16 '08, 09:10 AM

So what's working and what's not working in your code?

Please use code tags when posting code. See How to Ask a Question.

**vpriya6** · Jun 16 '08, 02:08 PM

With out this if condition in onResponse method, I am able to retrieve data from xml.

if(ff.tf1.value == y[0].firstChild.nod eValue)
{
alert("Strings are Equal");

}
else
{
alert("Strings are Not Equal");
}

But I want to retrieve based on the textfield value. Validaton I am unable to do it

Please can one give me the code for this.

**acoder** · Jun 16 '08, 02:34 PM

First problem: the form should be in the body, so move the form opening tag to inside the body. Secondly, when referring to the form "ff", use document.forms["ff"] or document.ff, not just ff globally.

**vpriya6** · Jun 16 '08, 04:58 PM

[HTML]<html>

<head>
<title>Customer Info</title>
</head>

<script type="text/javascript">
[/HTML]

Code:

	var xmlhttp;
	var xmlObj; 

	function loadXMLDoc(url)
	{				
		xmlhttp=null;
	
		if (window.XMLHttpRequest)
	  	{// code for IE7, Firefox, Mozilla, etc.
	  		xmlhttp=new XMLHttpRequest();
	  	}
		else if (window.ActiveXObject)
	  	{// code for IE5, IE6
	  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  	}
		if (xmlhttp!=null)
	  	{
	  		xmlhttp.onreadystatechange=onResponse;
	  		xmlhttp.open("GET",url,true);
	  		xmlhttp.send(null);
	  	}
		else
	  	{
	  		alert("Your browser does not support XMLHTTP.");
	  	}
	}

	function onResponse()
	{
	if(xmlhttp.readyState!=4) return;
	if(xmlhttp.status!=200)
	  {

	  alert("Problem retrieving XML data");
	  return;
	  }

	txt="<center><table border='3'><tr>";
	
	txt = txt + "<td>Customer ID</td><td>";
		
	y=xmlhttp.responseXML.documentElement.getElementsByTagName("CUSTOMERID");

Code:

		if(document.ff.tf1.value == y[0].firstChild.nodeValue)
	           {
                     alert("Strings are Equal");
                   }
		else
                   {
                     alert("Strings are Not Equal");
                   }


	txt=txt + y[0].firstChild.nodeValue + "</td></tr>";
			
	x=xmlhttp.responseXML.documentElement.getElementsByTagName("NAME");
	
	for (i=0;i<x.length;i++)
	  {
	  //txt=txt + "<tr>";
	  
	  xx=x[i].getElementsByTagName("FNAME");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<td>Name</td><td>" + xx[0].firstChild.nodeValue + " ";
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
	  xx=x[i].getElementsByTagName("MNAME");
		{
		try
		  {
		 	  txt=txt +  xx[0].firstChild.nodeValue +" ";
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		xx=x[i].getElementsByTagName("LNAME");
		{
		try
		  {
		    txt=txt +  xx[0].firstChild.nodeValue + "</td>";
		  }
		catch (er){
		  txt=txt + "<td> </td>";
		  }
		}
		
	  txt=txt + "</tr>";
	  }
	  
	  
	z=xmlhttp.responseXML.documentElement.getElementsByTagName("CONTACT");
	
	for (i=0;i<z.length;i++)
	  {
	  //txt=txt + "<tr>";
	  
	  zz=z[i].getElementsByTagName("EMAILID");
		{
		try
		  {
		  	  txt=txt + "<td>Contact</td><td>Email ID</td><td>" + zz[0].firstChild.nodeValue + "</td></tr>";
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
	  zz=z[i].getElementsByTagName("ALT_EMAILID");
		{
		try
		  {
		  	txt=txt + "<tr><td></td><td>Alternate Email ID</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("CONTACT_PHONE");
		{
		try
		  {
		  txt=txt + "<tr><td></td><td>Contact Phone</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ALT_PHONE");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>Alternate Phone</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ALT_PHONE2");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>Alternate Phone 2</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ADD_LINE1");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>Address Line 1</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ADD_LINE2");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>Address Line 2</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ADD_LINE3");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>Address Line 3</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("CITY");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>CITY</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("ZIP");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>ZIP</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		zz=z[i].getElementsByTagName("COUNTRY");
		{
		try
		  {
		  //document.writeln(xx[0].firstChild.nodeValue);
		  txt=txt + "<tr><td></td><td>COUNTRY</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
		  
		  }
		catch (er)
		  {
		  txt=txt + "<td> </td>";
		  }
		}
		
		
	  txt=txt + "</tr>";
	  }
	  
	  a=xmlhttp.responseXML.documentElement.getElementsByTagName("PHOTOS");
	  txt = txt + "<tr><td>Photos</td><td><img src=" +a[0].firstChild.nodeValue + " width=100 height=100 border=2></td></td></tr>";
	  
	  
	  
	txt=txt + "</table></center>";
	document.getElementById('copy').innerHTML=txt;
	}

[HTML] </script>
</head>

<body bgcolor="lightg reen">
<form name="ff">
<center>
<br><br>
<div id="copy">
<b>Enter Customer ID<input type="text" name="tf1" ><br><br>
<button onclick="loadXM LDoc('customeri nfo.xml')">Get Customer Info</button></b>
</div>
</center>

</form>
</body>

</html>
[/HTML]

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

When I enter some value in the text field and click on submit button..again I am getting the same page again...
What is the problem?

if(document.ff. tf1.value == y[0].firstChild.nod eValue)
{
alert("Strings are Equal");
}
else
{
alert("Strings are Not Equal");
}

how to get the the value from the textfield????
I wrote document.ff.tf1 .value is this right or not????

**acoder** · Jun 16 '08, 05:54 PM

Please enclose your posted code in [code] tags (See How to Ask a Question).

This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use [code] tags in future.

MODERATOR

**acoder** · Jun 16 '08, 06:01 PM

In your if statement, return if it doesn't match:
[code=javascript]if (document.ff.tf 1.value != y[0].firstChild.nod eValue) {
alert("Strings are not Equal");
return;
}
// the strings are equal so output the xml file contents
[/code]

**vpriya6** · Jun 16 '08, 06:33 PM

Still its returning back to the same page... I don't know what is the problem...
Could you please check the code once again and let me know what is the problem????...c ould you please give me the code??

**acoder** · Jun 16 '08, 06:59 PM

The problem is that you're using a button element. Use an input button instead:
[html]<input type="button" ...>[/html]

**vpriya6** · Jun 16 '08, 07:13 PM

I have written like this...

<input type="button" name="submit" value="submit" onClick="loadXM LDoc('customeri nfo.xml')" >

Still I am not able to get the output

What is the error????
Please let me know. Can you give me the code please

**acoder** · Jun 16 '08, 07:27 PM

Check the error console. Which browser are you testing on?

about retrieving data from xml and display it in the html page

about retrieving data from xml and display it in the html page

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment