0

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

4
  • ¿La siguiente linea te imprime algo en la consola del navegador? console.log(req, status, err); Commented el 21 ene. 2018 a las 16:44
  • Hola buenas. No, no se mete en esa linea. Si hago un punto de parada en en la linea donde comento que se origina el error, me lleva al fichero tratarXML.js y cuando se quiere ejecutar $.ajax() no se mete dentro de la función. Commented el 21 ene. 2018 a las 16:51
  • ¿En qué parte del código usas esta línea: var respuestaXML = cargarXML("calendario.xml");? No la veo por ninguna parte.
    – A. Cedano
    Commented el 21 ene. 2018 a las 18:07
  • Perdón, lo acabo de corregir. Cortar y pegar y me equivoque. Ahora está puesto. Commented el 21 ene. 2018 a las 18:17

2 respuestas 2

2

Asi como lo explica dddenis, respuestaXML siempre va a ser indefinido porque cuando se ejecuta el código, aún no ha llegado la respuesta.

Para tu caso, la primera solución que se me viene a la mente incluye los siguientes cambios:

function cargarEventosXML(respuestaXML){

    try {
        var evento = undefined;

        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 cargarXML(rutaArchivoXML){
    $.ajax({
        url: rutaArchivoXML,
        dataType: "xml",
        success: function(respuesta){
            cargarEventosXML(respuesta);
        },
        error: function(req, status, err){
            console.log(req, status, err);
        }
    });
}

cargarXML("calendario.xml");

De esta forma, defines las dos funciones independientes. Entonces primero se llama cargarXML("calendario.xml") y si es exitoso el AJAX, se llama cargarEventosXML enviandole la respuesta como parametro.

Espero que te sea de ayuda esta idea.

3
  • Buenas entonces según lo que he entendido es que antes, mandaba la petición llamando a esa función, como ajax puede o no devolver la respuesta en ese mismo momento, por lo tanto sigue la siguiente linea, por lo que respuestaXML mi variable, siempre quedaba con undefined. Estoy en lo correcto? es así la idea? Si me lo puedes aclarar. Si es así, entonces lo he entendido. Commented el 22 ene. 2018 a las 16:05
  • 1
    Estas cerca, no se trata de que pueda o no devolver la respuesta. Ajax siempre te da la respuesta, lo que no se sabe es cuanto se tarde y como es un proceso asincrono, el código continua su ejecución sin esperar el ajax. Commented el 22 ene. 2018 a las 16:16
  • Una última pregunta amigo. En el parámetro success, la función anónima que recibe por respuesta 3 parámetros (respuesta, estado, xhr). Al xhr queria agregarle el evento readystatechange para obtener información de los diferentes estados. Pero da este error: xhr.addEventListener is not a function. A que se debe? Commented el 24 ene. 2018 a las 19:45
2

La petición AJAX se ejecuta asíncronamente, por lo tanto puedes o no tener el resultado al momento, por lo tanto necesitas tratar el resultado de manera asíncrona, con un callback, Promise o Observable.

function cargarXML(rutaArchivoXML, onSuccess, onError){
    $.ajax({
        url: rutaArchivoXML,
        dataType: "xml",
        success: function(res) { onSuccess(res); },
        error: function(err) { onError(err); }
    });
}

cargarXML('file.xml', 
    (res) => {
        console.log('La respuesta es: ', res);
    },
    (err) => {
        console.log('Ha habido un error.', err);
    }
);
2
  • Si podrías ser tan amable de aclarar mejor tu código, eso de onSuccess, onError y luego (res) => no he manejado eso. Soy estudiante y como verás estoy aprendiendo. Gracias por comentar. Commented el 21 ene. 2018 a las 19:21
  • 1
    onSuccess y onError son el nombre de 2 variables que representan funciones que serán utilizadas como callback, es decir, se ejecutarán en el código de la función de cargarXML, pero se escribirán/definirán en otro lugar fuera de al función cargarXML. Lo que hago es ejecutar onSuccess cuando ha ido bien la petición o onError cuando ha ido mal, en el lugar dónde estén definidas estas funciones el código de ellas actuará. Sobre "(res) =>" es una forma de abreviar las funciones y su contexto del this, el equivalente a una función "normal" sería function(res) {}.
    – dddenis
    Commented el 21 ene. 2018 a las 20:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.