“The new education must teach the individual how to classify and reclassify information, how to evaluate its, veracity, how to change categories when necessary, how to move from the concrete to the abstract and back, how to look at problems from a new direction--how to teach himself. Tomorrow's illiterate will not be the man who can't read; he will be the man who has not learned how to learn.”

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:

  1. Hacer una solicitud a una dirección o URL.
  2. Procesar su respuesta.
  3. Y presentarla.
  4. 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:

PLAIN TEXT
PHP:
  1. <?php
  2. require_once 'login-info.php';
  3. $status = '';
  4. if (!empty($_POST)) {
  5.     if (check_login($_POST)) {
  6.         $status = 'success';
  7.     } else {
  8.         $status .= '<p class="error">El usario o el password son incorrectos. Revisa tus datos e intenta de nuevo.</p>';
  9.     }   
  10. }
  11. echo $status;
  12. ?>

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.

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.     var options = {
  3.         target: '#login-canvas',   // target element(s) to be updated with server response
  4.         beforeSubmit: showRequest,  // pre-submit callback
  5.         success: showResponse,  // post-submit callback
  6.         url: 'login_status.php',
  7.         type: 'POST',
  8.         timeout:6000};
  9.     $('#login-form').ajaxForm(options);
  10.     setFocus();
  11. });

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

Leave a Reply




Old and not that old articles

« A study of PHP Frameworks

Zeitgeist »