Validar usuario usando AJAX

27/mar/2008 AJAX , , 28 Comentarios
ajax

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 todo porque 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 los tamañ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 en el 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 paradigma AJAX 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. <form name="form1" method="post" action="">
  2.  
  3. <label for="usuario">Usuario:</label>
  4. <input type="text" id="usuario">
  5.  
  6. <input type="submit" name="Submit" value="Enviar">
  7. <input type="reset" name="Submit2" value="Borrar">
  8.  
  9. </form>

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 nuestra pá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. <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 que realice 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 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 que haremos serán tres cosas:

  1. Recuperar el valor del usuario introducido por el usuario.
  2. Montar la url del servidor donde el valor del usuario irá como parámetro.
  3. Llamar a la función leer_doc(url) que es la que se encarga únicamente de realizar la petición a la URL indicada como parámetro.
  1. function autentica(){
  2. usuario = document.getElementById("usuario").value;
  3. url = "/samples/existeusuario.php?usuario=" + usuario;
  4. leer_doc(url);
  5. }

Petición XMLHttpRequest

Para realizar la llamada al servidor vamos a crear una variable request que será la que en toda la vida del programa JavaScript mantenga la referencia a la petición.

  1. var req;

Dicha variable será la que dentro de la función leer_doc(url) realice la conexión mediante el objeto XMLHttpRequest.

El objeto XMLHttpRequest tiene dos formas de llamarse dependiendo del navegador en el que nos encontremos (que raro). Si existe el objeto como objeto del navegador bastará con realizar un new sobre el mismo, sino tendremos que instanciarlo como un ActiveX para los navegadores Internet Explorer (versiones 5 y 6). Quedándonos el siguiente código:

  1. if (window.XMLHttpRequest) {
  2. req = new XMLHttpRequest();
  3. } else if (window.ActiveXObject) {
  4. req = new ActiveXObject("Microsoft.XMLHTTP");
  5. }

XMLHttpRequest y Callback

El objeto XMLHttpRequest se maneja mediante callbacks. ¿Qué quiere decir esto? Que la respuesta del objeto será manipulada por la función que le indiquemos. Para ello tendremos que informar a la variable .onreadystatechange

En nuestro caso será la función procesarRespuesta la que analice la respuesta.

Lo que nos quedará será el realizar la petición a la URL previamente montada. Para ello utilizamos el método .open

  1. if(req){
  2. req.onreadystatechange = procesarRespuesta;
  3. req.open('GET', url, true);
  4. req.send(null);
  5. }

Analizando la respuesta: parsear el XML

Una vez retornada la respuesta por el servidor los datos adjuntos a la misma irán a parar a nuestra función de callback procesarRespuesta().

En este caso, y como veremos en un momento, los datos devueltos por el servidor vienen en formato XML. Los datos los recuperaremos del atributo .responseXML del objeto XMLHttpRequest.

Como la respuesta viene en XML deberemos utilizar funciones del DOM para poder ver que valores tienen y actuar en consecuencia. En este caso la función .getElementsByTagName("tag").

Dentro del XML devuelto viene la etiqueta <existe> que tendrá un valor de "true" si el usuario enviado ya existe y un valor de "false" si el valor enviado no existe en la base de datos.

A si que en caso afirmativo pondremos la capa de error de la página a visible (el usuario existe) o la ocultaremos (si el usuario no existe)

  1. function procesarRespuesta(){
  2.  
  3. respuesta = req.responseXML;
  4.  
  5. var existe = respuesta.getElementsByTagName('existe')
  6. .item(0).firstChild.data;
  7.  
  8. if (existe=="true")
  9. document.getElementById("error").style.visibility = "visible";
  10. else
  11. document.getElementById("error").style.visibility = "hidden";
  12. }

Página PHP, ¿Nuestro WebService?

En esto del AJAX pasa a ser algo de vital importancia el uso de servicios web, ya sean WebServices, páginas con script de servidor, CGI o similares.

En nuestro ejemplo la llamada se hace a la http://lineadecodigo.com/samples/existeusuario.php?usuario=miusuario

Es decir, que estamos usando una página PHP.

