Buenas soy nuevo en AJAX y Jquery y obviamente estoy practicando. Resulta que tengo el siguiente código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="js/calendario.js"></script>
<script type="text/javascript" src="js/tratarXML.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
</head>
<body>
<h3>Listado de datos del archivo calendario.xml</h3>
<table id="datos">
</table>
<script type="text/javascript">
crearTabla();
</script>
</body>
</html>
Fichero calendario.js
class Evento {
constructor(fecha, hora, comentario){
this.fecha = fecha;
this.hora = hora;
this.comentario = comentario;
}
}
function cargarEventosXML(){
try{
var evento = undefined;
var respuestaXML = cargarXML("calendario.xml");
if(respuestaXML != null){
var coleccionEvent = new Array();
}
var eventos = $(respuestaXML).find("evento");
$(eventos).each(function(){
evento = $(this).children();
var even = new Evento(evento[0].textContent, evento[1].textContent, evento[2].textContent);
coleccionEvent.push(even);
});
}catch(e){
alert("Error al cargar los datos del archivo XML");
coleccionEvent = null;
}
return coleccionEvent;
}
function crearTabla(){
var clEventos = cargarEventosXML();
if(clEventos != null){
$(clEventos).each(function(){
$("#datos").append("<tr><td>"+$(this).fecha+"</td>
<td>"+$(this).hora+"</td><td>"+$(this).comentario+"</td></tr>");
});
}else{
$("#datos").append("<tr><td>No hay eventos registrados</td></tr>");
}
}
Fichero tratarXML.js
function cargarXML(rutaArchivoXML){
$.ajax({
url: rutaArchivoXML,
dataType: "xml",
success: function(respuesta){
var DocXML = respuesta;
return DocXML;
},
error: function(req, status, err){
console.log(req, status, err);
return null;
}
});
}
Fichero calendario.xml
<?xml version="1.0" encoding="UTF-8"?>
<eventos>
<evento>
<fecha>01/03/2012</fecha>
<hora>20:00</hora>
<comentario>Cine</comentario>
</evento>
<evento>
<fecha>01/17/2012</fecha>
<hora>08:00</hora>
<comentario>Carrera Matutina</comentario>
</evento>
<evento>
<fecha>01/17/2012</fecha>
<hora>19:00</hora>
<comentario>Ensayo del coro</comentario>
</evento>
</eventos>
Bueno ese el código que tengo hecho. Mi problema está en esta linea:
var respuestaXML = cargarXML("calendario.xml");
La funcion cargarXML siempre me devuelve undefined, no entiendo el porque, a lo mejor me estoy equivocando en algo. Si alguien me podría ayduar y decir el error de mi código y como solucionarlo. Gracias
var respuestaXML = cargarXML("calendario.xml");
? No la veo por ninguna parte.