PHP, jQuery y JSON

Con la llegada de la web 2.0 han surgido muchos APIs y librerías que para la mayoría de programadores de PHP tradicional pueden resultar un poco confusas. Al menos, para mi lo fueron en un principio. Es por ello que en este tutorial vamos a ver como hacer funcionar PHP con jQuery, estructuras de datos JSON y peticiones AJAX, para crear una web con mejor apariencia y mas acorde a los tiempos que corren. Para poder ejecutar los ficheros del tutorial necesitaremos tener instalado lo siguiente: PHP 5.3, MySQL, Servidor Apache (en IIS debería funcionar por si alguien trabaja de esa manera, aunque yo no lo he probado), y la librería jQuery. Para instalar los ficheros del tutorial tendréis que descargar el fichero (en la última página del tutorial), y descomprimirlo en una carpeta del /htdocs de vuestro servidor Apache. Una vez descomprimido, acceded a index.php para empezar a ver qué es todo esto que nos hemos descargado. Tras trastear un poco con el código, echémosle un vistazo en profundidad. Comenzaremos con la instalación de jQuery dentro de nuestros scripts. Para tener disponible jQuery necesitamos, además del fichero, una referencia en nuestras páginas HTML, y la función de inicialización de la librería, para tener acceso a toda su funcionalidad.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//Inicialización de jQuery, registramos el evento de "ready" para el elemento document (padre)
$(document).ready(function()
{
   //TODO
}
</script>

Con esto, ya tenemos el framework de jQuery cargado y ya podemos empezar a trabajar con el. $(document).ready(function) lo que hace es decir que el en momento en el que el documento (document) pase por el evento ready, añadiremos un manejador de eventos que definimos en function. Es por eso que el código de lo que queramos hacer debe estar tras esta llamada, antes de esta llamada, jQuery no ha sido inicializado. En este tutorial quiero explicar el potencial que tiene, a nivel de separación y organización del código, usar jQuery y AJAX para hacer una mejor página. En el primer ejemplo, vamos a ver como hacer una sencilla peticion por AJAX, le preguntaremos a un script de PHP la hora. El objeto en si es un poco estúpido, es solo para tener un ejemplo de la arquitectura en la que basaremos los ejemplos. En el fichero simple_time.php tenemos el código fuente de la llamada AJAX.

<script type="text/javascript" src="includes/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//Inicialización de jQuery, registramos el evento de "ready" para el elemento document (padre)
$(document).ready(function()
{
   $("a").click(function()
   {
      $.ajax({      
         url: "phpAjax/time.php",
         success: function(data)
         {
            $("div").html(data);
         }
      });         
   });
});
</script>

Examinemos un poco mejor lo que hace esta llamada. Primero tenemos $. Este signo es un atajo para no tener que escribir jQuery todo el rato. Por tanto $("a") es lo mismo que jQuery("a")       Es importante tener esto en cuenta, porque si estamos usando otra librería como Prototype, al referenciar $ no estaremos llamando a jQuery sino a prototype, a menos que los hagamos compatibles. Ver Usar jQuery con otras librerias para mas información.       Al llamar a $("a").click(function) lo que estamos es definiendo un manejador de evento para el evento click sobre todos los elementos de tipo vínculo       a en la página. Como solo hay uno, no es problema usar esta notación, mas adelante veremos mas formas de referenciar los elementos en la página. A continuación definimos la función que vamos a ejecutar cuando se produzca el evento. Este código, en javascript sería onClick="javascript:hazFuncion", solo que con jQuery se puede tambien hacer de esta forma. Al crear la llamada AJAX, se generan una serie de eventos de la misma, siendo el que nos interesa a nosostros success, en el cual definimos una función de callback que recibe el parámetro data. Dentro de esta función, lo que hacemos es asignar al html de los elementos div (de nuevo, al haber solo uno, no importa referenciarlo de esta forma), el resultado de la llamada. En este caso, el resultado es la fecha de ahora en formato AÑO-MES-DIA HORA-MINUTO-SEGUNDO. De esta manera, hemos preguntado al servidor por unos datos y los hemos mostrado en la página web, sin que en ningún momento se haya movido la barra de recarga del navegador. Además de un bonito efecto visual y menor tiempo en la carga de la página, nos abre la mente a una serie de posibilidades nuevas para el sitio web.       Veamos ahora la parte de servidor del código. Se halla en en fichero . Su código es así de simple:

<?php
echo date('Y-m-d H:m:s', time());
?>

Es decir, que escriba el tiempo en formato YYYY-mm-dd HH:mm:ss. A esta página web podríamos acceder asimismo por una petición directa de URL y nos devolvería el mismo resultado. ¿Cuál es pues, la utilidad de esto, si con nuestros viejos $_POST y $_GET (y mas viejos aún $HTTP_POST_VARS y $HTTP_GET_VARS) ya teníamos todo lo que necesitábamos para pedirle datos al servidor y mostrar los resultados? En el siguiente capítulo veremos un ejemplo un poco mas real de la utilidad de AJAX en este contexto.