0

estoy empezando con Ajax. He creado un script donde leo un archivo de texto externo a la web y lo inserta en un div. El script funciona, pero quiero insertar un archivo de texto diferente en otro div de la misma manera. Se que podría repetir el código, crear otra función leerArchivo2() y ya estaría pero me parece una manera muy chapucera de hacerlo. ¿Hay alguna forma de que la función leer archivo reciba por parámetro el objeto XMLHttpRequest y asigne a la variable texto de la función leerArchivo() el valor de un texto u otro?

Dejo el código del archivo js nada más porque el htmlcreo que es irrelevante para el caso

//Creamos el objeto XMLHttpRequest mediante una funcion. Es siempre el primer paso para trabajar con AJAX
function creaObjetoXMLHttpRequest() {

    //Variable que contendra el objeto XMLHttpRequest
    var objetoXMLHttpRequest = false;
    
    //Hay que comprobar si el navegador soporta el objeto XMLHttpRequest. Si no lo soporta, se intenta crear con ActiveX. Los navegadores que no soportan ActiveX no podran usar AJAX

    //Comprobamos si el navegador es una version de IE que no soporta el objeto XMLHttpRequest. Si es asi, se intenta crear con ActiveX. En caso contrario, se crea el objeto XMLHttpRequest que lo soporta los navegadores modernos

    if (window.ActiveXObject) {
        objetoXMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        
        if (window.XMLHttpRequest) {
            objetoXMLHttpRequest = new XMLHttpRequest();
        }
    }
    return objetoXMLHttpRequest;
    
}

//Asginamos el objeto XMLHttpRequest a la variable docTxt. Esta variable se usara en las funciones que iremos creando
docTxt = creaObjetoXMLHttpRequest(); 

//Abrimos el archivo externo  con open() y preparamos la peticion.Los parametros son: "GET" (para que el archivo se abra en modo lectura), "archivoExterno/textoInsertar.txt" (la direccion del archivo que queremos abrir), "true" (para que la peticion sea asincrona). Si no se pone "true", la peticion sera sincrona y el navegador se quedara bloqueado hasta que se cargue el archivo con lo que no podremos seguir navegando y perdemos la interactividad de AJAX
docTxt.open("GET", "archivoExterno/texto1.txt", true); 

//Funcion que recoge la respuesta del archivo. Si readyState es 4 y status es 200, el archivo se ha cargado correctamente
function leerArchivo() {
    if (docTxt.readyState == 4 && docTxt.status == 200) {  
        texto = docTxt.responseText;
    }
}

//Recogemos la respuesta del archivo. No ponemos parentesis porque no queremos que se ejecute la funcion, sino que se ejecute cuando se produzca el evento
docTxt.onreadystatechange = leerArchivo; 

//Enviamos la peticion al servidor
docTxt.send(); 



//Funcion para mostrar el texto en el div "salidaTexto"
function mostarTexto() {
    ver = document.getElementById("salidaTexto");
    ver.innerHTML = texto;
}
//Funcion para ocultar el texto en el div "salidaTexto". Sencillamente cambiamos el contenido del div por un espacio en blanco o un texto vacio
function ocultarTexto() {
    nover = document.getElementById("salidaTexto");
    nover.innerHTML = "";
}

//Funcion para mostrar el texto en el div "salidaTexto"
function mostarTexto2() {
    ver = document.getElementById("salidaTexto2");
    ver.innerHTML = texto;
}
//Funcion para ocultar el texto en el div "salidaTexto". Sencillamente cambiamos el contenido del div por un espacio en blanco o un texto vacio
function ocultarTexto2() {
    nover = document.getElementById("salidaTexto2");
    nover.innerHTML = "";
}

Espero haberme explicado bien, la idea es si puedo crear un docTxt2 con este mismo código y que la funcion leerArchivo() devueva uno u otro

Muchas gracias

1 respuesta 1

0

Según he podido documentarme, estás usando el evento onreadystatechange de una forma distinta a como lo pone en su documentación.

Basándome en dicha documentación, y parametrizando la función leerArchivo() con dos parámetros, uno que se corresponda con el archivo a leer, y el otro con el nombre de la función a ejecutar, y juntándolo todo dentro de la misma, esto a mi me ha funcionado de modo local:

