<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
		table,th,td{
			border: 1px solid black;
			border-collapse: collapse;
		}
		th,td{
			padding: 5px;
		}
	</style>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>peticion ajax</title>
	<link rel="stylesheet" href="">
</head>
<body>
	
		<div id = "texto">
			<h2>obteniendo datos desde un xml atravez de ajax</h2>
			<button id="cargarAjax">mostrar informacion</button>
		</div>
		<table id= "demo"></table>
		
		
		

	

	<script>
		document.getElementById("cargarAjax").addEventListener("click", cargar);
		function cargar(){
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){
					cargarXML();
				}
				
			}
			xhr.open("GET", "js_caso3.xml", true);
			xhr.send();
		}
		function cargarXML(xml){
			var docXML = xml.responseXML;
			var tabla = "<tr><th>Artista</th><th>titulo</th></tr>";

			var discos = docXML.getElementByTagName("CD");
			for(var i = 0; i < discos.length; i++){
				tabla += "<tr><td>";
				tabla += discos[i].getElementByTagName("Artist")[0].textContent;
				tabla += "</td><td>";
				tabla += discos[i].getElementByTagName("TITLE")[0].textContent;
				tabla += "</td></tr>";
			}
			document.getElementById("demo").innerHTML = tabla;
		}

	</script>



</body>
</html>