Infoudo: Validación de la existencia de un nombre de usuario en forma asincrónica (AJAX)

El objetivo de este concepto es validar en forma asincrónica (mediante ajax) la existencia o no de un
nombre de usuario en el servidor. Esto ayuda a no tener que refrescar la página para verificar si el
nombre de usuario elegido está o no disponible.

Nombre del archivo:creartabla.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<?php
$conexion=mysql_connect("localhost","pepe","123456") or
    die("Problemas en la conexion");
mysql_select_db("codigofuenteya",$conexion) or
    die("Problemas en la selección de la base de datos");

$registros=mysql_query("drop table if exists usuarios",$conexion) or
die("Problemas en el select:".mysql_error());

mysql_query("create table usuarios (
                            nombre varchar(40) primary key,
                            clave varchar(20)
                         )",$conexion) or
die("Problemas :".mysql_error());

mysql_close($conexion);
?>
<p>Se creó la tabla -
<a href="menu.html">Retornar</a></p>
</body>
</html>

Comentarios

Creamos la tabla usuarios.

Nombre del archivo:altausuario.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<form action="altausuario.php" method="post">
<fieldset id="formulario1">
<legend>Registro de nuevo usuario</legend>
<p><label for="nombre">Ingrese nombre de usuario:</label>
<input type="text" name="nombre" id="nombre" size="40">
<span id="resultados"></span> </p>
<p><label for="clave1">Ingrese clave:</label>
<input type="password" name="clave1" size="20"></p>
<p><label for="clave2">Repita su clave:</label>
<input type="password" name="clave2" size="20"></p>
<p><input type="submit" value="Confirmar"></p>
</fieldset>
</form>
</body>
</html>

Comentarios

Importamos el archivo que tiene las funciones JavaScript:
<script type="text/javascript" src="funciones.js"></script>
Disponemos un elemento span vacío donde se mostrará si está o no disponible el nombre de usuario
seleccionado por el visitante:
<p><label for="nombre">Ingrese nombre de usuario:</label>
<input type="text" name="nombre" id="nombre" size="40">
  <span id="resultados"></span> </p>

Nombre del archivo:estilos.css

input {
padding:3px;
}
fieldset {
width: 800px;
font-family:arial;
font-weight:bold;
padding:10px;
}
#formulario1 label {
float:left;
width:250px;
background:#ddd;
text-align:right;
margin-right:.5em;
padding:.25em;
}
#formulario1 p {
font-size:16px;
font-weight:normal;
}

Nombre del archivo:funciones.js

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
var ref=document.getElementById('nombre');
addEvent(ref,'blur',enviarNombre,false);
}

var conexion1;
function enviarNombre()
{
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open('POST','verificarnombre.php', true);
conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
conexion1.send(retornarDatos());
}

function retornarDatos()
{
var cad='';
var nom=document.getElementById('nombre').value;
cad='nombre='+encodeURIComponent(nom);
return cad;
}

function procesarEventos()
{
var resultados = document.getElementById("resultados");
if(conexion1.readyState == 4)
{
    resultados.innerHTML = conexion1.responseText;
    if (conexion1.responseText=='Nombre no disponible')
    resultados.style.backgroundColor='#f00';
    else
    resultados.style.backgroundColor='#ff0';

}
else
{
    resultados.innerHTML = 'Procesando...';
}
}

//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
}
else
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
    if (window.XMLHttpRequest)
      xmlHttp = new XMLHttpRequest();
return xmlHttp;
}

Comentarios

Inmediatamente luego que se cargó por completo la página se ejecuta la función addEvent:
addEvent(window,'load',inicializarEventos,false);

La función inicializarEventos obtiene la referencia del elemento input donde se carga el nombre y
registra el evento blur (se dispara cuando pierde el foco el control):
function inicializarEventos()
{
  var ref=document.getElementById('nombre');
  addEvent(ref,'blur',enviarNombre,false);
}

La función enviarNombre se ejecuta cuando pierde el foco el control donde el visitante ingresa
el nombre de usuario seleccionado, en este momento creamos un objeto XMLHttpRequest y pasamos
mediante el método POS el nombre de usuario que acaba de ingresar:
var conexion1;
function enviarNombre() 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('POST','verificarnombre.php', true);
  conexion1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  conexion1.send(retornarDatos());  
}

Por último la función procesarEventos actualiza el control span con el resultado
devuelto por el servidor:
function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    resultados.innerHTML = conexion1.responseText;
	if (conexion1.responseText=='Nombre no disponible')
	  resultados.style.backgroundColor='#f00';
	else
	  resultados.style.backgroundColor='#ff0';

  } 
  else 
  {
    resultados.innerHTML = 'Procesando...';
  }
}

Nombre del archivo:verificarnombre.php

<?php
header('Content-Type: text/html; charset=ISO-8859-1');

$conexion=mysql_connect("localhost","pepe","123456") or
    die("Problemas en la conexion");
mysql_select_db("codigofuenteya",$conexion) or
    die("Problemas en la selección de la base de datos");
$registro=mysql_query("select nombre from usuarios where nombre='$_REQUEST[nombre]'",$conexion) or
die("Error:".mysql_error());
if (mysql_fetch_array($registro))
   echo 'Nombre no disponible';
else
   echo 'Nombre disponible';
mysql_close($conexion);
?>

Comentarios

Devuelve un string: 
'Nombre no disponible' o 'Nombre disponible'

Nombre del archivo:altausuario.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<?php

$conexion=mysql_connect("localhost","pepe","123456") or
    die("Problemas en la conexion");
mysql_select_db("codigofuenteya",$conexion) or
    die("Problemas en la selección de la base de datos");

$registro=mysql_query("select nombre from usuarios where nombre='$_REQUEST[nombre]'", $conexion)
         or die("Error:".mysql_error());
if ($reg=mysql_fetch_array($registro))
{
echo "nombre existente";
}
else
{
if ($_REQUEST['clave1']==$_REQUEST['clave2'] & strlen($_REQUEST['clave1'])>0)
{
    mysql_query("insert into usuarios(nombre,clave) values
       ('$_REQUEST[nombre]','$_REQUEST[clave1]')", $conexion)
         or die("Error:".mysql_error());
    echo "Datos registrados";
}
else
    echo "Datos incorrectos";
}
mysql_close($conexion);
?>
<a href="menu.html">Retornar</a>

</body></html>

Validación de la existencia de un nombre de usuario en forma asincrónica (AJAX)

COMPÁRTELO:

Síguenos por RSS

Síguenos en las redes sociales


Ir al contenido Ir a la navegación Ir al buscador

English Directorio WAP para móvil, Tablet, iPhone o Smartphone Centro de Noticias de la Universidad de Oriente Categorías