Escrito por Yosi_ el miércoles, 16 de abril de 2008
Esto, siguiendo la línea general de este blog, no pretende ser un artículo que trate profundamente la tecnología AJAX, ni que aborde los pormenores y características más remotas de la misma. En este caso el objetivo es proponer de la forma más clara y detallada posible una forma de implementación de AJAX empleando la librería jQuery y manejando las respuestas en formato JSON, a mi juicio el más conciso de cara al uso general.
En primer lugar deberíamos partir haciendo una descripción de en que consiste concretamente el manido acrónimo omnipresente en la web actual. Posiblemente el artículo de Wikipedia de una explicación más correcta e inteligible de lo que yo pueda decir, pero resumiendo digamos que se trata de una tecnología basada en JavaScript que permite establecer conexiones con un servidor, enviando y recibiendo datos que dan la posibilidad de realizar operaciones en una base de datos y cambiar el contenido de parte de una web sin necesidad de recargar la página, de forma totalmente transparente para el usuario.
La principal ventaja de este sistema es que da una sensación de agilidad e inmediatez (el tiempo para realizar una misma operación cargando toda la página o mediante una petición AJAX varía considerablemente) que rompe de forma notable con el formato tradicional de la web, donde cada acción correspondía necesariamente a una carga completa de página, ofreciendo una experiencia de usuario novedosa que introduce posibilidades realmente útiles. El uso de dicha técnica ya está ampliamente implantado en la web 2.0, como se puede observar al enviar un comentario en cualquier blog actual, al utilizar gestores de correo como Gmail, Google Maps, varios servicios de Flickr... Y lo mejor de todo es que es realmente fácil de integrar en cualquier web, ya que en muchas ocasiones incluso simplifica las tareas llevadas a cabo de la forma tradicional.
Como ya he señalado en alguna otra ocasión, jQuery es una librería JavaScript muy ligera (apenas 15kb comprimida) que ofrece una enorme variedad de funcionalidades, entre las que se cuenta proporcionar una cómoda plataforma para utilizar AJAX de forma fiable y sencilla. En la documentación oficial se da una explicación muy detallada de todos y cada uno de los parámetros que se pueden configurar, pero en este caso vamos a ir a lo práctico, empleando la configuración por defecto (válida para la mayor parte de las ocasiones), trabajando únicamente sobre la plantilla que reproduzco a continuación:
Como vemos en el fragmento anterior, "Plantilla" sería el nombre de la función JavaScript (asignado arbitrariamente por nosotros) a la que habría que llamar, y que en este caso se ocupa exclusivamente de hacer la petición AJAX contenida en $.post(), una función de la librería jQuery que se ocupa de realizar la conexión con el servidor y gestionar el envío y la recepción de datos. Los argumentos que requiere la función post son:
Una vez llegados aquí, se supone que habremos realizado la petición AJAX desde JavaScript, se habrán enviado las variables necesarias al servidor, y el navegador estará esperando una respuesta. El archivo PHP que habíamos concretado en la ruta de la función $.post será el encargado de asignar el contenido de las variables antes mencionadas y realizar las operaciones internas oportunas para generar los datos que el cliente espera. La complejidad de este PHP podrá ser variable en función de las gestiones que necesitemos realizar, pero en este caso me parece superfluo perderme en cuestiones al margen de la estructura básica, así que me limitaré a mostrar una transacción de datos bastante inútil pero ilustrativa para el fin que perseguimos:
En primer lugar nos fijaremos en la asignacion de las variables $var1 y $var2 desde los valores que habíamos pasado mediante el método POST desde el JavaScript original. El proceso es exactamente igual para cuantas variables deseemos, solamente variando el nombre de las mismas.
Posteriormente se realizan las operaciones triviales para obtener la suma y la diferencia de ambas variables (en este punto se podrían hacer consultas a una base de datos para insertar o extraer valores, algo evidentemente mucho más práctico en un caso real), y finalmente instanciaremos la clase de la librería JSON.php que hemos incluido en la primera línea del archivo.
Creo que en este punto ha llegado el momento de comentar que JSON (JavaScript Object Notation) es un formato para intercambio de datos ligero e intuitivo que en este caso estamos utilizando para estructurar la respuesta AJAX. Esto podría hacerse también mediante XML (como de hecho se planteó originalmente, la última sigla de AJAX corresponde a "XML") o sencillamente mediante texto plano, pero en el primer caso tendríamos la desventaja de tener que manejar un código como XML, mucho mas pesado y complejo a la hora de ser interpretado por JavaScript, y en el segundo nos veríamos limitados a devolver un único paquete de datos que no tendríamos forma de separar en varios valores en el caso de que necesitásemos dar una respuesta múltiple (lo cual es bastante común).
Por lo tanto emplearemos el formato JSON, del que se puede obtener una descripción completa en wikipedia. Sin embargo para el uso que le vamos a dar no será necesario siquiera conocer la estructura, ya que sera la librería PHP antes mencionada la que, a partir de un array asociativo en PHP convencional ($returnArray), se ocupe de darle formato y transformarlo en una estructura JSON válida mediante el método encode() de la clase $json instanciada en el código mostrado anteriormente. Finalmente solo queda enviar la variable resultante ($myjson) para que sea recibida en el navegador.
Es importante tener en cuenta que dentro del archivo PHP, cualquier comando que generalmente sirve para sacar un valor por pantalla (echo, printf), en este caso lo que hace es añadir dicho valor a la cadena de texto que se va a retornar. Por tanto, ya que queremos devolver una cadena en un formato concreto, deberemos evitar mostrar cualquier dato salvo en la última línea, donde se envía la respuesta correctamente formateada. Cualquier texto antes o después convertiría la respuesta en un texto plano y estropearía la estructura JSON que hemos creado.
En este último paso tendremos que recibir e interpretar la respuesta desde la función JavaScript definida al principio:
Como se puede observar todo es exactamente igual, salvo porque la función "FuncionRecepcion()" responsable de procesar la respuesta ha sido completada para cumplir con su cometido. Lo que hemos hecho en la primera línea es interpretar la cadena de texto en formato JSON y transformarla en un array asociativo que contendrá las variables generadas en el PHP.
Una vez hecho esto se podrían colocar los valores en cualquier lugar de la página para ser integrados en el HTML original de forma que el usuario vea la actualización de una parte del contenido sin ser consciente de todo el proceso que se ha llevado a cabo de forma totalmente transparente. En este caso, dado que en el ejemplo no hemos incluido ningún fragmento de HTML para simplificar las cosas, nos conformaremos con mostrar el resultado mediante popups de JavaScript.
1. ¿Qué es AJAX?
En primer lugar deberíamos partir haciendo una descripción de en que consiste concretamente el manido acrónimo omnipresente en la web actual. Posiblemente el artículo de Wikipedia de una explicación más correcta e inteligible de lo que yo pueda decir, pero resumiendo digamos que se trata de una tecnología basada en JavaScript que permite establecer conexiones con un servidor, enviando y recibiendo datos que dan la posibilidad de realizar operaciones en una base de datos y cambiar el contenido de parte de una web sin necesidad de recargar la página, de forma totalmente transparente para el usuario.
La principal ventaja de este sistema es que da una sensación de agilidad e inmediatez (el tiempo para realizar una misma operación cargando toda la página o mediante una petición AJAX varía considerablemente) que rompe de forma notable con el formato tradicional de la web, donde cada acción correspondía necesariamente a una carga completa de página, ofreciendo una experiencia de usuario novedosa que introduce posibilidades realmente útiles. El uso de dicha técnica ya está ampliamente implantado en la web 2.0, como se puede observar al enviar un comentario en cualquier blog actual, al utilizar gestores de correo como Gmail, Google Maps, varios servicios de Flickr... Y lo mejor de todo es que es realmente fácil de integrar en cualquier web, ya que en muchas ocasiones incluso simplifica las tareas llevadas a cabo de la forma tradicional.
2. Sintaxis de AJAX con jQuery
Como ya he señalado en alguna otra ocasión, jQuery es una librería JavaScript muy ligera (apenas 15kb comprimida) que ofrece una enorme variedad de funcionalidades, entre las que se cuenta proporcionar una cómoda plataforma para utilizar AJAX de forma fiable y sencilla. En la documentación oficial se da una explicación muy detallada de todos y cada uno de los parámetros que se pueden configurar, pero en este caso vamos a ir a lo práctico, empleando la configuración por defecto (válida para la mayor parte de las ocasiones), trabajando únicamente sobre la plantilla que reproduzco a continuación:
function Plantilla(){
valor1=10;
valor2=5;
$.post(
"http://www.dominio.com/ruta/al/archivo.php",
{variable1:valor1,variable2:valor2},
function FuncionRecepcion(respuesta) {
// contenido para procesar la respuesta
}
);
}Como vemos en el fragmento anterior, "Plantilla" sería el nombre de la función JavaScript (asignado arbitrariamente por nosotros) a la que habría que llamar, y que en este caso se ocupa exclusivamente de hacer la petición AJAX contenida en $.post(), una función de la librería jQuery que se ocupa de realizar la conexión con el servidor y gestionar el envío y la recepción de datos. Los argumentos que requiere la función post son:
- La parte remarcada en azul corresponde a la dirección en la que se encuentra el archivo que deseamos que reciba la petición, en el ejemplo "http://www.dominio.com/ruta/al/archivo.php". Para evitar problemas innecesarios es conveniente utilizar rutas absolutas (como la descrita) en lugar de relativas. Posteriormente explicaré las características del archivo (en este caso PHP) que se debe emplear para recibir la petición.
- El segundo argumento, resaltado en rojo, es una lista de las variables que queremos enviar, estructurada en formato JSON (del que hablaremos luego, pero es tan fácil como repetir el modelo marcado para cuantas variables se desee).
- En último lugar, marcado en verde, debemos definir de forma un tanto peculiar una función que sera la encargada de recibir los datos enviados por el servidor ("respuesta") y a partir de ellos hacer las operaciones que sean necesarias. Tanto la definición como el contenido de dicha función ha de colocarse en el interior de la llamada a $.post, como si de un argumento típico se tratase.
3. Atendiendo la petición con PHP y generando la respuesta JSON
Una vez llegados aquí, se supone que habremos realizado la petición AJAX desde JavaScript, se habrán enviado las variables necesarias al servidor, y el navegador estará esperando una respuesta. El archivo PHP que habíamos concretado en la ruta de la función $.post será el encargado de asignar el contenido de las variables antes mencionadas y realizar las operaciones internas oportunas para generar los datos que el cliente espera. La complejidad de este PHP podrá ser variable en función de las gestiones que necesitemos realizar, pero en este caso me parece superfluo perderme en cuestiones al margen de la estructura básica, así que me limitaré a mostrar una transacción de datos bastante inútil pero ilustrativa para el fin que perseguimos:
<?php
include('./JSON.php');
$var1 = $_POST['variable1'];
$var2 = $_POST['variable2'];
$suma = $var1+$var2;
$diferencia = $var1-$var2;
$json = new Services_JSON();
$returnArray = Array(suma=>$suma,diferencia=>$diferencia);
$myjson = $json->encode($returnArray);
echo $myjson;
?>En primer lugar nos fijaremos en la asignacion de las variables $var1 y $var2 desde los valores que habíamos pasado mediante el método POST desde el JavaScript original. El proceso es exactamente igual para cuantas variables deseemos, solamente variando el nombre de las mismas.
Posteriormente se realizan las operaciones triviales para obtener la suma y la diferencia de ambas variables (en este punto se podrían hacer consultas a una base de datos para insertar o extraer valores, algo evidentemente mucho más práctico en un caso real), y finalmente instanciaremos la clase de la librería JSON.php que hemos incluido en la primera línea del archivo.
Creo que en este punto ha llegado el momento de comentar que JSON (JavaScript Object Notation) es un formato para intercambio de datos ligero e intuitivo que en este caso estamos utilizando para estructurar la respuesta AJAX. Esto podría hacerse también mediante XML (como de hecho se planteó originalmente, la última sigla de AJAX corresponde a "XML") o sencillamente mediante texto plano, pero en el primer caso tendríamos la desventaja de tener que manejar un código como XML, mucho mas pesado y complejo a la hora de ser interpretado por JavaScript, y en el segundo nos veríamos limitados a devolver un único paquete de datos que no tendríamos forma de separar en varios valores en el caso de que necesitásemos dar una respuesta múltiple (lo cual es bastante común).
Por lo tanto emplearemos el formato JSON, del que se puede obtener una descripción completa en wikipedia. Sin embargo para el uso que le vamos a dar no será necesario siquiera conocer la estructura, ya que sera la librería PHP antes mencionada la que, a partir de un array asociativo en PHP convencional ($returnArray), se ocupe de darle formato y transformarlo en una estructura JSON válida mediante el método encode() de la clase $json instanciada en el código mostrado anteriormente. Finalmente solo queda enviar la variable resultante ($myjson) para que sea recibida en el navegador.
Es importante tener en cuenta que dentro del archivo PHP, cualquier comando que generalmente sirve para sacar un valor por pantalla (echo, printf), en este caso lo que hace es añadir dicho valor a la cadena de texto que se va a retornar. Por tanto, ya que queremos devolver una cadena en un formato concreto, deberemos evitar mostrar cualquier dato salvo en la última línea, donde se envía la respuesta correctamente formateada. Cualquier texto antes o después convertiría la respuesta en un texto plano y estropearía la estructura JSON que hemos creado.
4. Recepción de la respuesta en JavaScript
En este último paso tendremos que recibir e interpretar la respuesta desde la función JavaScript definida al principio:
function Plantilla(){
valor1=10;
valor2=5;
$.post(
"http://www.dominio.com/ruta/al/archivo.php",
{variable1:valor1,variable2:valor2},
function FuncionRecepcion(respuesta) {
arrayRespuesta=eval('(' + respuesta + ')');
alert('Suma: '+ arrayRespuesta["suma"]);
alert('Diferencia: '+ arrayRespuesta["diferencia"]);
}
);
}Como se puede observar todo es exactamente igual, salvo porque la función "FuncionRecepcion()" responsable de procesar la respuesta ha sido completada para cumplir con su cometido. Lo que hemos hecho en la primera línea es interpretar la cadena de texto en formato JSON y transformarla en un array asociativo que contendrá las variables generadas en el PHP.
Una vez hecho esto se podrían colocar los valores en cualquier lugar de la página para ser integrados en el HTML original de forma que el usuario vea la actualización de una parte del contenido sin ser consciente de todo el proceso que se ha llevado a cabo de forma totalmente transparente. En este caso, dado que en el ejemplo no hemos incluido ningún fragmento de HTML para simplificar las cosas, nos conformaremos con mostrar el resultado mediante popups de JavaScript.
596 Comentarios
Temas relacionados:
JavaScript
Web
PHP