function leerArchivo(url, nombreFuncion) {
    const docTxt = creaObjetoXMLHttpRequest(); 
    docTxt.open("GET", url, true);
    docTxt.onreadystatechange = () => {
        if (docTxt.readyState == 4 && docTxt.status == 200) {  
            texto = docTxt.responseText;
            this[nombreFuncion]()
        }
    };
    docTxt.send();
}

leerArchivo("archivoExterno/texto1.txt", "mostarTexto");
leerArchivo("archivoExterno/texto2.txt", "mostarTexto2");

Desconozco si realmente quieres ejecutar esas funciones según el archivo a llamar, pero ahí lo dejo por si te es de utilidad.

En un principio estaba realizando con eval() la llamada a la función parametrizada, pero es peligroso y he encontrado ese otro método que a mi me ha funcionado escribiendo el this[nombreFuncion]().

Aquí dejo el script completo que me funciona, para que no tengas dudas de lo que he quitado, y lo puedas probar tal cual (fíjate que hay un nuevo archivo a obtener llamado archivoExterno/texto2.txt en mi ejemplo):

<html>
<head></head>
<body>
<div id="salidaTexto"></div>
<div id="salidaTexto2"></div>

<script>
function creaObjetoXMLHttpRequest() {
    var objetoXMLHttpRequest = false;
    if (window.ActiveXObject) {
        objetoXMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        if (window.XMLHttpRequest) {
            objetoXMLHttpRequest = new XMLHttpRequest();
        }
    }
    return objetoXMLHttpRequest;
}


function leerArchivo(url, nombreFuncion) {
    const docTxt = creaObjetoXMLHttpRequest(); 
    docTxt.open("GET", url, true);
    docTxt.onreadystatechange = () => {
        if (docTxt.readyState == 4 && docTxt.status == 200) {  
            texto = docTxt.responseText;
            this[functionName]()
        }
    };
    docTxt.send();
}

leerArchivo("archivoExterno/texto1.txt", "mostarTexto");
leerArchivo("archivoExterno/texto2.txt", "mostarTexto2");

function mostarTexto() {
    ver = document.getElementById("salidaTexto");
    ver.innerHTML = texto;
}

function ocultarTexto() {
    nover = document.getElementById("salidaTexto");
    nover.innerHTML = "";
}

function mostarTexto2() {
    ver = document.getElementById("salidaTexto2");
    ver.innerHTML = texto;
}

function ocultarTexto2() {
    nover = document.getElementById("salidaTexto2");
    nover.innerHTML = "";
}
</script>
</body>
</html>

4
  • no lo he conseguido, aunque seguiré probando porque tu respuesta tiene toda la lógica del mundo. No consigo insertar el código que he hecho por falta de espacio pero he recurrido a jquery. Pero la idea es hacerlo en vanilla si doy con la solución la postearé, seguramente será como planteas y estoy haciendo algo mal
    – Rastajuan
    el 30 nov. 2022 a las 19:45
  • ``` $(document).ready(function () { $("#boton1").click(function (e) { e.preventDefault(); $.get("archivoExterno/texto1.txt", function (data) { $("#contenedor1").html(data); }); }); $("#boton3").click(function (e) { e.preventDefault(); $.get("archivoExterno/texto2.txt", function (data) { $("#contenedor2").html(data); }); }); }); ```
    – Rastajuan
    el 30 nov. 2022 a las 19:51
  • No consigo que lo escriba en formato código con ``` no sé por qué. De hecho he acabado creando dos funciones asignadas cada una al botón correspondiente. Seguiré probando, con el código de arriba consigo lo que quiero pero no de la forma que quiero
    – Rastajuan
    el 30 nov. 2022 a las 19:53
  • @Rastajuan He actualizado mi respuesta, a ver si ahora te sirve. No me di cuenta de lo que hacias antes y después de la función y tan solo apliqué la lógica a lo que me parecio que querias, pero mirándolo de forma completa y repasando las funciones y eventos he visto lo equivocado que estaba.
    – masterguru
    el 30 nov. 2022 a las 22:42

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.