Perl y Ajax

Para muchos AJAX es lo último en tecnología, y es que recientemente se ha puesto de moda principalmente porque Google empezó a hacer uso de ésta tecnología que existe desde hace algunos años.

Debido a esto decidí dedicar un pequeño tutorial a ésta "nueva" tecnología. Vamos a ver de que se trata, como poder implementarlo y las ventajas y desventajas que nos trae el uso de AJAX.

¿Qué es AJAX?

La palabra AJAX viene de: Asynchronous JavaScript and XML, y describe una técnica desarrollada para crear aplicaciones web interactivas.

La finalidad es lograr una sensación de interactividad total al realizar intercambios de información con el servidor sin la necesidad de recargar toda la página web.

Ésta técnica usa un combinación de varios elementos, como lo son:

XHTML o HTML y CSS para desplegar y estilizar la información.
El DOM accesado por medio de lenguajes de script del lado del cliente, como son JavaScript y JScript.
El objeto XMLHttpRequest para intercambiar los datos con el servidor web.
XML que es comúnmente el formato usado para realizar los intercambios de información, aunque cualquier formato puede ser usado.

Finalmente el próposito es brindarle al usuario una manera más sencilla de realizar la navegación, pues con AJAX puedes realizar cambios sin la necesidad de cargar toda la página web nuevamente.

AJAX y Perl

Ahora vamos a crear un sencillo ejemplo con el cual vamos a ver de manera sencilla como es que funciona el AJAX.

Lo que vamos a hacer es crear un pequeño formulario con un campo en donde los usuarios deben de ingresar una contraseña. Cada que el usuario introduzca una letra vamos a verificar si la contraseña es correcta de manera inmediata.

En caso de que la contraseña sea incorrecta regresaremos un mensaje notificandolo, y cuando la contraseña sea correcta regresaremos una liga para entrar al sitio secreto.

Es un ejemplo sumamente sencillo, pero bastante útil y práctico para aprender el uso de AJAX.

Para implementar nuestro ejemplo vamos a usar el módulo CGI::Ajax, el cual nos da una interfase bastante limpia para poder implementar el Ajax con Perl.

Para empezar cargamos los módulos necesarios:

use strict;

use CGI;
use CGI::Ajax;

Iniciamos un objeto CGI y creamos una variable con la contraseña correcta:

my $cgi = new CGI;

my $PWD_CORRECTO = "perl";

Ahora vamos a crear un nuevo objeto CGI::Ajax y asociamos una subrutina:

my $pjx = new CGI::Ajax( 'checar_pwd' => \&checar_pwd );

Como vemos estamos definiendo un nuevo argumento "checar_pwd" y le estamos asignando una referencia a un subrutina.

Debemos de asignar un nuevo argumento por cada subrutina que vamos a querer usar por medio de Ajax. El nombre del argumento es como luego nos vamos a referir para hacer la llamada de la subrutina, es este caso opte por ponerle el mismo nombre de la subrutina para evitar confusiones más adelante.

Muy bien, después de eso vamos a armar el HTML:

print $pjx->build_html( $cgi, \&mostrar_formulario);

Lo que vamos a hacer es imprimir a pantalla el resultado del llamado de la subrutina build_html(), como vemos la subrutina recibe dos argumento, el primero es el objeto CGI, que va a servir para poder leer la información envíada por medio de POST o de GET y después una referencia a la subrutina que se encarga de desplegar el HTML.

La razón por la cual no podemos desplegar el HTML sin llamar a la función build_html() es que como el módulo CGI::Ajax se encarga de realizar toda la implementación necesaria para poder usar esta técnica, es necesario que preprocese nuestro código HTML para poder agregar lo necesario.

Ahora veamos como se vería la función mostrar_formulario():

sub mostrar_formulario{

my $html = <<EOHTML;
<HTML>
<BODY>

Escribe la contraseña:
<input type="text" name="pwd" id="pwd"
onKeyUp="checar_pwd( ['pwd'], ['resultado'] );">
<br>
<div id="resultado"></div>
<p>

</BODY>
</HTML>
EOHTML
return $html;

}

Es muy sencillo, capturamos en la variable $html el código HTML de nuestro formulario y después la regresamos como el resultado.

Como podrán ver el código HTML consta de un sencillo formulario con un campo para escribir la contraseña, pero hay unos elementos especiales.

Primero veamos el campo de contraseña:

Lo primero es que le asignamos un ID de pwd al campo, así se podrá llamar con esa identificación por medio de JavaScript. Cada elemento debe de tener un ID único, nunca los podemos repetir. Ahora lo importante viene en la siguiente parte:

onKeyUp="checar_pwd( ['pwd'], ['resultado'] );"

onKeyUp es un evento que se acciona en el momento en que levantamos una tecla, es decir cuando terminamos de presionarla. Al activarse el evento se llama a la función checar_pwd() a la cual le vamos a dar dos argumentos.

