Javascript no intrusivo: moo.ajax
- Feb
- 06
3 comentarios! 176 palabras - 1 hits
Experimentando con el DOM y ajax
Hace unos días comente algo sobre los beneficios de utilizar JavaScript de forma no intrusiva, hoy me gustaría mostrar un ejemplo de lo sencillo que resulta implementar estas técnicas, y los sorprendentes resultados que se pueden conseguir.
Antes de comenzar, un par de detalles, la idea general del script es realizar una búsqueda en mi weblog sin tener que recargar la pagina, esta se realiza en tiempo real mediante una llamada a la API de Yahoo! Search.
Para el ejemplo echare mano de dos bibliotecas, moo.ajax y prototype.lite, ambas de muy reducido tamaño y que incluyen una serie de funciones de gran utilidad.
Comenzando por el código html, todo el funcionamiento de nuestro script se basara en el formulario de búsqueda, crearemos una serie de elementos en el DOM que se añadirán a diferentes partes del formulario. Para esto tendremos que definir algunas identidades en él como veis aquí abajo
- <form action="search.php" method="post" id="sform">
- <fieldset><legend>Introduce el termino a buscar »</legend>
- <div><label for="p">Search Terms<input name="p" type="text" /></label></div>
- <p><input type="submit" value="search" id="sbtn" /></p>
- </fieldset>
- </form>
esto es casi todo lo que necesitamos del html. Pasemos a nuestro script
El primer paso para que nuestro script funcione es conseguir que todos los eventos del formulario sean procesados por el motor JavaScript, para lograr esto tenemos que utilizar la función addEventListener.
- document.getElementById('sform').addEventListener('submit', myCustomSearch, false);
El siguiente paso sera definir los objetos que vamos a introducir en el documento, un gif animado que se mostrara mientras se realiza la consulta y un contenedor que es donde se volcaran los resultados.
- var o = document.createElement('div');
- var obj = document.createElement("img");
He preparado este ejemplo donde podéis ver el script en ejecución. Si le echáis una ojeada al script vereis que con solo 40 líneas conseguimos todo esto, casi todo el código esta explicado, pero si quedan dudas, comentarlo.
Como complemento también podemos introducir moo.fx, otra librería de Valerio Proietti que con tan solo 3kb ofrece unos cuantos efectos con los que jugar.
Si después de todo esto aun quedan ganas de leer, aquí tenéis unos cuantos enlaces sobre el tema.
3 comentarios
# Escrito por Beldar hace 4 años
Que hay en el search.php?
# Escrito por Alex Sancho hace 4 años
Como ya comento al principio del articulo, no es mas que una interface que realiza una llamada a la API de Yahoo! Search.
Salu2
# Escrito por Jorge hace 3 años, 11 meses
Muy buena la explicación y el ejemplo. Rápido y fácil. Gracias