Ajax: Aprendiendo a cargar contenido en un div


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.
Todo este código es de javascript osea que debe ir dentro de los <head> y </head> luego debe ir dentro de <script type="text/javascript"> y </scrip> oe sino creando un archivo con terminación js ejmp: cargado.js y llamarlo dentro del head por ejm: <script src="autorecargado.js" type="text/javascript"></script>
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:


Mejora el Diseño de tu Web con Ajax
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" />'
}

ajax

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.



Javascript

Lightbox


Seguro que muchas veces han visto efectos en las fotografías al hacerle click, pues bien, esto es una librería de javascript muy fácil de implementar llamada lightbox. Ajax Lightbox es un script no intrusivo que permite mostrar una ventana por encima del contenido actual de una página. El término no intrusivo se utiliza para denominar al código javascript que no se ejecuta inmerso en el HTML si no que se aplica de manera indirecta una vez cargado el documento, permitiendo conseguir independizar completamente “Contenido, Presentación y Comportamiento. Comentar también que un script no intrusivo permite cumplir con el punto de verificación 6.3 de las normas de accesibilidad WCAG (prioridad 1, necesario para nivel A)


div


Lightbox2

Parte 1 - el programa de instalación

1. Álbum v2.0 utiliza el Marco de Prototype y Scriptaculous Efectos de la Biblioteca. Usted tendrá que incluir estos tres archivos Javascript en su cabecera.

<script type="text/javascript" src="js/prototype.js"> </ script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"> </ script>
<script type="text/javascript" src="js/lightbox.js"> </ script>

2. Incluya el álbum archivo CSS (o anexar su hoja de estilo activo con los estilos de álbum).

<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />

3. Verifica en el CSS y asegúrese de que el prevlabel.gif referencia y archivos de nextlabel.gif están en el lugar correcto, osea al subirlo al hosting editar el css y direccionar a las imagenes. También, asegúrese de que los archivos loading.gif closelabel.gif y como se indica en la parte superior del archivo lightbox.js están en el lugar correcto, en otras palabras, ubicar las direcciones de imagenes dentro del js y cambiar la direccion con el de la carpeta donde las subio.

Parte 2 - Activar

1. Añadir un rel = "lightbox" atribuir a un enlace de etiquetas para activar la mesa de luz. Por ejemplo:

href="images/image-1.jpg" rel="lightbox" <a title="Mi imagen caption"> # 1 </ a>

Opcional: Utilice el atributo de título si quieres mostrar el resultado de un título.
2. Si usted tiene un conjunto de imágenes relacionadas que le gustaría al grupo, siga el paso uno, sino, además, de un nombre de grupo entre corchetes en el atributo rel. Por ejemplo:

href="images/image-1.jpg" <a imagen rel="lightbox[roadtrip]"> # 1 </ a>
href="images/image-2.jpg" <a imagen rel="lightbox[roadtrip]"> # 2 </ a>
href="images/image-3.jpg" <a imagen rel="lightbox[roadtrip]"> # 3 </ a>

No hay límites al número de conjuntos de imágenes por página o cuántas imágenes están permitidos en cada conjunto. Vaya locura!
Mejora el Diseño de tu Web con Ajax

Link de los archivos: http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.04.zip

En la descarga tmb incluye un ejemplo de como utilizarlo!



Ejemplo Online: http://www.huddletogether.com/projects/lightbox2/#example

Ojala les Sirva ... y por favor comenten ...