Dicha página PHP es muy sencilla, y aunque lo suyo sería que fuese a una base de datos, lo que he hecho ha sido devolver un XML estático. Dicho XML solo varía cuando se meta un usuario en concreto ("victor").

  1. <?php
  2.  
  3. $usuario = $_GET["usuario"];
  4.  
  5. header('Content-type: text/xml');
  6.  
  7. if ($usuario != "victor") {
  8. echo("<existe>true</existe>");
  9. } else {
  10. echo("<existe>false</existe>");
  11. }
  12.  
  13. ?>

Ahora que podemos complicar este código cuanto queramos. Acceder a una base de datos,...

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

28 comentarios en “Validar usuario usando AJAX”

Víctor Cuervo

Leandro

Se puede omitir la parte del boton Confirmar, para que me vaya diciendo si esta disponible al ir escribiendo el campo. Yo probe poner en el input onkeypress=nuevoEvento(‘this’), el problema es que lo hace tan rapido que no queda nada en pantalla. Gracias

Víctor Cuervo

Dilakv

¿Cual es el usuario que si está dado de alta?

Víctor Cuervo

Víctor Cuervo

@tecmobeto,

Cierto, tenemos pendiente el terminarlo añadiendo la parte del servidor. :-D

Víctor Cuervo

tecmobeto

Gracias mi hermano, me sirvio mucho, lo andaba buscando y diste en el clavo, podemos validar el usuario, pero puedes ampliarlo mas

Saludos desde mexico

Víctor Cuervo

devilsito

La verdad es que está distribuido en forma desordenada. Si uno cota y pega para analizar su funcionamiento,..! NO FUNCIONA.
! No queda claro que es lo que va dentro de donde van las etiquetas y

Y por ultimo al probar el boton “visualizar el ejemplo” realmente no se sabe que hace.
Intentó ser un aporte, pero para los que comenzamos, no lo es.

Víctor Cuervo

Víctor Cuervo

@María,

Pon el código en el foro de AJAX para poder revisarlo.
http://www.dudasprogramacion.com/forum/asynchronous-javascript-and-xml-ajax

Saludos.

Víctor Cuervo

Maria

Muy bueno, gracias por el codigo…me corrio a la primera, pero cuando le añadi una consulta, no me mostro nada.
Solo con poner la cabecera de conexion a la base de datos, no me sale nada.Por favor si alguien pudiera ayudarme y darme una manito, se los agradeceria eternamente.

Víctor Cuervo

nestor

si miera me refiero a bambiar el codigo para realizar el proceso, cambie un poco el codigo mira no se en que estoy fallando: aqui esta el codigo completo.

funcion javascript

var req;
var respuesta;

function autentica(){

cod = document.getElementById(“id”).value;
emp = document.getElementById(“empres”);
url = “/proyecto/existeusuario.php?cod=” + cod +”&emp=” + emp;
leer_doc(url);
}

function leer_doc(url){
req = false;
// Llama objeto XMLHttpRequest
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
if (req.overrideMimeType) {
req.overrideMimeType(‘text/xml’);
}
// Si no funciona intenta utiliar el objeto IE/Windows ActiveX
}else if (window.ActiveXObject) {
req = new ActiveXObject(“Microsoft.XMLHTTP”);
}

if(req!=null){
req.onreadystatechange = procesarRespuesta;
req.open(‘GET’, url, true);
req.send(null);
}
}

function procesarRespuesta(){
respuesta = req.responseXML;
var existe = respuesta.getElementsByTagName(‘existe’).item(0).firstChild.data;
if (existe==”true”)
document.getElementById(“error”).style.visibility = “visible”;
else
document.getElementById(“error”).style.visibility = “hidden”;
}

codigo php

<?php

include("conec.php");
$cod = $_GET["cod"];
$emp =$_GET["emp"];

$sql="SELECT idmtto, empresa FROM mttos WHERE idmtto ='$cod' AND empresa ='$emp' ";
$res=mysql_query($sql,$conexion);
$tot=mysql_num_rows($res);
header('Content-type: text/xml');
if ($tot == 1) {
echo("true”);
}else {
echo(“false”);
}

?>

y al ingresar en el exiteusuario.php me sale el siguiente error:

Error de lectura XML: contenido incorrecto tras un elemento XML del documento
Ubicación: http://localhost/proyecto/existeusuario.php
Número de línea 2, columna 1:
^

Víctor Cuervo

Robyir Loreto

Listo..ya resolví lo de los combos…lo hice modo “caiman” …cargué en el div la página que contiene al formulario que contiene los combos estados y municipios…y el combo municipios lo hice en un archivo .php y lo que hago es llamarlo en el evento onchange del combo estados….eso lo hacen en muchos sitios y no tiene problemas de compatibilidad de ningún tipo con mozilla y con Internet Explorer …bueno..al menos en esos dos es que lo he probado pero funciona ar’ peluche ;-)

