De regreso con un breve artículo sobre como utilizar el framework para trabajar con
AJAX llamado
jQuery. Esta biblioteca de funciones tiene como objetivo general facilitar nuestro trabajo no solo con AJAX sino con todos nuestros scripts de Javascript, ofreciendo -como podemos ver en su documentación anterior- APIs como
selectores para el acceso directo a los elementos de la página, manipulación del
contenido CSS,
efectos de animación en los elementos HTML, manejo de eventos, entre otras muchas utilidades. Debido a la gran popularidad de que ha gozado en las noticias que han llegado a un servidor, decidí explorar un poco este paquete para ver que cosas se pueden hacer con sus herramientas.
Una de las diferencias principales que aparecen en esta framework comparado con
Prototype, es que en jQuery existe un mayor encapsulamiento de las funciones, lo que se aprecia en la cantidad de código que resulta al comparar ambos métodos, y queda todavía más claro cuando revisamos que Prototype nos permite crear
nuestras propias clases para utilizarlas en las aplicaciones, cosa que no existe en jQuery, donde la filosofía es reducir el trabajo del programador y alejarlo de los detalles tras el código. En este artículo del blog de
anieto2k podemos ver una pequeña comparación entre el rendimiento de ambas soluciones. Por otro lado, la conclusión a la que llegan la web
intenta sobre el por qué ha ganado tanto terreno el framework jQuery, es que realmente hace más sencillo el desarrollo, cosa que siempre es bienvenida. :-)
Pero bueno, vayamos a la práctica y veamos cómo trabajar con AJAX utilizando este framework. El archivo de esta biblioteca lo encontraremos en su página oficial, dentro de la sección
download. Este archivo lo utilizaremos en el código HTML haciendo referencia a él por medio del ya conocido acceso a archivos javascript:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
Antes de empezarDentro de la documentación que la página oficial contiene, podemos revisar el apartado sobre la funcionalidad de
jQuery para AJAX, gracias al conjunto de métodos que posee es posible llevar a cabo todo el proceso de petición al servidor Web, y procesamiento de la respuesta en unas pocas líneas de código. Concretamente nos centraremos en el método
jQuery.ajax(), ya que en un solo llamado a esta función podemos configurar todo el proceso de la petición AJAX.
Esta función recibe un único parámetro que consisten en un objeto, que posee una serie de propiedades que nos permiten definir todo el proceso de la petición AJAX. Para este ejemplo utilizaremos las siguientes:
urlDirección URL del recurso Web al que accederemos.
typeDefine el tipo de envío de información que se hará, ya sea GET o POST.
dataCorresponde a la información que se mandará al servidor, en forma de parejas llave-valor, éste representa los mismos datos que pasamos en la cadena de consulta (query) cuando solicitamos una URL remota en los ejemplos sobre AJAX anteriores. Puede ser una cadena de valores codificada en formato de URL (p.e. '&dato1=valor1&dato2=valor2') o un objeto cuyas propiedades correspondan a los datos (p.e. {dato1:"valor1",dato2:"valor2"}).
dataTypeEspecifica el tipo de datos que esperamos que nos devuelva el servidor después de nuestra petición, estos pueden ser xml, json, script o html.
errorGuarda la referencia a la función que se ejecutará en caso de que haya algún error durante la petición al servidor Web.
completeGuarda la referencia a la función que se ejecutará cuando la petición al servidor haya tenido una respuesta de parte de éste. Esta función puede recibir como parámetro la información devuelta por el servidor como respuesta a nuestra petición.
beforeSendGuarda la referencia a la función que se ejecutará antes de iniciar el proceso de petición a nuestro sevidor Web.
Manos a la obraPara la implementación de la petición asíncrona al servidor utilizaremos la funcionalidad jQuery.ajax que aparece en la documentación, con el código que aparece a continuación:
ajaxJQuery.html<!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>Prueba de AJAX con JQuery</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function peticionAjax() {
var objParametros = creaObjParametros();
$.ajax({url: "http://localhost/validaDatos.php",
type: 'POST',
data: objParametros,
dataType: "html",
beforeSend: function() {
document.getElementById("divRespuesta").innerHTML = "<p>Iniciando nueva petición Ajax...</p>";
},
complete: function(respuesta) {
document.getElementById("divRespuesta").innerHTML += respuesta.responseText;
},
error : function(respuesta) {
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;
}
</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>
Dentro del código javascript existen 2 funciones, la primera,
peticionAjax() lleva a cabo la petición al servidor Web y procesamiento de la respuesta. La segunda,
creaObjParametros() se encarga de recuperar los datos capturados por el usuario en el formulario, y almacenarlos dentro de las propiedades de un objeto que regresa como resultado. En la función para enviar la petición se utiliza la función $.ajax (jQuery.ajax) para realizar todo el proceso, ya que el único parámetro que recibe consiste en un objeto, cuyas propiedades contienen todos los datos para que jQuery, lleve a cabo las acciones de petición al servidor Web y el manejo de la respuesta que éste devuelva.
Cómo ya habíamos señalado la propiedad
url contiene la dirección URL del recurso Web al que estamos accediendo, en este caso el archivo validaDatos.php, que consiste en una aplicación Web escrita en PHP para validar datos de entrada. El código de este programa aparece en el tercer ejemplo que vimos en este blog sobre Ajax, que se titula
Combinando Ajax con PHP. Pueden consultar este artículo para mayor referencia sobre el comportamiento de este programa.
El código aparece a continuación:
validaDatos.php<?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>
Básicamente es un programa que recibe una serie de datos enviados por POST desde nuestro navegador, los valida utilizando expresiones regulares, y dependiendo de si cumplieron o no con estás, imprime un mensaje correspondiente al resultado del proceso.
El resultado final de la implementación se puede probar localmente, almacenado en nuestro servidor Web estos dos archivos, y accediendo con nuestro navegador ajaxJQuery.html:
Y así, con unas pocas líneas podemos adaptar nuestros programas anteriores al framework jQuery, y comprobar como es bastante sencillo de utilizar permite además tener un código mucho más limpio.
Al momento de decidir entre cual framework para Ajax utilizar, deberiamos revisar cada una de las funcionalidades que aparecen en sus respectivas documentaciones, y en base a nuestras necesidades y conocimientos previos elegir el que mejor se nos adapte. Al final, la decisión recaerá unicamente en el desarrollador.
Saludos y hasta la próxima.
Entradas
