Ajax

AJAX » Validar usuario usando AJAX
Marzo 27, 2008 por Víctor Cuervo . 16870 visitas 21 Comentarios  Imprimir
AJAX podemos verlo como un paradigma de programación Web. Resumiéndolo podemos decir que permite la recarga de datos de la página sin necesidad de una recarga total de la misma. No debemos de tomarnos dicho paradigma como la solución a todos nuestros problemas de rendimiento. Sobre todoporque existen ciertos escenarios donde AJAX complica el diseño de una manera desmesurada.
Si bien, en ciertas ocasiones puede ser algo muy útil. Uno de los ejemplos prácticos es la validación de los datos del formulario. Cuando vamos a recuperar información del usuario podemos utilizar JavaScript de una forma muy potente para validar la información introducida. Por ejemplo podemos validar lostamaños del texto introducido, si cumple algún patrón, si son números o fechas validar rangos y límites,...
Pero todo tiene un límite. Y el límite de las validaciones del cliente es cuando queremos validar lógica de negocio. Me explico, podemos pedirle al usuario que tecleé su usuario y querer validar si existe dicho usuario en nuestra base de datos. Sería algo poco sensato el tener descargado enel cliente el listado entero de usuarios para saber si el dato introducido es correcto o no.
Es en estos casos cuando el paradigma AJAX nos da una gran potencia ya que podemos ir de forma asíncrona al servidor de negocio y validar si existe el dato introducido. De tal manera podemos avisar al usuario de forma rápida si su nombre es válido o no.
En este ejemplo vamos a ver cómo usar el paradigmaAJAX para validar si el usuario introducido por pantalla ya le tenemos dado de alta en nuestras bases de datos. Algo muy útil en un formulario de alta de usuarios.
Creando el formulario y la capa oculta
Lo primero que tenemos que hacer es crear la página con el formulario. Tarea simple. ¿Quién no conoce el uso de la etiqueta FORM?
1.  
2. <formname="form1" method="post" action="">
3.  
4. label"><label for="usuario">Usuario:</label>
5. <input type="text" id="usuario">
6. <input type="submit" name="Submit" value="Enviar">
7. <input type="reset" name="Submit2" value="Borrar">
8.</form>
9.  
El comportamiento que vamos a dar a nuestro formulario es que una vez el usuario haya introducido su usuario vayamos a validarlo al servidor. Si el servidor me dice que ya existe el usuario, entonces deberemos de mostrarle al usuario una ventana diciéndole que ya existe el usuario en la base de datos.
Es por ello que necesitamos dos cosas más en nuestrapágina web. La primera es capturar el evento onChange del campo de texto del usuario. Es decir, una vez que el usuario tecleé el usuario y vaya a otro campo realizaremos la validación.
1.  
2. <input type="text" id="usuario" onChange="return autentica();">
En el código que acabamos de poner llamaremos a la función JavaScript autentica() que será la querealice la validación asíncrona.
La segunda necesidad es la de tener una capa, oculta al principio, donde se le diga al usuario que su usuario ya está ocupado. Dicha capa la mostraremos si la respuesta del servidor es que si está ocupado y la ocultaremos nuevamente si la validación da un resultado positivo.
1. span"><span id="error" style="font-family: Verdana, Arial,2. Helvetica, sans-serif; font-size: 12pt;color: #CC3300;
3. position:relative;visibility:hidden;">
4. usuario Ocupado ¡¡¡
5. </span>
Función Autentica
Como hemos indicado en el párrafo anterior, la función autentica() será la que realice la petición asíncrona al servidor.
Dentro de la función lo...