Ajax con Prototype

Definición de AJAX en la wikipedia

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript y XML asíncronos), es una técnica de desarrollo web para crear aplicaciones interactivas. Éstas se ejecutan en el cliente, es decir, en el navegador del usuario, y mantiene comunicación con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma.

La librería Prototype nos ayuda enormemente a usar AJAX en nuestras aplicaciones.

Vamos a ver como hacerlo con unos sencillos ejemplos.

Teniendo en cuenta el siguiente código PHP que incluiremos en una página llamada laPaginaPHP.php, vamos a realizar tres ejemplos. En cada uno usaremos uno de los tres métodos que disponemos para realizar llamadas AJAX.

if (!empty($_POST['nombre']))
{
//conexión con la base de datos
...
 
//creo un numero aleatorio para el id del usuario que voy a actualizar
$idAleatorio = rand (1, 10);
 
//consulta
$consulta = "UPDATE usuarios SET nombre = $_POST['nombre'] WHERE id=$idAleatorio";
 
//ejecución de la consulta
...
 
//devuelvo un texto de que la operación es correcta
echo "La consulta se realizó correctamente";
}
else
echo "La consulta no ha sido realizada";

Ajax.Request

El método Request nos permite sencillamente ejecutar una petición al servidor y nos devuelve el resultado de dicha petición.

En el siguiente código voy a hacer una petición al servidor cuando el usuario pincha sobre un botón. Esta petición actualizará la base de datos y nos devolverá el resultado.

<script>
	function actualiza()
	{
		Ajax.Request("laPaginaPHP.php", {
			postBody:"nombre=pepitoDeLosPalotes",
			onSuccess: function(objeto)
			{
				alert(objeto.responseText);
			}
		}
	}
</script>
<input type="button" value="pinchame" />

Ajax.Updater

El método Updater se diferencia del anterior, en que este imprime el contenido de la respuesta en el primer parametro de la llamada. En el siguiente ejemplo escribo la respuesta en una capa llamada “capaResultado”.

<script>
	function actualiza()
	{
		Ajax.Updater("capaResultado", "laPaginaPHP.php", {
			postBody:"nombre=pepitoDeLosPalotes"
		}
	}
</script>
<div id="capaResultado"></div>
<input type="button" value="pinchame" />

Ajax.PeriodicalUpdater

El último método que hay es una ampliación del Updater. En este caso, como su nombre indica, la llamada se repetirá indefinidamente con la frecuencia especificada (2 segundos es el valor por defecto). Si el objeto no obtiene respuesta la frecuencia se aumentará automáticamente. En el momento en que obtenga respuesta, la frecuencia volverá a tener el valor que nosotros especificamos en la declaración.

<script>
	function actualiza()
	{
		Ajax.PeriodicalUpdater("capaResultado", "laPaginaPHP.php", {
			frequency: 5,
			postBody:"nombre=pepitoDeLosPalotes"
		}
	}
</script>
<div id="capaResultado"></div>
<input type="button" value="pinchame" />

Como hemos visto el uso del objeto AJAX es muy sencillo. En estos ejemplos no he añadido apenas opciones ni callbacks, las cuales son comunes en los tres métodos.

Algunas de las opciones son las siguientes:

• postBody aqui incluiremos los valores que queramos enviar en formato URL (“nombre=pepito&apellido=fernandez&edad=15″)
• method determina la forma en la que enviamos el contenido. Este puede ser “post” o “get”
• asynchronous indica si la llamada será síncrona o asíncrona. Los valores son true o false

Y algunos callbacks son:

• onFailure función personalizada que se ejecutará cuando la llamada haya sido completada con algun error
• onSuccess función personalizada que se ejecutará cuando la llamada haya sido completada correctamente

Con esto hemos visto lo básico acerca de ajax y su utilización, asi que ya podeis ir haciendo vuestros pinitos

•