Ajaxeando

Hace poco tiempo, un compañero del fansub, me pidió que le hiciera una pequeña web en la que listase todas las firmas que usa en sus foros.

Dichas firmas, las guarda en el ftp y en un principio me pidió que le hiciera algo que buscase automáticamente en el ftp, pero como yo no sabía demasiado de conexiones desde php a un ftp, le dije que le haría primero una versión simple con una bd en mysql en la que el fuera metiendo a través de un formulario las urls de las imagenes.

Mientras le preparé esa primera versión, fui investigando un poco acerca de funciones php para acceder a un ftp y me sorprendí bastante de lo simple que era. En apenas un día, migré todo el sistema mysql a un simple escaneo del ftp, incluyendo la posibilidad de subir firmas al ftp mediante formulario y borrarlas. Personalmente creía que era algo mucho más complejo.

El resultado fue este: http://www.clanpatanegra.com/dagolar/firmas/catalogo/

Quizás un sistema algo simplón, pero que funciona. En la parte de administración, se muestran además estadísticas de cuantas firmas hay, cuanto ocupan individualmente y cuanto en conjunto etc.

Llegado a este punto, me di cuenta de que ya manejaba decentemente el php respecto a consultas en mysql y a ftps, había llegado el momento de dar ampliar mis conocimientos, por lo que me puse a leer y buscar información sobre AJAX, el cual acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML),.

Como tal, no es un lenguaje de programación, sino un conjunto de tecnologías web tales como Javascript, XML, DOM, XHTML, y el más importante, el objeto XMLHttpRequest, que en conjunto permiten hacer que las páginas puedan ser si cabe, más dinámicas todavía.

Antiguamente, las webs dieron un gran salto cuando apareció el php y las consultas a bases de datos, permitiendo automatizar la labor de crear, editar y borrar contenidos. Sin embargo, seguían siendo bastante “pesadas” en algunos detalles.

Por ejemplo, a la hora de rellenar un formulario, este tiene que pasar por otra página en la cual se valida y se comprueba que los datos son correctos y posteriormente a otra página indicando el éxito o el fracaso de la operación. Obviamente puedes juntar las dos últimas páginas en una, pero eso no te quita de tener que andar cargando páginas.

AJAX, da otro gran paso hacia delante en ese sentido, permitiendo hacer actualizaciones en tiempo casi real con el servidor, sin que el usuario tenga que tocar un botón. Un ejemplo que me impresiona mucho es el de esta web: http://meneame.net/sneak.php

De esto ya hay muchos blogs que lo explican mucho mejor de lo que yo podría, pero me quedaría con esta imagen, que es muy orientativa:

Bueno, sin dar más rodeos sobre esto, lo cierto es que he llenado mi del.icio.us de enlaces con guías de AJAX y prototype y tras leer unos cuantos, me bajé la librería protoype.js que hace que sea un poco más sencillo programar las peticiones ajax y me puse a hacer pruebas.

Este es el resultado: http://s218461000.mialojamiento.es/ajax/lista4.php

Bueno, de caras afuera, podría parecer que eso mismo se puede hacer casi con javascript corriente, y que parece que es un simple texto que oculto y muestro. En realidad va un poco más allá. Los datos que se muestra al pinchar en los enlaces, están en una base de datos y no se extraen hasta que pinchamos en el enlace. Cualquiera que sepa algo de php sabrá que eso con php puro y duro, tendría que hacerse recargando la página.

En prototype simplemente abro una petición AJAX le meto en una variable la url del script php que se encargará de hacer la consulta, meto en otra variable los parametros que mandaré junto a la url para buscar en la consulta el elemento y con un par de cosas más toqueteadas, el ajax se encarga de mandar el mensaje al servidor, que lo procesa desde el archivo php y me devuelve el resultado sin tener que actualizar. (No sé si lo he explicado correctamente).

Un ejemplo más ilustrativo. Script declarado en el <head> de lista4.php:

function ConsultarDatos()

{

// Extraemos el id del propio div.

var iddato = this.id;

url = 'rellenacontenedor2.php';

parametros ='id='+iddato;

var myAjax = new Ajax.Request

(

url,

{

method: 'get',

parameters: parametros,

onComplete: function(resp) {$('contenedor'+iddato).innerHTML = resp.responseText; },

onFailure : function(resp) {alert("ups!, Ocurrió un error. Intenta nuevamente.");}

}

);

}

window.onload = function() { <?php listar_ids(); ?> }

</script>

El listar_ids(), hace lo siguiente: (básicamente crea tantos $('numero').onclick = ConsultarDatos cono entradas haya en esa tabla, para así poder separar los eventos del html):

// Datos de conexión para la bd.

include("conexion.php");

$consulta = "SELECT ID FROM series ORDER BY ID";

$resultado = mysql_query($consulta,$conexion);

if ($resultado)