El primero es el ID del campo del cual vamos a leer los datos ['pwd'], el valor de este campo es que el que se va a envíar a nuestro CGI, y el segundo argumento es el ID del campo en donde vamos a desplegar el resultado ['resultado'].

Es aquí donde está toda la magía. Pues el módulo CGI::Ajax se va a encargar de hacer la implementación necesaria para poder llamar de manera dinámica a nuesta función en el CGI.

Luego en el formulario viene el DIV donde se va a desplegar el resultado:

Ahora todo lo que nos falta es crear la función checar_pwd() en nuestro CGI:

sub checar_pwd{

my $entrada = shift;

if($entrada eq ""){
return("Introduce la contraseña secreta");
}
if($entrada eq $PWD_CORRECTO){
return("Acertaste <a href=\"http://google.com\">Entra al sitio secreto</a>");
}
else{
return("$entrada es incorrecto");
}

}

Muy bien, primero recibimos el argumento envíado, el cual especificamos en nuestro HTML, en este caso será el valor del campo pwd. Como vemos hacemos una comprobación del valor recibido y de acuerdo a él regresamos el resultado.

El resultado que regresamos en la función es la que se va a desplegar en el campo asginado, en este caso será el DIV cuyo ID es resultado.

Y eso es todo, podemos ejecutar nuestro CGI, y vemos como el resultado de la comprobación de la contraseña es regresada de manera dinámica sin la necesidad de recargar la página por completo.

Ahora, al ejecutar tu CGI si ves el código HTML que se produce verás que hasta arriba vienen un chorro de líneas con código JavaScript, todo eso es la implementación que hace por nosotros el módulo.

Como podrás apreciar el módulo CGI::Ajax nos hace realmente sencillo el proceso de asociar funciones de nuestro CGI con procesos Ajax.

Código Final

#!perl

use strict;
use CGI;
use CGI::Ajax;

my $cgi = new CGI;

my $PWD_CORRECTO = "perl";

#Creamos un nuevo objeto AJAX
# y asociamos una función
my $pjx = new CGI::Ajax( 'checar_pwd' => \&checar_pwd );

# Desplegamos el HTML
print $pjx->build_html( $cgi, \&mostrar_formulario);

sub checar_pwd{

#Recibimos los datos envíados
my $entrada = shift;

}

sub mostrar_formulario{

my $html = <<EOHTML;
<HTML>
<BODY>

Escribe la contraseña:
<input type="text" name="pwd" id="pwd"
onKeyUp="checar_pwd( ['pwd'], ['resultado'] );">
<br>
<div id="resultado"></div>
<p>

</BODY>
</HTML>
EOHTML
return $html;

}

Otros Usos de AJAX

El ejemplo que vimos es realmente trivial, pero nos permite darle un vistazo a lo que podemos lograr con Ajax. Por ejemplo, podríamos checar de manera dinámica si el nombre de usuario que nuestro cliente está seleccionando no ha sido utilizado con anterioridad. Podríamos hacer una comprobación de otrografía instantánea de un texto ingresado.

Por ejemplo Gmail lo usa para desplegar los mensajes de email de manera dinámica sin la necesidad de recargar por completo la página, lo que permite una sensación de interactividad completa.

Otros usos que he visto por ahí es el de autocompletar, conforme el usuario va poniendo letras, automáticamente se van poniendo palabras que empiecen con esas letras, algo así como el autocompletar que viene con el IExplorer.

También hay casos más complejos, como por ejemplo un chat hecho completamente con Ajax, lo que permite crear un chat sumamente interactivo que da la sensación de ser P2P, pues es inmediata la recepción y no se necesita usar la recarga de la página.

Aquí les pongo algunos URLs con ejemplos de implementaciones que usan Ajax:

Buscador de Amazon
Google Maps
Flickr
Oddpost

Ventajas y Desventajas de AJAX

Las ventajas ya las hemos visto durante el tutorial, y principalmente es hacer más cómoda la navegación y la interacción usuario-servidor. Sin embargo no todo es color de rosa.

Al principio Ajax puede ser muy llamativo, eso genera un abuso de la técnica. Si se sobrecarga de Ajax una aplicación, esto la puede crear confusa y termina siendo contraproducente. Hay que ser prudentes en el uso de la técnica, y solamente usarlo cuando sea necesario y sea evidente la ventaja.

La principal desventaja que tiene el Ajax viene ímplicito en un problema que viene con el mismo protocolo de conexión usado para http. El problema está en que cuando mándamos información por medio de AJAX no podemos estar seguro en que va a llegar en orden.

Por ejemplo, mándamos en orden las letras: "a" "b" "c" "d". No porque mándamos la letra "a" antes que la "b", significa que el CGI las va a recibir de esa manera, pues podrían llegar en otro orden como: "b" "c" "a" "d".

Esto puede generar problemas serios en el caso que se necesite que la información llegue en un orden exacto.

El otro problema podría ser que el usuario no tenga activado JavaScript, sin embargo con un poco más de trabajo se puede preparar para que en ese caso nuestra aplicación aún funcione.