Víctor Cuervo

lineadecodigo

@nestor,

Preguntas por el código PHP o por cómo modificar el código AJAX para llamar a un PHP de si existe dato?

Víctor Cuervo

nestor

oye como puedo ocupar tu codigo con una consulta en php para checar si un dato ya existe porfa ayudame

Víctor Cuervo

Robyir Loreto

Hola a todos..tengo un problema que casi todo el mundo tiene…me acabo de topar con la siguiente situación:

necesito cargar en un div una página que contiene 2 combos..el primer combo es el comboEstados y el otro combo es comboMunicipios…el segundo combo se carga segun la opción que se seleccione en el primero….es el típico problema de que no se puede ejecutar javascript al ser cargado con ajax… dicen que con prototype no hay ese problema pero lo usé y sigue casi igual

Víctor Cuervo

lineadecodigo

@Manuel,

Me alegra mucho que te haya servido. :-D

Víctor Cuervo

Manuel

Hola ya encontre el problema “estaba usando la misma variable de como registro de validacion de inicio de sesion” muchas gracias por el codigo en vdd es lo mejor que he encontrado.

Víctor Cuervo

Manuel

Hola esta super bien, Pero tengo un problema en firefox funciono bien pero al ejecutarlo sobre internet explorer no funciono bien, puede ser el problema de que la pagina principal la monte no como HTML si no como PHP.

Víctor Cuervo

cosme

Hola soy novato la verdad no se nada de ajax y me gustaria aprender, por lo mismo no se como hacer funcionar este codigo, me parece super bueno, pero no se como, ya lo descargue y abri el html pero no sirve, ay algo que me falte?? tal vez algo muy basico?? ayuda!! gracias.

Víctor Cuervo

ogm

ok

Víctor Cuervo

ogm

prueba

Víctor Cuervo

lineadecodigo

@Ivan,

Lo he probado en un Internet Explorer 8 y funciona correctamente. ¿Qué versión de Internet Explorer estás utilizando?

Víctor Cuervo

Ivan

Hola !! como estan, tengo un problema, el codigo me funciona bien en todos los navegadores menos en el IE de Microsoft y es en el que lo necesito jeje :s.. Les agradesxco

Víctor Cuervo

Cobain

necesito Implementar AJaX con código PHP para realizar validación de usuario, búsqueda de clientes y
productos sin utilizar botón submit y en tiempo real.Muchas grasias me serviria mucho su ayuda………

Víctor Cuervo

lineadecodigo

@Alberto, en el ejemplo se está utilizando un input de tipo submit. Este no deja realizar acciones sobre el envío del formulario.

Si quieres controlar el envío del formulario puedes utilizar un campo button y mediante el evento onClick controlar la validez del formulario y realizar el envío de dicho formulario si este es correcto.

De todas maneras, intentaré incluir un artículo que explique como controlar el envío de formularios.

Víctor Cuervo

Alberto

Hola, gracias por el manual. Tengo una duda, ¿qué hay que hacer evitar enviar la información del formulario si esta no es correcta?

Saludos

Víctor Cuervo

Felix

Pilas para la gente que guste de saber mas sobre esto les dejo un articulo muy interesante, es una publicación sobre AJAX ahi les dejo el link:

http://visid.espol.edu.ec/index.php?option=com_ams&act=publications&task=none&id=29

Víctor Cuervo

abel

porfavor potria ayudarme como puedo trabajar con las funciones
function autentica(){ usuario = document.getElementById(“usuario”).value; url = “/samples/existeusuario.php?usuario=” + usuario; leer_doc(url);} como y donde inserto
para que pueda ejecutarse este ejercio
M… Dreamweaver 8

Víctor Cuervo

luisimnho

t pasast men es recontra util ojala hayan + ejemplos…

Víctor Cuervo

nicolas

exelente explicación, muchas gracias, no entendia nada de ajax ahora comprendo su funcionamiento

Víctor Cuervo

gelbert

esta muy bueno el manual brou

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*