Javascript y AJAX fáciles con Prototype

Prototype_logo

Cada día se utiliza más Javascript para programar webs desde la revolución de la Web 2.0 y AJAX pero todos sabemos que no es un lenguaje precisamente agradable de utilizar. La principal dificultad de Javascript consiste en la compatibilidad entre navegadores. Lo que funciona en Internet Explorer no tiene por qué funcionar con Firefox o en Opera. Y no sólo hay que mirar la compatibilidad enre navegadores sino que debemos tener presente que puede no ser compatible entre versiones de un mismo navegador. Si a todo esto le sumamos que los navegadores no suelen llevar buenos depuradores para encontrar errores de código tenemos un lenguage que puede provocar muchos dolores de cabeza peleándonos con cosas como el getElementById().

La librería Prototype es una librería de utilidades para Javascript orientada a objetos que te ahorra escribir gran parte del código gracias a sus atajos. Como gran ventaja tenemos que el código es completamente compatible con todos los navegadores. Incluso incluye funciones para AJAX.

Antes de empezar a trabajar con esta librería os recomendaría instalar el navegador Firefox y su plugin Firebug que es un depurador muy potente para javascript. Aunque utilicemos Prototype seguro que algún error cometeremos de vez en cuando.

A continuación os muestro un breve resumen de sus características y finalmente unos ejemplos prácticos.

El comodín “$(‘id’)”:
Nos permite acceder a cualquier objeto del documento mediante su id. Así nos podemos ir olvidando de escribir el document.getElementById(‘id’) o el document.all(‘id’)… Si tenemos un <DIV id="mensaje"></DIV> simplemente haciendo $(‘mensaje’).update(“Hola mundo”); cambiamos el valor de su innerHTML.

El comodín “$$(‘tag’)”:
Sirve para sustituir a la función getElementsByTagName() deveolviendo todos los objetos con el nombre de etiqueta especificado. Por ejemplo, $$(‘div’) devuelve todos los objetos <div> del documento.

El comodín “$$(‘style’)”:
Sirve para obtener todos los objetos que tengan el estilo especificado. Por ejemplo, $$(‘.grande’) devuelve todos los objetos que tengan la clase llamada ‘grande’ en el documento.

El comodín “$F(‘campo’)”:
Este es posiblemente el más útil de todos y sirve para obtener el valor de un campo de un formulario del documento. Sería el equivalente a hacer ‘document.form.campo.value’. Nos devuelve también el valor seleccionado por selects, checkboxes y radiobuttons de manera directa sin ningún esfuerzo. Si el select es múltiple devuelve un array con los valores seleccionados.

Además incluye una colección de modulos para manipulación de strings, fechas, formularios, arrays, eventos e incluso AJAX. Es de esas librerías que una vez las pruebas ya no dejas de utilizarlas.

A continuación unos simples ejemplos:

1. Manipulación de formularios:

<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script language="javascript">
function validaFormulario(){
var mensaje = "Nombre:" + $F(‘nombre’) + "<br />";
mensaje += "Edad:" + $F(‘edad’) + "<br />";
mensaje += "Sexo:" + $F(‘sexo’) + "<br />";
mensaje += "Sistema operativo:" + $F(‘sistema’) + "<br />";
$(‘info’).update(mensaje);

return false;
}

function validaFormulario2(){
//averiguar el radioinput seleccionado
var socioSexo = document.socio.sexo[0].value;
for (var i=0; i<document.socio.sexo.lenght; i++){
if (document.socio.sexo[i].checked == true){
socioSexo = document.socio.sexo[i].value;
}
}

//averiguar el option seleccionado del select
var indiceSistema = document.socio.sistema.selectedIndex;
var socioSistema = document.socio.sistema.options[indiceSistema].value;

var mensaje = "Nombre:" + document.socio.nombre.value + "<br />";
mensaje += "Edad:" + document.socio.edad.value + "<br />";
mensaje += "Sexo:" + socioSexo + "<br />";
mensaje += "Sistema operativo:" + socioSistema + "<br />";

document.getElementById(‘info’).innerHTML = mensaje;

return false;
}
</script>
</head>
<body>
<form id="socio" name="socio" onsubmit="return validaFormulario()" action="javascript: void(null)">
<table>
<tr><td>Nombre: </td><td><input type="text" id="nombre" /></td></tr>
<tr><td>Edad: </td><td><input type="text" id="edad" /></td></tr>
<tr><td>Sexo: </td><td><input type="radio" id="sexo" value="varon" /> V <input type="radio" id="sexo" value="mujer" /> M</td></tr>
<tr><td>Sistema operativo: </td>
<td>
<select id="sistema">
<option value="Windows">Windows</option>
<option value="Linux">Linux</option>
<option value="BSD">BSD</option>
</select>
</td>
</tr>
<tr><td></td><td><input type="submit" value="Resultado" /></td></tr>
<tr><td></td><td><div id="info" style="background-color:orange; color:white;"></div></td></tr>
</table>
</form>
</body>
</html>