{

while ($Datos = mysql_fetch_array($resultado))

{

// Extraemos el id

$id = $Datos['ID'];

print "$('$id').onclick = ConsultarDatos;";

}

En el mismo lista4.php tengo lo siguiente, que se encargará de hacerme una lista de links y unos divs vacios en los que meteré el contenido: (metido en realidad en una función, en otro archivo, a la que llamo, pero pongo directamente el código)

include("conexion.php");

$consulta = "SELECT * FROM series ORDER BY ID"

$resultado = mysql_query($consulta,$conexion);

if ($resultado)

{

while ($Datos = mysql_fetch_array($resultado))

{

$contador++;

// Extraemos los datos de la base de datos.

$id = $Datos['ID'];

$nombre = $Datos['NOMBRE'];

print "<div id='$id'><a href='#'>Serie: $nombre</a></div>";

print "<div id='contenedor$id'></div>";

}

Y por último en el archivo rellenarcontenedor2.php, meto las instrucciones para que extraiga de la base de datos un valor indicado:

include("scripts/conexion.php");

$id = $_GET['id'];

$consulta = "SELECT * FROM series WHERE ID='$id'";

$resultado = mysql_query($consulta,$conexion);

if ($resultado)

{

while ($Datos = mysql_fetch_array($resultado))

{

$contador++;

// Extraemos los datos de la base de datos.

$id = $Datos['ID'];

$nombre = $Datos['NOMBRE'];

print "$id - $nombre";

}

Lo hice algo rápidamente, y obviamente es un ejemplo algo complejo (dentro de lo que cabe, hice otras pruebas más simples antes) y hay cosas que se pueden quitar o mejorar, como la extracción del id en la bd cuando realmente ya lo tenemos de haberlo pasado por la url. Pero bueno, hice este pequeño script para ver hasta que punto puedo unir las consultas que hacía antiguamente a la bd junto con AJAX.

Una de las cosas que no me gusta en general del AJAX, es que no es como el PHP, en el que cuando cometes un error, te avisa de en que línea se cometen fallos o que tipo de fallos son, pero encontré una solución en un plugin para firefox llamado firebug.

Se trata de un plugin en el que puedes hacer seguimiento de las variables, de los gets y los posts, de las modificaciones que sufre el html cuando ejecutas alguna función javascript, los tiempos que tarda el servidor en responder, los errores de sintaxis que cometes etc. Un montón de cosas.

Se lo recomiendo a cualquiera que se dedique a hacer webs, aquí el link: http://www.getfirebug.com/

por Flash-Hack
09 Dec 2007, 22:26

Valorar:

11 Dec 2007, 11:35

SinSa

Hola,

Enhorabuena. Has entrado en el mundo AJAX.

Ahora estás en la mejor parte, cuando encuentras el poder que ofrece.

Pronto llegarás al siguiente nivel, no tan bueno como el anterior.

Verás, para darte una idea, te pongo mis humildes impresiones con respecto a AJAX:

Positiva:

- Consigue optimizar el mundo Web al nivel de aplicación pesada. Me explico.

Una aplicación pesada es aquella que requiere de una parte cliente instalada en el equipo del usuario. Esta aplicación pesada dispone de una serie de objetos (visuales y no visuales), los cuales se refrescan a demanda (por ejemplo, un listbox lo cargo con datos de una tabla sólo si el usuario lo activa).

Las apliaciones web (llamadas de cliente ligero), hasta ahora cada vez que cambiaban el contenido de una página, aunque fuera sólo una parte de ésta, necesitaba ser regenerada (recargada) por completo (concepto servlet).

Con AJAX, previa descarga de una serie de componentes (llámalos plugins, o bloques javascript, o simplemente html, pero al final pasa a ser cliente pesado, ya que carga una serie de objetos visuales y no visuales), podemos refrescar una sola parte de la página o varias asímcronamente (como si fuera un cliente pesado! ).

O sea, volvemos a simular lo que teníamos antes del mundo web (cliente/servidor), pero traducido todo a html (porque sabrás que al final el javascript se convierte en html puto y duro).

Si tienes tiempo descargate una versión de TIBCO para implementaciones AJAX que lo llaman GI (General Interface). Es un VIsual Basic para AJAX

Negativa:

Está verde, muy verde.

Su implementación existosa es muy específica. Los modelos de desarrollo que han triunfado en esta topología Web son muy concretos, y el porcentaje de proyectos que han vuelto a servlet en vez de AJAX es muy elevado. Sobre todo, pese a tu opinión, los basados en sistemas de accesos complejos a bases de datos.

Aplicaciones como GMAIL o Google maps funcionan perfectamente, porque son aplicativos que los 'analistas' denominan de acceso estático. Esto significa que se pueden configurar las peticiones a base de datos através del concepto 'servicio'.

Si quieres ahondar en este tema, mírate la documentación de OC4J (Oracle components for Java), en la que se define claramente el concepto de servicio o componente. Para que te hagas una idea, te explico un ejemplo mínimo.

Para que tu apicativo estuviera correcto, tu acceso a base de datos:

SELECT * FROM series ORDER BY ID

se transformaría en una llanmada a un servicio web linkado a tu objeto AJAX. Esta llamada invocaría a un servicio Oracle, que lo estaría publicando el OC4J montado sobre un Apache/Tomcat. Este servicio sería un componente transformado de un procedimiento almacenado de un servidor Oracle instalado en una DMZ probablemente. El procedimiento almacenado, sería el que tendría la select.

Fácil uh?

Imagina ahora lo pesado que sería cambiar la query. Recompilar el procedimiento, recompilar el componente, republicar el servicio... Por eso en aplicativos de acceso dinámico esta topología fracasa.

Por útimo, decirte (offtopic), que tu query (que ya imagino que es un ejemplo), no pasaría un mínimo de control de calidad

- Nunca se utiliza el * para recuperar datos. Si mañana cambio el orden de las columnas de la tabla tu aplicación se vá al carajillo

- El order by es muy costoso para el servidor de base de datos. Se deben recuperar las filas como estén y luego ordenarlas en el cliente (el objeto que las recoje debe tener un método de ordenación)

Hale, buena suerte con AJAX

Regards(las plantas)

11 Dec 2007, 11:48

Flash-Hack

Gracias por tu comment #1 Muy interesante todo.

Ciertamente como has comentado, no se debe utilizar el *, sino solo los datos que vaya específicamente a sacar. En mi caso, puesto que quería hacer una prueba rápida, cogí los dos campos que tenía en la bd para imprimirlos por la pantalla, así que pasé de poner un "SELECT ID,NOMBRE FROM series ORDER BY ID" a un "SELECT * FROM series ORDER BY ID". Lo mismo con el ORDER BY. De todas formas esa tabla la estoy usando solo para hacer pruebas Incluso tengo una variable $contador ahí que puse de una prueba anterior y que ya no uso, sin borrar.

Miraré el TIBCO ese.

11 Dec 2007, 12:10

SinSa

Hola,

Ya imaginaba que era un ejemplo, pero mi deformación profesional no me deja controlar mis impulsos de criticar una mala query, aunque sea de 'pachanga'

Tampoco te desanimes por mis comentarios, yo creo que el concepto AJAX es (o debería ser) el futuro del mundo web (sobre todo cuando lo absorvan en sus plataformas los grandes como minisoft o sun/java).

Cuando yo me pegué con AJAX, 3 años a, le quedaba mucho por recorrer, comparado con el NetBeans o Eclipse de Java que estaban funcionando a pleno rendimiento. Los casques eran habituales, y la complejidad de desarrollo excesiva (por lo que ya he dicho de su interacción casi jeroglífica con las BBDD's 'serias').

Pero seguro que cada vez será más intuitivo y cómodo, y será la plataforma de desarrollo (o parte de los componentes de ésta) más habitual en poco tiempo.

Lo malo es que tal y como van las cosas, si nadie lo remedia FW 3 se lo va a comer todo

Animo. Es un tema bonito e interesante, y si te lo curras puedes sacar mucho partido.

Regards(las plantas)

11 Dec 2007, 13:21

KillerPijos

No me entero de nada, pero que gente más sabia habeis en gamersmafia, me hace sentir orgulloso de estar registrado aqui.

Cuando mis amigos cultos dicen que ellos solo leen las obras completas de Goytisolo yo digo que estoy en la misma web de FlasHack y Sinsa y ahí se quedan sin respuesta.

Si, señor.

11 Dec 2007, 14:00

SinSa

Divertido

Hola,

#4 yayaya.. todo lo sabio que tu quieras, pero también soy un auténtico paquete que no sabe ni reventar un mísero tanque:

gamersmafia.com/foros/topic/20857

siesque Dios da frags al que no tiene configs..

Regards(las plantas)

11 Dec 2007, 14:06

Bulky

#5 Pero postea las screens

11 Dec 2007, 14:09

KillerPijos

Por cierto, imagino que con la tecla "Impr Pant " será suficiente para capturar no?

Es lo que me maravilla del ser humano, un tipo que entiende a la perfección todo lo que pone ahí arriba, pero luego tiene la candidez y la inocencia de este tipo de pregunta.

Me gustas tio

Perdona Flash por la desviación del tema, ya vuelvo al absoluto silencio.

11 Dec 2007, 14:24

SinSa

Hola,

7# Coñe, esque no puedo probar desde aquí, y como imagino que tendré poco tiempo para pillar las screens cuando llegue a casa, quería asegurarme de que así se pillaban fácil.

Pero, hace tiempo que capturo pantallas, para muestra un pezón (digo botón? )

dods.gamersmafia.com/foros/topic/3280 (madrilez=yo)

me sorry too for the offtopic

Regards(las plantas)

Regístrate para poder comentar.

Si ya estás registrado solo tienes que iniciar sesión.

login
contraseña