El framework de Ajax más popular: Prototype
Básicamente un framework consiste en un conjunto de utilidades y bibliotecas que nos facilitan la realización de un desarrollo de software. Uno de los puntos importantes de los frameworks es que dentro de nuestra programación varios bloques de códigos son repetitivos, por lo que es posible contar un una herramienta que automatice la generación de este código para facilitar la construcción del software. Una vez un amigo me hizo una analogía muy buena de como debíamos ver lo que es un framework y para qué nos sirve, este puede verse como el armazón de una casa de madera, en la que el armazón representa las piezas de madera sobre las que se monta toda la estructura de las paredes, los pisos y los techos. Así, este conjunto de piezas de madera sustenta toda la construcción, pero al mismo tiempo, pueden utilizarse en otras construcciones con características similares, solo hay que tener la suficiente cantidad de piezas cortadas y listas para utilizarse nuevamente, por lo que ya no nos preocuparemos por tener que fabricar nosotros mismos un nuevo armazón. Entonces, regresando a la programación, el framework representará todas esas herramientas diseñadas previamente que nos facilitarán el trabajo de desarrollar nuevos sistemas de software.
Si recordamos los temas de Javascript y Ajax, encontramos que en los diferentes ejemplos hemos estado repitiendo varias de las rutinas para acceder a los recursos del servidor, entonces en este post veremos uno de los frameworks libres que existen para el trabajo con Javascript y Ajax, llamado Prototype, el cual fue diseñado originalmente por Sam Stephenson, pero que sus ultimas versiones incorpora código de otros programadores. Consiste en una biblioteca de objetos que encapsulan varias funcionalidades para Javascript y Ajax, dentro de los métodos y propiedades que contienen, tratando de simular una estructura de clases como la de otros lenguajes de programación.
Para probarlo, basta con acceder al sitio Web oficial para su descarga: http://www.prototypejs.org/
En la sección Download, encontraremos la última versión estable de esta biblioteca, contenida en un archivo *.js. La última versión estable que yo encontré corresponde al archivo prototype-1.6.0.3.js. Descargaremos este archivo en nuestro equipo y lo guardaremos en el directorio del servidor Web que contenga nuestros archivos HTML.
Para dar un ejemplo rápido de la utilización de esta biblioteca, realizaremos la programación de un nuevo cliente Ajax dentro de una página HTML, en la que incluiremos la referencia al archivo *.js que acabamos de descargar.
Consideraciones previas
Hay tres maneras de realizar una petición Ajax con Prototype:
1) Ajax.Request
2) Ajax.PeriodicalUpdater
3) Ajax.Updater
Para el ejemplo utilizaremos la funcionalidad Request del objeto Ajax llamada Ajax.Request, la cual nos permite realizar una petición de un recurso al servidor Web. Este método del objeto Ajax se instancía como si se tratara de una clase y recibe una serie de parámetros:
Manos a la obra
Para este ejemplo nos basaremos en el código del archivo HTML del tercer ejercicio que vimos con Ajax, que titulamos Combinando Ajax con PHP, en el que realizamos un cliente Ajax que envía un serie de valores por POST a un programa PHP, el cual valida el contenido de estos datos y devuelve un mensaje como respuesta.
Dentro del código incluiremos una sentencia que reverenciará al archivo que contiene la biblioteca Prototype:
El código refactorizado para la petición Ajax consistirá en una única función llamada peticionAjax, dentro de la que se realizará una instancia de Ajax.Request:
El la variable url y el objeto objParametros representan los parámetros url y parameters que definimos previamente. Podemos ver que se realiza una llamada a la función creaObjParametros, con la cual se obtiene un objeto que dentro de sus propiedades contiene cada uno de estos parámetros que serán enviados junto con la petición HTTP. Posteriormente encontramos la instancia al método Ajax.Request en la que se incluye la variable url como primer parámetro, después aparece la declaración de un objeto -indicado con la apertura y cierre de las llaves { }- dentro del cual se establecen de una serie de propiedades y métodos:
Las propiedades representan el resto de los parámetros necesarios para la petición como son method (tipo de método de envío) y parameters (parámetros enviados junto con la petición), mientras que los métodos declarados representan las funciones que serán ejecutados en cada uno de los eventos de la petición, identificando estos métodos con el nombre del evento que representa, ya sea onCreate, onSuccess y onFaliure.
El código completo de la implementación dentro de la página HTML es el siguiente:
Para probarlo solamente deberemos comprobar la ubicación del archivo de la biblioteca Prototype, representada en el código con el nombre prototype-1.6.0.3.js, dado que en ejemplo se espera que este archivo se encuentre en el mismo directorio de la página HTML. De la misma forma debemos asegurarnos de que la ruta del archivo PHP validaDatos.php dentro del servidor Web es correcta. Por si desean tener otra vez a la mano este archivo PHP aquí les dejo su código:
Una vez almacenados estos archivos podremos probarlos y comprobar que el cliente realiza la misma tarea que el original,
con la diferencia de que gracias a los eventos de Prototype se despliega un mensaje al iniciar la petición, y en caso de que ocurriera un error podríamos darnos por enterados gracias al mensaje de alerta que incluimos. Es cierto que toda esta funcionalidad la podríamos haber realizado nosotros mismos utilizando la clase XMLHttpRequest, pero habríamos tenido que invertir una cantidad de tiempo importante, por lo que en este momento es cuando podemos apreciar la gran ayuda que nos brinda Prototype, y no solo al ahorrarnos tiempo de trabajo sino que además nos permite organizar mejor nuestra programación con Ajax, al brindarnos una estructura prediseñada con la cual especificamos la configuración de la petición y la funcionalidad completa del proceso, con todo lo cual se vuelve realmente más fácil nuestra labor como programadores de clientes Ajax.
Como conclusión final puedo decir que vale la pena invertir tiempo en dominar nuevas herramientas para facilitar nuestro trabajo de programación, ya que esto nos ayuda a que podamos construir mejores proyectos de software en el futuro.
Si recordamos los temas de Javascript y Ajax, encontramos que en los diferentes ejemplos hemos estado repitiendo varias de las rutinas para acceder a los recursos del servidor, entonces en este post veremos uno de los frameworks libres que existen para el trabajo con Javascript y Ajax, llamado Prototype, el cual fue diseñado originalmente por Sam Stephenson, pero que sus ultimas versiones incorpora código de otros programadores. Consiste en una biblioteca de objetos que encapsulan varias funcionalidades para Javascript y Ajax, dentro de los métodos y propiedades que contienen, tratando de simular una estructura de clases como la de otros lenguajes de programación.
Para probarlo, basta con acceder al sitio Web oficial para su descarga: http://www.prototypejs.org/
En la sección Download, encontraremos la última versión estable de esta biblioteca, contenida en un archivo *.js. La última versión estable que yo encontré corresponde al archivo prototype-1.6.0.3.js. Descargaremos este archivo en nuestro equipo y lo guardaremos en el directorio del servidor Web que contenga nuestros archivos HTML.
Para dar un ejemplo rápido de la utilización de esta biblioteca, realizaremos la programación de un nuevo cliente Ajax dentro de una página HTML, en la que incluiremos la referencia al archivo *.js que acabamos de descargar.
Consideraciones previas
Hay tres maneras de realizar una petición Ajax con Prototype:
1) Ajax.Request
2) Ajax.PeriodicalUpdater
3) Ajax.Updater
Para el ejemplo utilizaremos la funcionalidad Request del objeto Ajax llamada Ajax.Request, la cual nos permite realizar una petición de un recurso al servidor Web. Este método del objeto Ajax se instancía como si se tratara de una clase y recibe una serie de parámetros:
url
URL del recurso Web que será solicitado al servidor Web en la petición HTTP.
method
Este puede ser HTTP GET o HTTP POST. Por defecto está definido como POST.
parameters
Los parámetros representan las parejas llave-valor que serán enviados a la pagina solicitada, que representan los mismos datos que pasamos en la cadena de consulta (query) cuando solicitamos una URL remota en los ejemplos anteriores.
Eventos Prototype de Ajax:
Además de estos parámetros, para la petición dentro de Ajax.Request también se incluye una referencia a una serie de funciones que definen un grupo específico de eventos, que se ejecutan automáticamente cuando se completa una tarea o cuando ocurre un error:
onCreate:
Este evento es llamado siempre que se realiza una nueva petición Ajax con Ajax.Request. Es útil si deseamos ver una señal de que se ha iniciado una peticón Ajax.
onSuccess:
Este evento es llamado siempre que una petición es completada y el código de estado regresado esta dentro de 2xx.
onFailure:
Este evento es llamado siempre que la petición es completada y el código de estado no esta dentro de 2xx.
Manos a la obra
Para este ejemplo nos basaremos en el código del archivo HTML del tercer ejercicio que vimos con Ajax, que titulamos Combinando Ajax con PHP, en el que realizamos un cliente Ajax que envía un serie de valores por POST a un programa PHP, el cual valida el contenido de estos datos y devuelve un mensaje como respuesta.
Dentro del código incluiremos una sentencia que reverenciará al archivo que contiene la biblioteca Prototype:
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
El código refactorizado para la petición Ajax consistirá en una única función llamada peticionAjax, dentro de la que se realizará una instancia de Ajax.Request:
function peticionAjax() {
var url = "http://localhost/validaDatos.php";
var objParametros = creaObjParametros();
var ajaxObjhttp = new Ajax.Request(url,
method: 'POST',
parameters: objParametros,
onCreate: function(transport) {
document.getElementById("divRespuesta").innerHTML = "<p>Iniciando nueva petición Ajax...</p>";
},
onSuccess: function(transport) {
document.getElementById("divRespuesta").innerHTML += transport.responseText;
},
onFailure : function(response) {
alert("Ocurrió un error al acceder al servidor Web");
}
});
function creaObjParametros() {
var obj = new Object();
obj.txtAutor = document.getElementById("txtAutor").value;
obj.txtAnio = document.getElementById("txtAnio").value;
obj.txtTitulo = document.getElementById("txtTitulo").value;
return obj;
}
El la variable url y el objeto objParametros representan los parámetros url y parameters que definimos previamente. Podemos ver que se realiza una llamada a la función creaObjParametros, con la cual se obtiene un objeto que dentro de sus propiedades contiene cada uno de estos parámetros que serán enviados junto con la petición HTTP. Posteriormente encontramos la instancia al método Ajax.Request en la que se incluye la variable url como primer parámetro, después aparece la declaración de un objeto -indicado con la apertura y cierre de las llaves { }- dentro del cual se establecen de una serie de propiedades y métodos:
var ajaxObjhttp = new Ajax.Request(url,
method: 'POST',
parameters: objParametros,
onCreate: function(transport) {
document.getElementById("divRespuesta").innerHTML = "<p>Iniciando nueva petición Ajax...</p>";
},
onSuccess: function(transport) {
document.getElementById("divRespuesta").innerHTML += transport.responseText;
},
onFailure: function(response) {
alert("Ocurrió un error al acceder al servidor Web");
}
});
Las propiedades representan el resto de los parámetros necesarios para la petición como son method (tipo de método de envío) y parameters (parámetros enviados junto con la petición), mientras que los métodos declarados representan las funciones que serán ejecutados en cada uno de los eventos de la petición, identificando estos métodos con el nombre del evento que representa, ya sea onCreate, onSuccess y onFaliure.
El código completo de la implementación dentro de la página HTML es el siguiente:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Petición Ajax con Prototype</title>
<script type="text/javascript" src="prototype-1.6.0.3.js"><!-- Referencia a Prototype--></script>
<script type="text/javascript">
function peticionAjax() {
var url = "http://localhost/validaDatos.php"; //URL Recurso Web accedido
var objParametros = creaObjParametros(); //Llamada a la función que devuelve los parámetros dentro de un objeto
var ajaxObjhttp = new Ajax.Request(url, {
method: 'POST',
parameters: objParametros,
onCreate: function(transport) { //Método ejecutado cuando se inicie la petición
document.getElementById("divRespuesta").innerHTML = "<p>Iniciando nueva petición Ajax...</p>";
},
onSuccess: function(transport) { //Método ejecutado cuando la petición es completada sin errores
document.getElementById("divRespuesta").innerHTML += transport.responseText;
},
onFailure : function(response) { //Método ejecutado cuando la petición es completada con algún error
alert("Ocurrió un error al acceder al servidor Web");
}
});
}
function creaObjParametros() {//Función que almacena en un objeto los valores capturados en el formulario que serán enviados por POST a la página HTML
var obj = new Object();
obj.txtAutor = document.getElementById("txtAutor").value;
obj.txtAnio = document.getElementById("txtAnio").value;
obj.txtTitulo = document.getElementById("txtTitulo").value;
return obj;
}
</script>
</head>
<body>
<form style="background-color:#EFEDF1">
<label for="txtAutor">Autor:</label>
<input type="text" id="txtAutor" name="txtAutor" size="40" /><br/>
<label for="txtAnio">Año:</label>
<input type="text" id="txtAnio" name="txtAnio" size="10" /><br/>
<label for="txtTitulo">Títiulo:</label>
<input type="text" id="txtTitulo" name="txtTitulo" size="50" /><br/>
<input type="button" value="Validar datos" onclick="peticionAjax()" />
</form>
<div id="divRespuesta"></div>
</body>
</html>
Para probarlo solamente deberemos comprobar la ubicación del archivo de la biblioteca Prototype, representada en el código con el nombre prototype-1.6.0.3.js, dado que en ejemplo se espera que este archivo se encuentre en el mismo directorio de la página HTML. De la misma forma debemos asegurarnos de que la ruta del archivo PHP validaDatos.php dentro del servidor Web es correcta. Por si desean tener otra vez a la mano este archivo PHP aquí les dejo su código:
validaDatos.php
<?
//Expresiones regulares para la validación de los datos
$er_titulo = "/^([a-z]|[A-Z]|[ÁÉÍÓÚáéíóúÑñÜü]|[0-9]|[\s\.\-,:'\"])+$/";
$er_autor = "/^([a-z]|[A-Z]|[ÁÉÍÓÚáéíóúÑñÜü]|[\s,\.'\-])+$/";
$er_anio = "/^([1-2][0-9][0-9][0-9])$/";
//Validamos que se hayan enviado todos los datos por post
if(isset($_POST['txtAutor']) && isset($_POST['txtAnio']) && isset($_POST['txtTitulo'])){
//Validamos el contenido de los campos
$autor = stripslashes(trim($_POST['txtAutor']));
$anio = trim($_POST['txtAnio']);
$titulo = stripslashes(trim($_POST['txtTitulo']));
if(!preg_match($er_autor,$autor)){
$campo = "autor";
}
else if(!preg_match($er_anio,$anio)){
$campo = "año";
}
else if(!preg_match($er_titulo,$titulo)){
$campo = "título";
}
else{
$mensaje = "Todos los campos capturados son correctos :)";
}
if(isset($campo))
$mensaje = "Error: El texto capturado en el campo $campo es incorrecto";
}
else{
$mensaje = "No se recibieron los valores";
}
?>
<p><?=$mensaje?></p>
<p><u>Valores recibidos</u>:<br />
Autor: <?=$_POST['txtAutor']?><br />
Año: <?=$_POST['txtAnio']?><br />
Título: <?=$_POST['txtTitulo']?><br />
</p>
Una vez almacenados estos archivos podremos probarlos y comprobar que el cliente realiza la misma tarea que el original,
con la diferencia de que gracias a los eventos de Prototype se despliega un mensaje al iniciar la petición, y en caso de que ocurriera un error podríamos darnos por enterados gracias al mensaje de alerta que incluimos. Es cierto que toda esta funcionalidad la podríamos haber realizado nosotros mismos utilizando la clase XMLHttpRequest, pero habríamos tenido que invertir una cantidad de tiempo importante, por lo que en este momento es cuando podemos apreciar la gran ayuda que nos brinda Prototype, y no solo al ahorrarnos tiempo de trabajo sino que además nos permite organizar mejor nuestra programación con Ajax, al brindarnos una estructura prediseñada con la cual especificamos la configuración de la petición y la funcionalidad completa del proceso, con todo lo cual se vuelve realmente más fácil nuestra labor como programadores de clientes Ajax.
Como conclusión final puedo decir que vale la pena invertir tiempo en dominar nuevas herramientas para facilitar nuestro trabajo de programación, ya que esto nos ayuda a que podamos construir mejores proyectos de software en el futuro.
Entradas
