entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

recuperar un archivo del servidor con ajax sin jquery

hola muchachos esta vez tengo un error al solicitar un archivo con ajax, la idea consiste en que cuando se presione un enlace este mande a llamar el archivo y lo muestre en un apartado de mi pagina.

<head><script type="text/javascript" src="conexion.js"></script></head>

 <nav id="menu-vertical">
    <ul>
        <li><a href="" id="link-clothes">clothes</a></li>
        <li><a href="">madone2012</a></li>
        <li><a href="">verano2012</a></li>
        <li><a href="">verano2013</a></li>
    </ul>
 </nav>
 <div id="seccion-datos"></div>
ajax = new XMLHttpRequest();

seccionDatos = document.getElementById('seccion-datos');

linkClothes = document.getElementById("link-clothes");

linkClothes.addEventListener("onclick", function(){
ajax.open("get", "prueba.txt", true);

ajax.onreadystatechange=function() {  
       if (ajax.readyState==4 && ajax.status==200) {
          texto=ajax.responseText;
          seccionDatos.innerHTML= texto;

          } 
       }

ajax.send(null);
})

ouput en consola

Uncaught TypeError: Cannot read property 'addEventListener' of null
at conexion.js:12
(anonymous) @ conexion.js:12

1 Respuesta

3votos

Leonardo-Tadei Puntos216110

Hola @steven,

Si el código JS está invocado en la cabecera del documento, tenés un problema de orden.

Cuando se ejecuta el JS, los elementos de más abajo todavía no existen, entonces linkClothes = document.getElementById("link-clothes"); devuelve nulo porque no se cargó todavía.

Pasá el código JS abajo del todo, al final del documento, para garantizar que los ID ya existan, o creá los listener dentro del evento onLoad() que se ejecuta después de que la página cargó por completo.

Saludos cordiales

steven comentado Mar 17

hola @Leonardo-Tadei acabo de hacer la modificacion pero esta vez la pagina se recarga y no me devuelve nada ni un mensaje de error.

<html>
<nav id="menu-vertical">
    <ul>
        <li><a href="" id="link-clothes">clothes</a></li>
        <li><a href="">madone2012</a></li>
        <li><a href="">verano2012</a></li>
        <li><a href="">verano2013</a></li>
    </ul>
 </nav>
 <div id="seccion-datos"></div>

 <script type="text/javascript" src="conexion.js"></script>
ajax = new XMLHttpRequest();

seccionDatos = document.getElementById('seccion-datos');

linkClothes = document.getElementById("link-clothes");

linkClothes.addEventListener("onclick", function(){
ajax.open("get", "prueba.txt", true);

ajax.onreadystatechange=function() {  
       if (ajax.readyState==4 && ajax.status==200) {
          texto=ajax.responseText;
          seccionDatos.innerHTML= texto;

          } 
       }

ajax.send(null);
})

nota como es eso del evento onload, antes lo usaba como atributo del body pero el script estaba embebido, si lo tengo en un archivo externo lo que se me ocurre es capturar el body luego asignare el evento pero no creo que esto sea lo que tu sugieres

Leonardo-Tadei comentado Mar 17

Hola @steven,

el error está en la asignación del listener. Lo correcto es:

...
linkClothes.addEventListener("click", function(){
...

sin el ON.

También es incorrecta la forma en que tenés el enlace, con el HREF vacío, porque eso provoca que se recargue la misma página, entonces no se alcanza a ver la llamada AJAX.

Lo correcto es:

<li><a href="#" id="link-clothes">clothes</a></li>

o cancelar el evento en el manejador de la función clik.

Saludos cordiales.

steven comentado Mar 18

muchas gracias maestro, que me recomiendas si quiero hacer lo mismo con todos los enlaces, repetir el listener para cada uno o utilzar un delegation
suponiendo que quiero agregar aun mas enlaces esto seria un poco tedioso
estoy pensando llamar imagenes desde mi servidor como lo hacia con mi buscador, esta vez pero se deberian de mostrar todas las imagenes de mi carpeta, para esto voy a crear un script php que recorra la carpeta

Leonardo-Tadei comentado Mar 18

Abrí otra pregunta sobre esa cuestión @steven, así ED queda más ordenado y útil para otros que tengan el mismo problema...

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta