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?