Ajax con Prototype. Parte II
En el anterior artículo vimos como trabajar con AJAX sin ayuda de ningún framework que nos facilitara la tarea. A continuación realizaremos una petición asíncrona utilizando el framework Prototype.
El primer paso es descargar la librería desde http://www.prototypejs.org. Una vez copiada en los directorios de nuestro proyecto el siguiente paso será enlazarla en nuestro código HTML.
-
<script src=“prototype.js” type=“text/javascript”></script>
Ya estamos lista para utilizar los objetos y funciones que Prototype pone a nuestra disposición. Veamos como realizar una petición a un script de php llamado test.php
-
var cadenaparametros=“nombre=pepe&apellidos=perez”
-
-
var peticion = new Ajax.Request(
-
“test.php”,
-
{
-
method: ‘get’,
-
parameters: cadenaparametros,
-
asynchronous: true,
-
onComplete: muestraRespuesta
-
});
-
-
function muestraRespuesta(respuesta)
-
{
-
alert(respuesta.responseText)
-
}
Nuestro código PHP sería tan simple como el siguiente.
-
echo(“Tu nombre es “.$_GET[‘nombre’].” y tu apellidos son “.$_GET[‘apellidos’].“. Todo procesado desde PHP”);
-
?>
Una vez se realice la petición se mostrará un cartel de javascript con el mensaje procesado por el script PHP. Ya es tarea nuestra aplicar este mecanismo para realizar elementos que hagan uso de AJAX y que brinden usabilidad y dinamismo a nuestra web.
En este fragmento de código lo primero que encontramos es la definición de la cadenaparametros, la cual contiene una serie de parámetros codificados de la misma forma en que lo haríamos en una cadena GET. A continuación creamos el objeto Ajax.Request que nos permitirá realizar la petición. Como parámetros enviamos dos, el primero es la dirección del script donde vamos a enviar la información, en este caso test.php, y el segundo parámetro es un objeto JSON que nos permite configurar las acciones del objeto. El primer parámetro del objeto JSON indica que la petición se realizará utilizando el protocolo GET. El segundo parámetro envía la cadena de parámetros que necesitamos. No es necesario enviar una cadena de parámetros, con lo cual bastaría con eliminar este elemento del objeto JSON. Por último indicamos que se utilice el modo asíncrono y que cuando se complete con éxito la petición ejecute la función muestraRespuesta. Por otro lado muestra respuesta recibe por defecto el objeto creado que nos permitirá mostrar la respuesta enviada por nuestro script de php por medio del atributo responseText.
Vemos como de una forma mucho mas sencilla hemos realizado el mismo trabajo que en nuestro artículo anterior y lo mejor, funcionará en todos los exploradores de la misma forma.
Las opciones que nuestro objeto JSON puede contener vienen definidas en el manual de Prototype. Entre las que existen nos interesarán las que controlan las acciones a realizar atendiendo al estado de la petición, como pueden ser onCreate, onLoaded u onFailure. De este modo podremos ir controlando lo que debe suceder en nuestra aplicación en cada momento.
Ademas Prototype posee otros objetos y métodos que nos ayuda a la creación rápida de elementos en nuestro website que puede necesitar AJAX para funcionar correctamente. Uno de estos elementos podría ser un panel con las últimas noticias que se actualice periódicamente. Para ello contamos con el método Ajax.PeriodicalUpdater que nos permitirá automatizar las peticiones y la actualización de un elemento DOM.
Junto a los métodos que nos facilitan la aplicación de AJAX en nuestra aplicación, Prototype cuenta con numerosas funciones que nos facilitarán todo tipo de trabajos, desde la manipulación de formularios, el control de eventos y el uso del DOM. En nuestro próximo artículo veremos todos ellos para poder comenzar a utilizar mas a fondo este framework.
