0

Tengo este código en un .js

function mandarMain(secc){

    const seccionPrincipal = document.getElementById("mainPage");
    var dentro = seccionPrincipal.innerHTML;
    
    let blankSpace = document.createElement("p");
    blankSpace.innerHTML = "______________________________________________________________";
    blankSpace.style.cssText = "text-align: center; color: #D7DF01;";

    switch(secc){

        case "Inicio":

        break;

        case "Teatro":

            let encabezadoT = document.createElement("p");
            encabezadoT.innerHTML = "Teatro";
            encabezadoT.style.cssText = "text-align: center; font-family: castella;";
        
            if(!dentro.includes("Teatro")){

                while(seccionPrincipal.firstChild){
                    seccionPrincipal.removeChild(seccionPrincipal.firstChild);
                }

                seccionPrincipal.appendChild(encabezadoT);

                var conectaT = new XMLHttpRequest();
                conectaT.open( "GET", "obtenerTeatro.php", false );
                conectaT.send(null);

                console.log(conectaT.responseText);
            }

        break;
    }

}

Al final del case "Teatro", mando a la consola el responseText del XMLHttpRequest (para poder ver su contenido) y me aparece vacío. Como información adicional, la función es llamada desde un archivo .html, por un evento "onclick", y cuando abro el url directamente en mi navegador (el url de la página donde está el archivo obtenerTeatro.php") si me muestra la cadena que quiero mandar de regreso, ¿por qué no recibo nada entonces en el responseText?

1 respuesta 1

2

esto ocurre porque el código sigue trabajando incluso si la respuesta de tu PHP aun no a llegado, (así funciona JavaScript, es síncrono) y recordemos que las peticiones no son instantáneas, se demoran en llegar, lo que debes hacer es agregarle funciones a los eventos, con addEventListener a por ejemplo load, que es el evento de cuando se completa la petición. y allí llamar a funciones o manipular el código con las respuestas, y luego por ultimo llamar al metodo send(), entonces una vez se complete le peticion se ejecutara todo lo que esta dentro del conectaT.addEventListener("load", function() { }) en todo caso esto es super anticuado, hoy en dia se usa Ajax o fetch

case "Teatro":

    let encabezadoT = document.createElement("p");
    encabezadoT.innerHTML = "Teatro";
    encabezadoT.style.cssText = "text-align: center; font-family: castella;";

    if (!dentro.includes("Teatro")) {

        while (seccionPrincipal.firstChild) {
            seccionPrincipal.removeChild(seccionPrincipal.firstChild);
        }

        seccionPrincipal.appendChild(encabezadoT);

        var conectaT = new XMLHttpRequest();
        conectaT.open("GET", "obtenerTeatro.php", false);

        conectaT.addEventListener("load", function() {
            if (conectaT.status < 400)
                console.log("éxito",conectaT.responseText)
            else
                console.log("error",conectaT.statusText)
        });
        conectaT.send(null);

    }

    break;

    }

break;
4
  • Lo intentaré, y sinceramente intenté usar ajax, pero me revolví demasiado con el formato que usa, por eso preferí usar este método aunque si sea algo diferente. Muchas gracias por la amable respuesta, hice una consulta similar en SO en inglés, y fueron muy groseros
    – shiosaku
    el 18 sep. 2020 a las 1:36
  • la verdad es que es casi vital comprender Ajax o Fetch te invito a hacerle una repasada, pues XMLHttpRequest si bien te permite hacer todo, te encontraras al final con que reinventaras la rueda. y respecto a que fueron groseros, es porque allí son decenas de miles de personas y son muy estrictos con las normas, pues hay que mantener el orden. de igual forma te dejo un github creado por mi de un Ajax algo mas simple que cree github.com/jhonnattan123/NucleoAjax pero insisto, debes echarle una repasada a Ajax y Fetch no son mas que funciones con a los que les pasas objetos y callbacks el 18 sep. 2020 a las 1:42
  • 1
    Muchas gracias, si, le echaré un vistazo, esto lo ando haciendo en sí rápido porque es un proyecto que tengo que entregar ya mañana, por eso me fui como a lo "básico". Ahora no podré checarlo porque creo que hostinger está fuera de línea o algo, pero cuando termine esto me pondré a repasar mejor Ajax, ya con más calma
    – shiosaku
    el 18 sep. 2020 a las 1:47
  • Si funcionó, en serio muchas gracias, ahora si pondré terminar mi proyecto. Hay otra forma que pueda agradecerte? ya voté por tu respuesta y puse que fue útil.
    – shiosaku
    el 18 sep. 2020 a las 3: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.