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='
'
}
Una vez tenemos las funciones creadas, solo nos falta llamarlas, podemos hacerlo por ejemplo a través de un enlace:
Cargar contenido
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.
Por si no os ha quedado muy claro (que me temo que es lo más probable dado como me explico xD) aquí os dejo un ejemplo online 
Twittea esto Guardalo en Delicious Compartelo en Facebook
Julio 27th, 2009 at 18:56 pm
Información Bitacoras.com…
Valora en Bitacoras.com: 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 detall…..
Julio 29th, 2009 at 14:03 pm
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
Julio 29th, 2009 at 16:28 pm
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!
Agosto 5th, 2009 at 19:52 pm
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!!
Diciembre 8th, 2009 at 21:23 pm
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
Diciembre 10th, 2009 at 9:24 am
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!
Diciembre 11th, 2009 at 6:45 am
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 …;)
Diciembre 13th, 2009 at 12:03 pm
Buenas Cesar! Me alegra que te funcionase! lo mismo digo, ya sabes donde encontrarme para intercambiar ideas
Un saludo!
Enero 3rd, 2010 at 13:35 pm
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??
Enero 7th, 2010 at 17:26 pm
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!
Febrero 8th, 2010 at 14:20 pm
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!
Febrero 26th, 2010 at 22:48 pm
Hola me encuentro con el mismo problema que carlitros :s si hay alguna solucion o debo optar por otro metodo?
Marzo 24th, 2010 at 18:43 pm
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.
Marzo 27th, 2010 at 20:45 pm
hola cargue las funciones y le asigne los valores pero a la hora de hacerla andar me dice q el archivo no esta definido. alguin sabe por q eso?
Marzo 30th, 2010 at 18:15 pm
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
Mayo 9th, 2010 at 19:41 pm
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!
Junio 1st, 2010 at 20:38 pm
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!
Junio 2nd, 2010 at 20:11 pm
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!
Junio 17th, 2010 at 12:09 pm
carolina como hiciste para que te cargara la página ? porque a mi no me la carga gracias de antemado.
Junio 17th, 2010 at 17:07 pm
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
Junio 20th, 2010 at 23:56 pm
LOL al parecer nnatali se fugo
… con tantos problemas fue la mejor solucion 
Junio 21st, 2010 at 0:07 am
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!
Junio 21st, 2010 at 15:39 pm
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
!
Junio 22nd, 2010 at 11:49 am
Hola MasterOfdesigner!
No te preocupes que no me sentó mal, saludos y gracias por el comentario
Junio 22nd, 2010 at 17:38 pm
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
Julio 25th, 2010 at 19:56 pm
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
Julio 30th, 2010 at 18:36 pm
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 ???