Tecnología AJAX con jQuery y CSS
AJAX son las siglas de Asynchronous JavaScript And XML. No es un lenguaje de programación sino un conjunto de tecnologías (HTML-JavaScript-CSS-DHTML-PHP/ASP.NET/JSP-XML) que nos permiten hacer páginas de internet más interactivas.
La característica fundamental de AJAX es permitir actualizar parte de una página con información que se encuentra en el servidor sin tener que refrescar completamente la página. De modo similar podemos enviar información al servidor.
Dicho esto, trabajar con AJAX no tiene porque ser un dolor de cabeza, hay librerías, framework y algunas herramientas de los cuales nos podemos valer para realizarlo. En este caso vamos a desarrollar un pequeño, pero útil ejercicio donde demostraremos las cualidades de jquery para hacerlo posible. Empecemos.
Lo que haremos es crear una lista de enlaces de siglas y en un div o capa mostraremos la descripción de dicha sigla; todo esto sin recargar nuestra página. Manos a la obra:
En esta pagina creamos los enlaces e incluimos el estilo, la librería jquery.js y funciones.js
En pagina1.php:
<html> <head> <title>AJAX</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="jquery.js"</script> <script type="text/javascript" src="funciones.js"</script> <link type="text/css" href="estilo.css" rel="stylesheet" > </head> <body> <h1>Definicion de algunas Siglas:</h1> <div id="menu"> <p><a id="enlace1" href="pagina2.php?cod=1">XML</a></p> <p><a id="enlace2" href="pagina2.php?cod=2">XHTML</a></p> <p><a id="enlace3" href="pagina2.php?cod=3">SGML</a></p> <p><a id="enlace4" href="pagina2.php?cod=4">AJAX</a></p> <p><a id="enlace5" href="pagina2.php?cod=5">JSON</a></p> <p><a id="enlace6" href="pagina2.php?cod=6">Google Maps</a></p> <p><a id="enlace7" href="pagina2.php?cod=7">API</a></p> <p><a id="enlace8" href="pagina2.php?cod=8">PHP</a></p> <p><a id="enlace9" href="pagina2.php?cod=9">PostgreSQL</a></p> <p><a id="enlace10" href="pagina2.php?cod=10">ActionScript</a></p> <p><a id="enlace11" href="pagina2.php?cod=11">Prototype</a></p> <p><a id="enlace12" href="pagina2.php?cod=12">DOM</a></p> </div> <div id="detalles">Seleccione una opcion para ver su descripcion.</div> </body> </html>
Como verán en el codigo anterior incluyo el CSS que dará estructura y el diseño a nuestra pagina:
estilos.css:
#menu {font-family: Arial; margin:5px;}
#menu p {margin:0px; padding:0px;}
#menu a {display: block;padding: 3px;width: 160px;background-color: #f7f8e8;
border-bottom: 1px solid #eee; text-align:center;}
#menu a:link, #menu a:visited { color: #f00; text-decoration: none;}
#menu a:hover {background-color:#F4F5EF;color:#000000;}
#detalles {background-color:#ffc;text-align:left;font-family:verdana;
border-width:0;
padding:5px;
border: 1px dotted #fa0;
margin:5px;
}
Lo siguiente es incluir la librería jquery.js entre las etiquetas <head> </head> y la función donde le diremos que hacer cuando presionamos cada unos de los enlaces.
El código esta comentado, si les surge alguna duda dejen en los comentarios.
funcion.js:
//codigo para empezar a trabajar con jquery
x=$(document);
//cuando se termina de cargar los elementos DOM
//ejecutamos la funcion inicializarEventos
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#menu a");
//indicamos que cuando se presiona un enlace ejecuta la funcion presionEnlace
x.click(presionEnlace);
}
function presionEnlace()
{
//trasferimos a la variable el contenido de href de cada enlace
var pagina=$(this).attr("href");
var x=$("#detalles");
//cargamos en el div lo que genera el enlace
x.load(pagina);
return false;
}
Con este ejemplo vemos lo fácil que es realizar una sensilla aplicación con tecnología Ajax con un poco de ayuda de jQuery y algo de CSS. De esta manera se podrían crear aplicaciones robustas sin descuidar la usabilidad de las mismas.
Nos quedo pendiente realizar la pagina2.php que contiene la descripcion de las siglas. Como siempre les dejo el código y la demo.
En un próximo post, desarrollaremos un formulario para luego enviarlo mediante ajax.
Cualquier duda o sugerencia, dejen en los comentarios. Saludos.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Comentarios
No hay comentarios todavía.
Deja un Comentario