Ajax: Aprendiendo a cargar contenido en un div

Ya es hora de que vaya empezando a escribir un poco sobre ajax, hace tiempo que vengo utilizando esta tecnología pero voy tirando de librerías o de ejemplos realizados por terceros y aún no me había puesto a analizarlo detalladamente.

Como siempre, lo primero es un poco de teoría:

Ajax, mas que una tecnología en sí es un conjunto de tecnologías (XHTML, CSS, DOM, XML, XSLT, JSON, XMLHttpRequest) unidas con Javascript. Utilizando Ajax conseguiremos mejorar considerablemente la interacción del usuario con la aplicación (web), ya que la página no necesitará ser recargada, actuará en segundo plano, por lo que el usuario siempre tendrá información en la pantalla.

Y que mejor que empezar entendiendo de lo que hablamos, que con un ejemplo, cargar contenido en un div con ajax:

Para ello he creado 2 funciones, la primera crea un objeto según el navegador y realiza una petición HTTP al servidor web, al realizar la petición devuelve un estado, pues cuando este estado cambie se ejecutará otra función:

function Carga(url,id)
{
//Creamos un objeto dependiendo del navegador
var objeto;
if (window.XMLHttpRequest)
{
//Mozilla, Safari, etc
objeto = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//Nuestro querido IE
try {
objeto = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try { //Version mas antigua
objeto = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!objeto)
{
alert("No ha sido posible crear un objeto de XMLHttpRequest");
}
//Cuando XMLHttpRequest cambie de estado, ejecutamos esta funcion
objeto.onreadystatechange=function()
{
cargarobjeto(objeto,id)
}
objeto.open('GET', url, true) // indicamos con el método open la url a cargar de manera asíncrona
objeto.send(null) // Enviamos los datos con el metodo send
}

Y la función a la que llamamos localiza el estado recibido y según la respuesta, cargamos el contenido en el div o mostramos un gif animado simulando una precarga, también podemos poner en texto “Cargando…” o cualquier otro mensaje que queramos.

function cargarobjeto(objeto, id)
{
if (objeto.readyState == 4) //si se ha cargado completamente
document.getElementById(id).innerHTML=objeto.responseText
else //en caso contrario, mostramos un gif simulando una precarga
document.getElementById(id).innerHTML='<img src="loader.gif" alt="cargando" />'
}

Una vez tenemos las funciones creadas, solo nos falta llamarlas, podemos hacerlo por ejemplo a través de un enlace:

<a href="javascript:Carga(cargar.html, contenido);" title="Cargar contenido">Cargar contenido</a>

Recordando que el primer parámetro es la URL que queremos cargar y el segundo es la ID del div en el que la cargaremos.

75 pensamientos en “Ajax: Aprendiendo a cargar contenido en un div

  1. Pingback: Bitacoras.com

  2. Eso lo tengo claro, ahora viene la duda, cuando queremos cargar una url en un div y esa url (como es normal) tiene imagenes? porque a mi no me las carga, solo el texto.

    gracias

    • Hola felix!
      ¿Has comprobado la ruta de la imagen, que sea correcta? Parece una tonteria, pero muchos veces nos complicamos buscando problemas mas graves y suelen ser cosas sencillas :)
      Si no es por eso avisame y pongo un ejemplo con una imagen, un saludo!

  3. Hola felix….

    Según tengo entendido, cuando haces la carga de una URL de manera asincrona, las referencias de esa URL (En este caso las imagenes) se convierten en referencias de la pagina que carga la URL. Así que deberás hacer las referencias como si las hicieras desde la URL pincipal y no desde la URL que cargas de manera asincrona…

    Saludos!!

  4. hola es muy interesante tu post….
    ahora me gustaría que me orientaras ….como puedo yo cargar en el segundo div un video de youtube.
    Tengo una web en la que quiero poner una lista de videos que al ser presionados carguen en otro div el video solicitado….. no se si me doy a entender soy muy novato en esto. gracias y espero tu respuesta

    • Hola Cesar! Pues en el archivo cargar.html pones el codigo de lo que quieras mostrar (en este caso de los videos), no tiene mayor complicación, de todas formas si no te aclaras avisa y lo miramos con más detalle :) Saludos!

  5. ja….. gracias funciona de maravilla….. tenía la impresión de que sería algo mas complicado!!! espero con esto poder resolver mi problema gracias. Por cierto soy de México y también soy diseñador gráfico me late esto del diseño web pero soy muy novato…………ese es mi mail por si te interesa intercambiar ideas saludos estamos en contacto natali …;)

  6. Hola. Me estoy volviendo loco, yo estoy cargando un html con una galeria de imagenes ligthbox dentro de una div, y me funciona en todos los navegadores excepto en Safari de Mac. Necesito que funcione tambien en el navegador prederteminado de Mac, Safari.

    Alguna idea??

    • Hola Carlitros! Pues así sin verlo no sabría decirte, revisa que no tengas fallos de síntasix y si no das con ello pon el enlace para verlo en funcionamiento y poder buscarle una solución ;) Saludos!

  7. Hola. Soy diseñadora, y encontrando diferentes ejemplos en la web arme una seccion de novedades para un cliente donde los contenidos se cargan con ajax en un div. Pero tambien tengo problemas al cargar una galeria de imagenes, hecha en Slideshow Pro para flash. Si desde mi pagina de novedades (http://test.lynchco.com.ar/novedades.php) voy al link “ver mas” de la primera noticia, me carga en el div superior todo, menos la galeria. Pero si ven el contenido que estoy cargando fuera de ese div, la galeria se ve perfecto (http://test.lynchco.com.ar/novedades/2009-hotelga.php) Los links en el xml y en el flash son absolutos, para que no hubiera problemas a la hora de cargar archivos, pero aun asi, no logro solucionar el tema. Si alguien me puede dar una ayuda con esto, porque no se que hacer. Gracias!

  8. Me surgió una duda, al cargar el contenido en el div hasta ahí todo bien, pero si yo actualizo la página por lo que sea el contenido desaparece, como se podría solventar esta parte.

  9. de que mandera puedo cargar un html con un archivo java dentro de un div…. osea que el html que cargamos trae su propio js.
    M e gustaría que me pudieran orientar….. saludos y gracias

  10. Hola Nnatali,
    Estoy utilizando tu scripy y en firefox va estupendo.
    El problema lo tengo para cargar el primer contenido en el div cuando se carga la página, en vez de a través de enlace.
    Tengo un

    window.onload = function () {
    Carga(‘inicio.html’, ‘contenido’);}

    pero en IE (8) me dice que existe error en la página, acceso denegado, y me señala la linea de código

    objeto.open(‘GET’, url, true)

    ¿sabes qué puede ser? he dado mil vueltas y no consigo adivinarlo
    (soy bastante novata)

    Gracias!

  11. Hola, estoy probando cargar el html dentro de un div como dijiste pero no funciona! me estoy volviendo loca porque nosé porque será. La url está bien, creo. (no puse la ruta comleta sino :”2009.html” que es el nombre del html que quiero cagar). Da error. Y lo raro es que sacando tus archivos y guardandolo en mi máquina tampoco funciona. Me da error tambien (el mismo que sí funciona Online) podrias ayudarme?
    gracias!

  12. ya está. lo solucioné. el problema ahora es que cargo una página en el div, y ésa página a su vez, tiene una galeria de imágenes , quisiera que cada imagen cargue otra página pero dentro del mismo contenedor. Puse en target: “contenedor”” pero nada. Copié el script al comienzo igual que el index y chequé la ruta y aparentemente está bien. es que no se puede cargar una dentro de otra?
    Gracias!

  13. error. ya estoy haciendo modificaciones y ahora nose porque no me funciona nada. tengo que revisar todo de nuevo. No se qué pasa que en Firefox funciona ero en IE no me funciona
    por favor si alguien me puede tirar una ayuda!
    gracias

  14. Hola!
    ¿Qué problema tenéis? ¿No habéis conseguido cargar contenido dentro del div? Tenéis un enlace al ejemplo en el post, donde podéis ver el código fuente por si no entendéis algo de lo que comenté.
    De todas formas podéis volver a comentarlo, explicando qué es lo que intentáis hacer y qué error os aparece e intento ayudaros :)
    Saludos!

  15. LOL solo fue bromeando, ya conocia el code, claro que con algunas modificaciones ^_^, por propositos de compatibilidad, lectura de codigo entrante JS, entre otros.

    Esta bien Co0L tu Blog! , espero que sigas asi :D!

  16. nnatali!!, no me funciona NADA en internet explorer 7. en firefox al parecer no hay problema pero no logro que funcione en IE.

    subi una prueba en:

    http://www.pilararamendi.com/prueba/indexpilar.html

    solo funciona el link que dice obras/oleos/ “2004-2008″ en el menu de la izquierda. si te fijas en firefox al clickear ahi, carga las miniaturAS en el centro. y al clikear en cada miniatura carga la grande en el centro también, pero en IE directamente me dice “error en página”-
    por favorrrr me estoy volviendo loca de verdad, necesito ayuda que es para un cliente , en realidad le estoy haciendo el trabajo pensando que no me iba a representar muchas complicaciones, ya que queria cambiar la web bien sencilla, como se ve…
    saludos y gracias de antemando

  17. quiera saber como hago para que me funcione un datapicker ya que encontrado en la web infinidad de librerías para ello y funcionan pero cuando quiero cargarlos en los divs no pasa nada como si no reconociera la librería ante mano agradezco sus posibles ayudas

  18. QUISIERA Q ME AYUDARAN A TENER UNA IDEA LA FUNCION ESTA BUENISIMA PERO COMO SE ARIA QUE AL ACTUALIZAR LA PAGINA EL CONTENIDO CARGADO SE MANTENGA EN LA PAGINA Q SE CARGO……. SI TIENEN UNA IDEA PORFAVOR ???

  19. ehy despues de mucho probar y desesperarme por que no me corria el script en IE logre encontrar la solucion al error de asiganacion, el script no funciona con IE en localhost, para probarlo deben subirlo a un servidor y funciona de maravilla no importa la version de IE, FF, Chorme y safari!!
    espero le sirva se cuidan y me encanta este blog por cierto

  20. No se ni como llegue aqui :D
    De todas formas es mejor practica en esa funcion generica, tratar de asignar de inmediato el div (GETELEMENTBY) que hacerlo desde HREF.

    A3011 No entendi lo que quieres :S y tengan en cuenta que los divsa cargados via AJAX pueden tener problemas con algunas librerias asi que miren el evento 3 o 4 del estado “Ready” si les pasa esto, sin mas suerte.

  21. Hola Natali…..gracias por el post esta muy bueno,pero tengo un solo problemita y es que despues de haber cargado un archivo no se puede actualizar la pagina debido a que vuelve al principio y no se queda en el mismo lugar(con el archivo cargado)…..
    Gracias de antemano..

  22. hola nnatali;
    soy super nuevo en esto, si me pudieras aclarar el codigo que pegaste en la parte superior la de cargar la pagina cargar.html en un div
    en que archivos(extensiones) tengo que copiar las funciones cargar y descargar y en que parte el link,
    he tratado de intentar hacerlo todo desde html, creo que no es la manera, si me pudieras ayudar

  23. hola nnatali tu codigo funciona muy, es decir carga un contenido en un div, hasta ahi excelente.
    el problema es cuando actualizo el contenido, es decir actualizo algunas cosas y luego vuelvo a cargar el contenido en el div, pero ya no me carga el
    contenido actulizado, sino el anterior y para q me cargue el contenido actulizado tengo q eliminar el historial del navegador. nose si me puedes ayudar
    necesito tu ayuda porfavor es para un sistema contable q estoy haciendo:D

  24. hola nnatali;
    probe el codigo y funciona pero cuando actualizo el contenido del div que quiero mostrar,
    me carga el contenido no actulizado, por favor ayudame

  25. Prueba algo como esto:

    FAjax(“tupagina.asp?idcarga=” + Math.random() + “&ruta=” + ruta,”divVer”,””,”POST”,true);

    idcarga=” + Math.random() para que cada vez que se llame la función no lea la cache del navegador.

    Saludos

  26. Buenos dias,
    Estoy utilizando ajax para cargar un html en un div, todo correcto, pero a la hora de trabajar con javascript no puedo acceder a los objetos a traves de su id porque segun me dice firebug, no se encuentran los objetos. Es decir, entra en los metodos javascript pero cuando quiero hacer un getElementById me da error. Si en cambio asigno ese mismo id a un elemento del html original (el que tiene el div) si funciona.

    Que puede ocurrir? Gracias y saludos

    • debo aclarar que quien llama al metodo javascript es la pagina padre (la que contiene el div) y desde ese metodo js quiero acceder a objetos del html hijo (cargado en div).
      Gracias

  27. hola .. se ve muy bueno .. pero no me funciona o he puesto asi

    Carga de datos

    function Carga(url,id)
    {
    //Creamos un objeto dependiendo del navegador
    var objeto;
    if (window.XMLHttpRequest)
    {
    //Mozilla, Safari, etc
    objeto = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
    //Nuestro querido IE
    try {
    objeto = new ActiveXObject(“Msxml2.XMLHTTP”);
    } catch (e) {
    try { //Version mas antigua
    objeto = new ActiveXObject(“Microsoft.XMLHTTP”);
    } catch (e) {}
    }
    }
    if (!objeto)
    {
    alert(“No ha sido posible crear un objeto de XMLHttpRequest”);
    }
    //Cuando XMLHttpRequest cambie de estado, ejecutamos esta funcion
    objeto.onreadystatechange=function()
    {
    cargarobjeto(objeto,id)
    }
    objeto.open(‘GET’, url, true) // indicamos con el método open la url a cargar de manera asíncrona
    objeto.send(null) // Enviamos los datos con el metodo send
    }

    Cargar contenido

     

  28. hola.. intente usar este codigo pero no me esta funcionando, en ningun navegador, tambien intente otro parecido, donde dejas la direccion en caso de que el navegador no tenga java y funciona.. pero todo se me va a la derecha y no puedo arreglarlo.. entonces, mi duda basicamente es si lo estoy haciendo mal o el hecho de que sean paginas en php y no html afecta en algo =/

  29. Hay manera de poder utilizar un campo que cargue imagenes algo asi como cuando enviamos un correo? que en esa campo las podamos copiar y pegar pero a la vez enviar los datos si alguien sabe de una solucion se los agradesco :)

  30. Pues en mi web ando haciendo unas actualizaciones de ajax, cuando hago una peticion y me regresa el resultado en un div, no puedo ejecutar js desde la pagina cargada en el div, Natali sabes como cargar un Js desde un div previamente cargado por ajax?

    Debo poner el js en la pagina que se ha cargado?
    Debo poner el js en la pagina padre?
    Hay alguna codificacion especial para lograr eso?
    De antemano Gracias.

  31. Hola muy buenas, excelente post, pero tengo una duda, podrias indicar en que paginas ba el codigo. Mi web tiene el index.php donde esta el div donde mostraremos los datos, y en un menu lateral tengo 10 opciones, el codigo lo tengo que poner en las 10 paginas diferentes??

    Un saludo.

  32. Buenos dias, me place saludarlos, el codigo es muy interesante, quisiera saber si ese mismo se puede utilizar en vez de un href , un boton(submit), Gracias de ante mano.

  33. disculpa, estoy intentado con el código que proporcionas, pero tengo un problema… la página que estoy intentando direccionar se llama inicio.html pero me marca un error diciendo que inicio no está definido

  34. Hola, la verda me dijeron que con Ajax podia realizar algo parecido a lo que era el iframe , solo que esta vez tiene que estar dentro de un div en css, lei este articulo y la verda que no lo entendi ,será por que es primera vez que veo este lenguaje, si alguien ve este comentario favor ayudarme, saludos

  35. si me pueden ayudar quiero cargar en el DIV de una pagina web, peliculas de flash igual si tener que refrescar toda la pagina
    Espero sus comentarios y cooperación gracias
    saludos

  36. bueno a lo que vengo no e probado nada pero queria consultar que si con este codigo puedo hacer qe los comentarios que yo agregue se vean de una vez sin actualizar, la pagina.

    espero tu repuesta por sierto te puedo mostrar el codigo php que utilizo para que me eches un cable no uso Base de datos los comentarios los guardo en un archivo.txt

  37. Hola!!!
    Alguien sabe como muestro las imagenes del archivo .php que cargo en un Div usando la funcion.
    Es q me funciona pero solo me aparece el texto la imagen no carga, no sale..
    es algun problema en la funcion o con Ajax
    ????
    Graacias

    • ya encontre una forma
      poner la direccion de la imagen pero desde la pagina que llama la funcion para el Div no en la pagina que muestra el Div

      Pero no se si hay alguna otra forma
      ???

  38. He hecho una web que carga unos archivos de sonido de forma asincronica, pero tarda un tiempo en cargarlos todos y por tanto cuando en los primeros instantes doy al boton para ejecutar el sonido este no funciona hasta que está cargado.
    Si alguien supiera com poner una imagen que muestre que el sonido se está cargando se lo agradeceria ja que no encuentro la forma.
    Unload no me sirve porque solo atiende a que la pagina este cargada.

  39. Cordial saludo…le pido un gran favor y que pena abusar de de usted, estoy usando este codigo para cargar paginas con extension PHP dentro de un div, pero no me carga el codigo fuente para la validacion, ni el recapcha..de antemano le agradesco su ayuda.
    aca le expongo el codigo fuente.
    function ajaxFunction() {
    var xmlHttp;

    try {

    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
    } catch (e) {

    try {
    xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
    return xmlHttp;
    } catch (e) {

    try {
    xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
    return xmlHttp;
    } catch (e) {
    alert(“Tu navegador no soporta AJAX!”);
    return false;
    }}}
    }

    function Enviar(_pagina,capa) {
    var varajax;
    varajax = ajaxFunction();
    varajax.open(“POST”, _pagina, true);
    varajax.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

    varajax.onreadystatechange = function() {
    if (varajax.readyState==1){
    document.getElementById(capa).innerHTML = “….”;
    }
    if (varajax.readyState == 4) {

    document.getElementById(capa).innerHTML=varajax.responseText;

    }}

    varajax.send(null);
    }

    segun GOOGLE en variso foros el problema radica en esta funcion
    varajax.open(“POST”, _pagina, true);
    ya la he modificado y nada.
    Gracias

  40. Mira yo hice uno de acuerdo a otros ejemplos y me quedo asi.

    Archivo cargardivs.js

    function Carga(url,id)
    {
    var objeto;
    if (window.XMLHttpRequest)
    {
    objeto = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
    try {
    objeto = new ActiveXObject(“Msxml2.XMLHTTP”);
    } catch (e) {
    try {
    objeto = new ActiveXObject(“Microsoft.XMLHTTP”);
    } catch (e) {}
    }
    }
    if (!objeto)
    {
    alert(“No ha sido posible crear un objeto de XMLHttpRequest”);
    }
    objeto.onreadystatechange=function()
    {
    cargarobjeto(objeto,id)
    }
    objeto.open(‘GET’, url, true)
    objeto.send(null)
    }
    function cargarobjeto(objeto, id)
    {
    if (objeto.readyState == 4)
    document.getElementById(id).innerHTML=objeto.responseText
    else
    document.getElementById(id).innerHTML=”
    }

    Y pues en el html podrias hacer esto

    Actualizar Registro

    y claro bueno creas la pagina2.html q se cargara en el div y listo ;)

  41. Hola lo que io quiero es cargar una pagina dentro de div pero q los enlaces que abro..sean abiertos dentro del mismo div…ayuda

  42. Hola amigo, estoy implementando tu código en un ejercicio xajax que estoy desarrollando y en el cual requiero mostrar información de una URL. Hay cosas de tu código que no entiendo y no encajan en xajax, te las explico poco a poco a ver si me ayudas.
    Primero, la variable objeto es global, cierto?
    Luego, qué es catch? Es una variable que tu diseñaste o es una expresión propia de ajax? Esta pregunta la hago pues xajax no reconoce esa expresión como válida y necesito saber que hace dentro del código para entonces darle su traduccion en xajax.
    Por último, con la expresión (!objeto) estás negando? Esto se debe a que en xajax tendría que hacerlo de otra forma. Gracias por la ayuda que me puedas facilitar. Abrazos

    • Maldito amor, maldito amor, no vengas mas
      Maldito amor, maldito amor, no vengas mas
      Maldito amor, maldito amor, no vengas mas
      Maldito amor, maldito amor, no vengas mas
      Maldito amor, maldito amor, no vengas mas
      Maldito amor, maldito amor, no vengas mas

  43. Maldito amor, Maldito amor, no vengas mas.

    Pero luego te marchas y me quedo despeinado al fondo del pasillo 5 años mas me esperan.

  44. Hola. Necesito cargar una gran cantidad de registros desde una BD (unos 18.000) para luego tratarlos con un autocomplete de jquery. El problema obviamente radica en que la carga se hace eterna, incluso supera el tiempo de respuesta del servidor. ¿Como podría hacerse de forma asíncrona?
    Muchas gracias
    Antonio

  45. Natali preciosa!

    Fíjate que use tu código y me funciona de maravilla, pero hasta ahora que una página manda valores a la siguiente y no recibo nada, ya probé con GET y con POST, es la función la que no lo hace pasar, porque cuando no la uso y utilizo una carga de una página a otra, entonces todo funciona bien. Que cambios tendría que hacer a tu código (imagino que es en la parte de javascript) para que me pase valores de un formulario con get o post ?

    Gracias por tu ayuda !!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>