Introducción.
Muy probablemente usted esté aquí, leyendo este artículo porque desea aprender a utilizar AJAX con PHP de una manera muy simple y rápida. Yo estoy aquí porque hoy no tengo sueño y que mejor manera de esperarlo que escribir un pequeño tutorial acerca del acceso asíncrono de contenidos web utilizando el framework de jQuery.
Para no tener que dividir el artículo en varias entregas vamos a desarrollar un ejemplo muy sencillo y clásico: la calculadora, sólo que a diferencia de la habitual esta realizará sus cálculos del lado del servidor y presentará sus resultados a través de llamados con AJAX. La implementación Javascript asociada con el objeto AJAX (el objeto XMLHTTPRequest) no la realizaremos directamente sino que utilizaremos el framework de jQuery el cual simplifica y facilita enormemente el desarrollo en Javascript. El lado del servidor, los cálculos de nuestra calculadora, se implementarán en el viejo y conocido PHP. Por supuesto para implementar el nivel de presentación (página web) que recibe el cliente tendremos que hablar un poco de HTML y CSS.
Qué es AJAX ?
AJAX es el acrónimo de Asynchronous JavaScript and XML, un conjunto de tecnologías web que permiten que las aplicaciones web desde sus clientes se comuniquen y soliciten información al servidor de manera asíncrona sin interferir con el contenido y comportamientos de la página actual, es decir, sin refrescar (postback) la página web por completo.
Su implementación se basa en el objeto XMLHttpRequest o XHR el cual fue originalmente desarrollado por Microsoft y apareció por primera vez en 1999 como un control ActiveX de Internet Explorer 5, posteriormente los demás navegadores lo acogieron desarrollando sus propias implementaciones.
En términos generales el uso de AJAX mejora la usabilidad de las páginas permitiendo a los desarrolladores crear aplicaciones que se comportan de manera similar a las aplicaciones de escritorio. Un ejemplo de esto son los clientes de correo web de última generación (como GMail) y las aplicaciones geográficas (como Google Maps). También tiene sus desventajas como presentar una mayor dificultad para su depuración, control de favoritos e historial y que los buscadores web comúnmente no pueden acceder a sus contenidos para indexarlos.
Consulte mas información acerca de AJAX en Wikipedia.
Procedimiento.
Estos son los pasos generales que realizaremos para implementar nuestra pequeña aplicación.
- Crear la estructura básica de la página web.
- Implementar el formulario de la calculadora.
- Mejorar la presentación del formulario.
- Implementar la lógica del negocio de la calculadora.
- Incluír una referencia a la librería de jQuery en la página web.
- Implementar los llamados asíncronos a la lógica del negocio de la calculadora.
La estructura básica de la página.
El primer paso es crear la estructura básica de la página web que recibirá el usuario. Esta se puede crear con cualquier editor de texto desde el bloc de notas hasta otro mas elaborado como Dreamweaver o Eclipse PDT. Lo importante es que sea un editor de archivos planos. En mi caso estoy probando gPHPEdit para Linux el cual se ve hasta ahora simple y conciso. Para el caso de Windows un editor simple como el Notepad++ servirá.
Creamos entonces el archivo calculadora.html con el siguiente contenido.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Documento HTML con carácteres UTF8 -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Calculadora AJAX</title>
<!-- Clases CSS internas -->
<!-- Referencias a Javascripts externos -->
<!-- Código Javascript interno -->
</head>
<body>
<!-- Contenido del documento -->
</body>
</html>
He incluído algunos <!-- comentarios --> que nos servirán mas adelante para ubicar donde en el documento se deberán agregar segmentos de código adicionales. Como se puede apreciar, esperamos ceñirnos al XHTML 1.1 transitional.
El formulario de la calculadora.
Este deberá contar con las siguientes partes básicas.
- Una sección para los mensajes de error (mensaje) de la aplicación.
- Un form (formulario) que representa al formulario en HTML.
- Un campo de texto (operando1) para 4 dígitos para que el usuario ingrese al primer operando.
- Un campo de selección (operador) para que el usuario elija la operación a efectuarse: suma, resta, multiplicación o división.
- Un campo de texto (operando2) para 4 dígitos para que el usuario ingrese al segundo operando.
- Un botón (igual) para invocar la operación de los datos.
- Una sección (resultado) para mostrar el resultado de la operación.
La siguiente es la implementación de esta sección y debe insertarse como el Contenido del documento en la plantilla de la estructura básica de la página web.
<div id='pagina'>
<div id='mensaje'> </div>
<form id='formulario' action='#' method='post'>
<input type='text' id='operando1' name='operando1' value='' size='4' maxlength='4' />
<select id='operador' name='operador'>
<option value='SU'>+</option>
<option value='RE'>-</option>
<option value='MU'>*</option>
<option value='DI'>/</option>
</select>
<input type='text' id='operando2' name='operando2' value='' size='4' maxlength='4' />
<input type='button' id='igual' value='=' />
<span id='resultado'> </span>
</form>
</div>
Mejorar la presentación del formulario.
Este es el producto final de la actualización de la presentación de la página web, es necesario modificar los atributos visuales de cada una de las partes del formulario recién creado.
Interfaz de usuario de la calculadora
Las nuevas características se especifican utilizando hojas de estilo (CSS) y se referencian a través de sus identificadores, etiquetas o clases.
El siguiente código CSS realiza las modificaciones propuestas al formulario. Estas se deben insertar en la sección de Clases CSS Internas.
<style type="text/css">
#pagina /* Envoltura general */
{
margin: auto; /* Margenes (centrado) */
width: 600px; /* Ancho */
text-align: center; /* Textos internos centrados */
font-family: "arial, sans-serif"; /* Fuente del texto */
}
#mensaje /* Mensaje de error */
{
width: 100%; /* Ancho */
margin-top: 20px; /* Margen superior */
margin-bottom: 30px; /* Margen inferior */
color: #ff0e0e; /* Color del texto (foreground) */
font-size: 12px; /* Tamaño de la fuente */
}
#operando1, #operando2 /* Campos de texto de los operandos */
{
font-size: 25px; /* Tamaño de la fuente */
border-style: groove; /* Estilo del borde */
}
#operador /* Selector del operador */
{
font-size: 25px; /* Tamaño de la fuente */
}
#igual /* Botón para realizar la operación */
{
font-size: 25px; /* Tamaño de la fuente */
}
#resultado /* Campo de texto donde se despliega el resultado */
{
font-size: 25px; /* Tamaño de la fuente */
font-style: italic; /* Atributo de fuente itálica o cursiva */
}
</style>
La lógica del negocio de la calculadora.
El hecho de calcular el valor resultante de la operación elegida a partir de los operandos especificados es lo que llamamos la lógica del negocio. Esta lógica, como se dijo inicialmente, la vamos a implementar en PHP en el archivo calcular.php.
Los pasos generales que deben realizarse para llevar a cabo exitosamente el cálculo del valor resultante son los siguientes.
- Obtener la información provista por el usuario: operandos y operador.
- Verificar que la información proporcionada por el usuario sea válida.
- Realizar la operación indicada con los valores suministrados.
- Mostrar el resultado.
Como veremos a continuación la implementación de estos pasos es ligeramente mas interesante que su simple mención.
Para iniciar el código PHP, le indicamos al navaegador que la respuesta del script será un texto. Este paso específico es opcional ya que para PHP este es el tipo de respuesta por defecto.
<?php
/* Indicar el tipo de contenido que tendrá la respuesta */
header('Content-type: text/html');
La implementación de las siguientes acciones la vamos a recubrir en un bloque try/catch ya que es suceptible de generar errores y consecuentemente, lanzar excepciones.
El siguiente paso es el obtener, intentar sanear y verificar los operandos proporcionados por el usuario desde el formulario HTML. Los parámetros fueron transmitidos a través del método post y los elementos se diferencian por su identificador.
try
{
/* Obtener y sanear los valores de los operadores */
$operando1 = filter_var($_POST['operando1'], FILTER_SANITIZE_NUMBER_FLOAT);
$operando2 = filter_var($_POST['operando2'], FILTER_SANITIZE_NUMBER_FLOAT);
/* Verificar que los valores de los operadores correspondan
con los tipos esperados */
if(!filter_var($operando1, FILTER_VALIDATE_FLOAT) ||
!filter_var($operando1, FILTER_VALIDATE_FLOAT))
throw new Exception("Operandos inválidos: [{$operando1}] y [{$operando2}]");
Realizamos una tarea similar con el operador, obtenemos su valor y verificamos que sea válido.
/* Obtener el valor del operador */
$operador = $_POST['operador'];
/* Verificar que el operador suministrado sea válido */
if(!in_array($operador, array('SU', 'RE', 'MU', 'DI')))
throw new Exception ("Operador inválido: [{$operador}]");
Definimos una variable para almacenar el resultado de la operación solicitada.
/* Almacenar resultado, inicialmente desconocido */
$resultado = 0;
Realizamos la operacion correspondiente al operador recibido. Se deben tener en cuenta dos posibles contingencias que pueden suceder: en el caso de la division, el denominador, es decir, el segundo operador no puede ser cero. El segundo caso que debe tenerse en cuenta es que el operador recibido no corresponda con ninguna de las operaciones conocidas, esto habria sido validado inicialmente al verificar el operador suministrado despues de su recuperacion.
/* Realizar la operación solicitada */
switch($operador)
{
case 'SU': $resultado = $operando1 + $operando2;
break;
case 'RE': $resultado = $operando1 - $operando2;
break;
case 'MU': $resultado = $operando1 * $operando2;
break;
case 'DI': /* Verificar si el denominador es cero,
en ese caso, la división no puede realizarse */
if ($operando2 == 0)
throw new Exception ('División por cero');
$resultado = $operando1 / $operando2;
break;
default: /* Si ninguna operación se ejecutó significa
que el operador era inválido (segunda verificación) */
throw new Exception('Operador desconocido');
break;
}
}
Para terminar la lógica de la calculadora debemos lidiar con los dos posibles resultados. Si el procesamiento tuvo algún error (se lanzó una excepción durante el proceso) o si su terminación fue exitosa.
En caso de haber sucedido un error este se indica al usuario mediante un mensaje descriptivo y al navegador al enviarle un código 400.
catch(Exception $e) /* La operación produjo un error */
{
/* Indica al navegador la condición de error */
header("Status: 400 Bad Request", true, 400);
/* Despliega el mensaje de error para el usuario */
echo $e -> getMessage();
exit(1);
}
En caso de terminar la operación exitosamente, se deberá mostrar al usuario el resultado de la misma e informarle al navegador con un código 200.
/* La operación se realizó exitosamente */
/* Indica al navegador la condición de éxito */
header("Status: 200 OK", true, 200);
/* Despliega el resultado de la operación para el usuario */
echo number_format($resultado, 4);
exit(0);
?>
Incluír la referencia a jQuery.
En este paso lo que hacemos en incluír a la librería jQuery en nuestro proyecto web para poder utilizarla en nuestros fragmentos de código Javascript.
Para hacer esto se debe agregar la siguiente línea en la sección Referencias de Javascript externos.
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script>
Este fragmento utiliza Google AJAX Libraries que nos permite incluír los principales frameworks de Javascript en nuestros sitios web sin preocuparnos por su almacenamiento o implementación, en este caso, incluír la distribución estable mas reciente de la rama 1.x. Obviamente este método requiere que el cliente tenga acceso a Internet además de la aplicación web.
Una forma mas tradicional de hacer lo mismo es el descargar por nuestra propia cuenta la distribución de jQuery desde su sitio web, almacenar el archivo en nuestro servidor y hacer una referencia desde la página web como se muestra a continuación.
<script src='http://www.servidor.com/ruta/jquery.js' type='text/javascript'></script>
Implementar las invocaciones asíncronas.
La implementación de la invocación asíncrona se realiza directamente en Javascript utilizando a la librería jQuery recién referenciada. Su código se agrega bajo la sección Código Javascript interno.
El primer paso que se debe realizar para su implementación es relacionar el evento de presionar el botón igual con la invocación del llamado asíncrono. Para hacer esto vamos a utilizar un método no invasivo, es decir, no vamos a contaminar el HTML con el atributo onClick para el elemento INPUT sino que lo haremos desde el código Javascript favoreciendo la separación entre presentación/lógica del negocio y maximizando la flexibilidad de esta última.
Para hacer esto, tan pronto como se carga la página se asocia el evento de clic sobre el botón de igual para que se invoque la función procesar.
<script type='text/javascript'>
/* Código a ejecutarse tan pronto como la
página ha sido cargada por el navegador */
$(document).ready(function ()
{
/* Asociar el evento de clic del botón 'igual'
con la lógica del negocio de la aplicación */
$('#igual').click(function()
{
procesar();
});
});
El siguiente paso es la implementación de la función procesar. En ella se realiza el llamado asíncrono a través de AJAX a la aplicación web en PHP desarrollada anteriormente para realizar el cálculo solicitado.
Una invocación asíncrona típica incluye la siguiente información básica.
- El URL de la aplicación web a invocarse.
- El tipo del requerimiento a realizarse (GET o POST normalmente).
- Los datos a enviarse como parámetros desde el formulario web (en formato QueryString).
- Definir la implementación de que hacer si la invocación es exitosa.
- Definir la implementación de que hacer si la invocación es fallida.
En el siguiente fragmento de código se especifican los primeros tres elementos de la lista. El llamado asíncrono accederá a la aplicación web calcular.php mediante el método post y se le enviarán como parámetros los campos del formulario formulario.
function procesar()
{
$.ajax ({
url: 'calcular.php', /* URL a invocar asíncronamente */
type: 'post', /* Método utilizado para el requerimiento */
data: $('#formulario').serialize(), /* Información local a enviarse con el requerimiento */
En caso de ser exitoso se deberá mostrará un mensaje verde informándolo y se desplegará el resultado obtenido de la operación en la ubicación definida para este fin.
/* Que hacer en caso de ser exitoso el requerimiento */
success: function(request, settings)
{
/* Cambiar el color del texto a verde */
$('#mensaje').css('color', '#0ab53a');
/* Mostrar un mensaje informando el éxito sucedido */
$('#mensaje').html("Operación realizada exitosamente");
/* Mostrar el resultado obtenido del cálculo solicitado */
$('#resultado').html(request);
},
En caso de que la invocación sea fallida se deberá mostrar un mensaje rojo informando el error sucedido y se removerá cualquier resultado previo que pueda haber para no confundir al usuario con información anterior.
/* Que hacer en caso de que sea fallido el requerimiento */
error: function(request, settings)
{
/* Cambiar el color del texto a rojo */
$('#mensaje').css('color', '#ff0e0e');
/* Mostrar el mensaje de error */
$('#mensaje').html('Error: ' + request.responseText);
/* Limpiar cualquier resultado anterior */
$('#resultado').html('Error');
}
}); // Fin de la invocación al método ajax
} // Fin de la función procesar
</script>
Enlaces.
- Demostración & descarga del código fuente.
http://demo.jorgeivanmeza.com/jQuery/AjaxSimpleRapido-Calc/ - jQuery.
http://jquery.com/ - Simplify Ajax development with jQuery
http://www.ibm.com/developerworks/library/x-ajaxjquery.html
id='operador'
