Ajax Pino, los poderes del pino
Hoy vamos a hablar de Ajax, la tecnología-de-la-que-se-habla, con el permiso de Ruby on Rails, que la dejaremos para otro día o para los Cursos del GUL.
La historia de Ajax es bastante curiosa, y digna de un mundo al revés. Es una innovación que lleva ya unos cuantos añitos funcionando, inventada por Microsoft. Pero no ha empezado a popularizarse hasta que, por un lado, ha tenido un soporte decente en navegadores no-IE, y, por otro, la ha empezado a usar intensivamente el campeón de la resistencia, Google (ya veremos en qué lado de la Fuerza acaba el Elegido).
En la aplicación (tipiquísimo LAMP, sabor PHP) que usamos en la ofi, hay una tabla de contactos, y otra de proyectos, cada uno de los cuales pertenece a un contacto. Para ello existe un campo en la tabla projects llamado contact, que contiene un numerito, que corresponde al campo id de un registro de la tabla contacts. Qué os voy a contar.
Resulta muy típico en distintos formularios para añadir registros nuevos a alguna tabla (hay una de llamadas, otra de actuaciones, tareas, etc.) tener que elegir de una lista el contacto y el proyecto al que pertenecen. Y ninguna de las opciones posibles para hacerlo es completamente satisfactoria:
- Sería posible usar sólo una lista de proyectos, porque de ahí sacas inequívocamente el contacto, pero esa lista es muy larga (y ojalá sea cada vez más larga y yo tenga trabajo por siempre) y los usuarios se pierden (nos perdemos).
- El programa original, no sé con qué propósito, incluía en los formularios ambas listas, con los problemas anteriormente mencionados, a los que hay que añadir la posibilidad de introducir un registro incoherente, con un contacto y un proyecto que no estén relacionados entre sí.
- Mi última vuelta de tuerca mejoró ligeramente la usabilidad. El script PHP generaba una lista con los contactos, y, además, el código Javascript necesario para que, al elegir el contacto, se cargaran los proyectos correspondientes en la lista de proyectos. Obviamente, los nombres de los proyectos iban guarramente incluidos en el código Javascript, lo cual daba como resultado (ya dije que las listas eran largas) que sólo el código Javascript pesaba más de 300K, y que, con el servidor en la habitación de al lado, la página tardaba unos 5 segundos en cargar. Inviable, a la par que asqueroso.
Entonces recordé que había leido hace poco tiempo sobre Ajax (Asynchronous JavaScript and XML), un milagrito que estaba pensado, entre otras muchas cosas, para situaciones como ésta. Así pues, me dije, voy a bajarme el Ajax ése.
La primera en la frente. A nada que uno investigue un poco, descubre que no hay nada que bajar, y que eso de bajarse Ajax es un disparate comparable a bajarse la programación orientada a objetos o el protocolo TCP/IP.
Ajax no es más que una técnica de programación, que usa distintos componentes, todos preexistentes, y que se puede hacer de mil maneras diferentes. Ni siquiera todos esos componentes son obligatorios, así que qué sepáis que en este artículo voy a dejar el Ajax en Aja, y no voy a tocar nada de XML. Para otro día.
¿En qué consiste Ajax? La idea es, más o menos, simple. Pensemos en el modelo tradicional de aplicación web. Este modelo se caracteriza por el hecho de que todo el intercambio de datos entre cliente y servidor se produce en la carga de la página. Lo que no vaya en la página no existe para el cliente, hasta una nueva recarga. Y viceversa, el servidor sólo obtiene datos del cliente en cada petición (GET, POST, todo eso, ya sabéis). Entre petición y petición, carga y carga, la nada. El servidor en su casa, el cliente en la suya, y Dios en la de todos. Ajax, por el contrario, aporta un método para que exista un intercambio asíncrono (es decir, entre carga y carga) de información entre cliente y servidor. Con lo que eso aporta (o puede aportar, que ya se sabe que somos expertos en hacer un mal uso de las tecnologías) de usabilidad.
Y como siempre, vamos a ilustrar esto con un ejemplo, que es el del caso que he expuesto antes, que es uno de los usos más evidentes de Ajax, aunque hay muchos otros, y no hay más que darse una vuelta por Internet para decir una y otra vez: "Anda que no iría bien aquí un poquito de Ajax".
Bien, pues después de meter el rollo ese de "no se puede uno bajar Ajax", vamos a bajarnos Ajax =xD
Me explico. Que uno no se pueda pajar la programación orientada a objetos no significa que no se pueda bajar un compilador de C++, o una máquina virtual de Java, o un intérprete de Python o Ruby, etc. Pues esto es igual. Con la popularización de esta técnica han ido surgiendo multitud de librerías que la implementan en distintos lenguajes. Para PHP, yo me he decantado por Sajax (Simple Ajax toolkit), porque la cabra tira al monte y yo en cuanto veo la palabra "simple" me tiro de cabeza.
También me he bajado otra librería para PHP: JSON-PHP. JSON (JavaScript Object Notation) es un primo bastardo del XML. Sirve también para el intercambio de información, es bastante más cutre, pero, para cosas sencillas como la que queremos hacer es menos aparatoso. Convierte estructuras complejas (en nuestro caso, un array de dos dimensiones) en cadenas, para luego en el otro lado, invertir el proceso. El método es bastante original: genera el código JavaScript necesario para crear ese array.
Pues venga, al lío:
(AVISO: El código PHP y JavaScript es bastante guarro. El primero, porque se pretende explicar una técnica y no crear un sistema para usar en producción, mantenible, seguro, etc., y el segundo, por lo mismo y porque además no tengo casi ni puta idea).
Abriendo fuego:
<?php require('Sajax.php'); require('JSON.php');
Después, abrimos la base de datos y todo eso:
if (!mysql_connect('localhost','ajax','******')) die('No se puede conectar a la base de datos'); if (!mysql_select_db('prajax')) die('No se puede abrir la base de datos');
Vale, ahora ya vamos a hacer algo importante: crear la función que maneja el cotarro. Una que reciba como parámetro el id de un contacto y devuelva, codificada en JSON, la lista de los proyectos de ese contacto:
function project($contact) { $res=mysql_query("SELECT id,name FROM projects WHERE contact='$contact' ORDER BY name"); while ($row=mysql_fetch_row($res)) { $ret[]=$row; } $json=new JSON(); return $json->encode($ret); }
Nada que explicar a los que sepan lo básico de PHP y MySQL.
Bien, ahora, a modo de conjuro (es decir, que no sé por qué es así, pero lo he copiado de la documentación), vamos a inicializar el motor Sajax y a exportar (es decir, hacer llamables desde el Javascript del documento) las funciones que sean:
sajax_init(); sajax_export("project"); sajax_handle_client_request(); ?>
Y empezamos con el HTML cutre de rigor:
<html> <head> <title>De pruebitas</title>
Aquí viene lo peliagudo. Bueno, los que sepáis JavaScript lo veréis de otro modo, pero en fin. ¿Qué código JavaScript debemos meter en el documento? Pues por lo menos tres cosas. En primer lugar, un código que lo va a juntar todo, que es la parte mágica del asunto y que Sajax va a meter automáticamente por nosotros llamando a la función PHP sajax_show_javascript().
En segundo lugar la función que va a ser llamada desde el onchange del formulario y que a su vez será quien haga la consulta al servidor. Dentro de ella usaremos la función x_project() (como véis, Sajax añade x_ al nombre de las funciones exportadas, para evitar líos. Aparte de los parámetros que necesite la función creada por nosotros, debemos pasar la función a la que después se le pasará el resultado de la consulta asíncrona, que yo he llamado add y que probablemente contiene el código JavaScript más guarro que hayáis visto en vuestra vida. ¿Muy lioso? El código es éste:
<script> <?php sajax_show_javascript() ?> function add(encoded) { spt=document.getElementById("project"); spt.disabled=false; for (i=(spt.options.length-1);i>=0;i--) { spt.options[i]=null; } eval("var arr = "+encoded); for (i=0;i<arr.length;i++) { spt.options[i]=new Option(arr[i][1],arr[i][0]); } } function query() { x_project(document.getElementById("contact").value,add); } </script>
Y nada, ya lo único que nos queda es un poco de HTML y PHP típico (que como véis no hace nada ni envía los datos a ningún sitio, esto es sólo una demo):
</head> <body> <form> <select name="contact" id="contact" onchange="query()"> <?php $res=mysql_query("SELECT id,name FROM contacts ORDER BY name"); while ($row=mysql_fetch_row($res)) { echo "<option value=\"{$row[0]}\">{$row[1]}</option>\n"; } ?> </select> <select name="project" id="project" disabled> </select> </form> </body> </html>
Y ya está, funciona. Sé que parece magia (a mí también), pero supongo que eso es lo que caracteriza a las buenas librerías =;-) Que ustedes lo disfruten y úsenlo bien, no me hagan engendros que JavaScript ya carga con suficientes crímenes en la historia de Internet para hacerle cargar con uno más.
