Entendiendo Ajax a prueba de balas o Bulletproof Ajax
Tuesday, August 21st, 2007 by Favio
En los últimos años, los desarrolladores web hemos estado escuchando frecuentemente el término Ajax debido a aplicaciones como Google Maps, Basecamp y Google Analytics. Sinceramente, yo preferiría algo más familiar como Maestro Limpio. (^-^)
Para tener una perspectiva más amplia sólo basta con ir a Ajaxian y ver la gran cantidad de aplicaciones desarrolladas con esta técnica. Sí, es una técnica, manera o forma de hacer las cosas.
Definición práctica
Ajax es:
- Hacer una solicitud a una dirección o URL.
- Procesar su respuesta.
- Y presentarla.
- Sin volver a cargar o refrescar la página o URL original.
Para fines de este artículo, será la definición usada.
Ajax a prueba de balas
Si tu aplicación web con Ajax puede seguir funcionando cuando javascript esta desactivado. Deja de leer, este artículo no es para ti. xD
Concretamente, usar Ajax en nuestras aplicaciones puede mejorar notablemente la experiencia del usuario ya que la interface se hace más fluida y las acciones son ejecutadas más rapidamente porque sólo obtenemos la información requerida sin volver a cargar toda la página.
Sin embargo, ¿qué pasa cuando llega una persona con un navegador no soportado o con javascript deshabilitado? La filosofía Ajax a prueba de balas implica que la aplicación debe seguir funcionando; con o sin Ajax!
Esta filosofía o forma de trabajo esta muy bien descrita en el libro de Jeremy Keith "Bulletproof Ajax". Aquí pueden ver el código fuente utilizado en los ejemplos del libro. Si revisan la aplicación de la mini-tienda de libros, se podrán percatar de la manera en que fue estructurada para lograr el efecto Ajax a prueba de balas. (ok, ya es la última vez que menciono "a prueba de balas" (¬_¬" ).
Un Ejemplo?
Para tomar un enfoque más práctico pondré como ejemplo un formulario de autenticación. La aplicación pueden verla aquí. El usuario es: usuario y el password: pass. Nota: Usar Ajax en un formulario de Login es complicarse la vida innecesariamente debido a que esta funcionalidad es especial; es como una especie de capa que envuelve a nuestra aplicación.
Es importante observar que no utilicé el código javascript del libro para implementar Ajax. Sin embargo, me fue de gran ayuda para entender todo casi a la primera. Finalmente, decidí que si había podido entender hasta ese punto, una buena forma de reafirmar el conocimiento sería usar un framework de javascript para implementar Ajax. Opté por usar Jquery.
El Cómo (digerido!)
Cualquier funcionalidad a la que desees agregar Ajax, por ejemplo: un carrito de compras, editar una fila de una base de datos en la misma lista de registros, actualizar una opción justo en el momento que se selecciona, etc.; debes "aislarla" de tal forma que funcione por si sola y en nuestra aplicación sólo haya que incluirla para obtener su “servicio". Tal es el caso de login_status.php:
Su función o servicio es mostrar un mensaje en caso de error, concretamente, cuando el usuario o password son incorrectos. Este archivo es incluido en login.php y es el mismo archivo que es llamado por Ajax. El formulario funciona con o sin javascript.
-
$(document).ready(function() {
-
var options = {
-
target: '#login-canvas', // target element(s) to be updated with server response
-
beforeSubmit: showRequest, // pre-submit callback
-
success: showResponse, // post-submit callback
-
url: 'login_status.php',
-
type: 'POST',
-
timeout:6000};
-
$('#login-form').ajaxForm(options);
-
setFocus();
-
});
Otro muy buen ejemplo práctico lo pueden ver en Contactos MSN. Prueben el sitio normalmente y luego desactivando javascript.
Espero poder agregar un ejemplo real próximamente. (^_^' )
Referencias
Bulletproof Ajax (la fuente esta aquí)
Documentación de Jquery Form
This entry was posted on Tuesday, August 21st, 2007 at 8:14 pm and is filed under Ajax, Artículos en español. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
A reply to “Entendiendo Ajax a prueba de balas o Bulletproof Ajax”
Casper said (on August 29th, 2007 at 5:22 pm ):
I thought this blog was to improve your English skills?
Anyways, I could read about 70% of it, except that It would take me much longer, to even understand it. Read it out loud I can do, read and understand I am not too sure about that.
-Casper