En este ejemplo accedemos al valor de los elementos de un formulario que contiene un select y un radiogroup.
En primer lugar hay que importar la librería prototype de donde sea que la tenemos almacenada en el servidor.
A cada elemento del formulario hay que asignarle un valor de id para acceder a ellos.
He puesto dos funciones de ejemplo que hacen exactamente lo mismo. La primera es utilizando Prototype, mientras que la segunda es javascript convencional. Se pued observar que la primera versión es mucho más corta y legible mientras que la segunda es un “chorizo” de código en el que se ve todo el código necesario para algo tan simple como obtener el valor seleccionado de un radiogroup. Hay que tener en cuenta que este era un formulario muy breve y que podía haber sido mucho peor.

2. Un ejemplo de AJAX con prototype:

2.a) El formulario principal “ajax1.php”:

<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script language="javascript">
function validaUser(){
//validacion de campos
var valid = true;
if ($F(‘user’).empty()){
$(‘userError’).update(‘Escribe usuario’);
valid = false;
}
else{
$(‘userError’).update();
}

if ($F(‘pass’).empty()){
$(‘passwordError’).update(‘Escribe password’);
valid = false;
}
else{
$(‘passwordError’).update();
}

if (!valid){
$(‘info’).update();
return false;
}

//consulta ajax
var destino = ‘ajax2.php’;
var query = $(‘login_form’).serialize();
new Ajax.Request(destino,
{
method:’get’,
parameters: query,
onSuccess: function(transport){
var response = transport.responseText || "no hay respuesta";
$(‘info’).update(response);
},
onFailure: function(){
$(‘info’).update(‘Ha ocurrido un error’);
}
});
return false;
}
</script>
<style type="text/css">
.error{
color:red;
}
.mensaje{
background-color:green;
color:white;
text-align:center;
font-weight:bold;
}
</style>
</head>

<body>
<form id="login_form" name="login_form" method="post" enctype="multipart/form-data" action="javascript: void(null)" onsubmit="return validaUser()";>
<table>
<tr><td>User: </td><td><input type="text" id="user" name="user" value="" /><div id="userError" class="error"></div></td></tr>
<tr><td>Password: </td><td><input type="text" id="pass" name="pass" value="" /><div id="passwordError" class="error"></div></td></tr>
<tr><td></td><td><input type="submit" value="Entrar" /></td></tr>
<tr><td></td><td><div id="info" name="info" class="mensaje"></div></td></tr>
</table>
</form>
</body>
</html>

Creamos un formulario de login que pide usuario y contraseña al que le añadimos un botón de submit.
Creamos también una función que procesa el formulario. En primer lugar valida que los campos no estén vacíos mediante el método $F(‘campo’).emtpy(). Si el campo está vacío se muestra un mensaje de advertencia en el <div> que tiene cada campo a su lado.

Si los campos son válidos se hace la llamada Ajax mediante Ajax.Request(url,{method:,parameters:,onSuccess:, onFailure:}). Para obtener los valores del formulario simplemente hacemos $(‘login_form’).serialize(); que nos devuelve la cadena tipo get de los campos del formulario tal como serían enviados si pulsamos el botón de enviar. En este caso nos devolvería “user=s3v&pass=s3v”.

Para procesar la respuesta enviada por el servidor a nuestra petición necesitamos definir la función onSuccess en la función Ajax.Request(). Vemos que se devuelve un objeto llamado transport y mediante su método responseText() obtenemos el texto de la respuesta que mostramos en el <div id="info">.

2.b) El script que responde “ajax2.php”:

<?php
validar();

function consultaDB($user, $pass){
//simulamos la busqueda en una base de datos…
$userValido = "s3v";
$passValido = "s3v";

if (strcmp($user,$userValido) == 0 && strcmp($pass,$passValido) == 0){
return true;
}else{
return false;
}
}

function validar(){
//recoger variables
$user = addslashes(trim($_REQUEST[‘user’]));
$pass = addslashes(trim($_REQUEST[‘pass’]));

$res = consultaDB($user, $pass);

if (!$res){
echo "El usuario no se encuentra en la base de datos";
}else{
echo "Bienvenido a S3V";
}
}
?>

Login fallido

En este script se reciben los argumentos enviados por el formulario y se simula una consulta a una base de datos que en este caso no he incluido para hacer el ejemplo más sencillo. Si el usuario escribe usuario=”s3v” y password=”s3v” en el login, se devolverá un mensaje de bienvenida, en caso contrario, se mostrará una advertencia. Normalmente en estos casos se devuelve un mensaje en formato XML pero lo que yo quiero mostrar aquí es el mecanismo básico de funcionamiento para que cada lo aplique a su manera.

Login OK

Descargar ejemplos

Sin categoría

Deja una respuesta