Código fuente Ya.

Puede ejecutar la o las páginas para probar el concepto inmediatamente.

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

El concepto trata sobre:css,php,mysql,dhtml,ajax
Autor:

Retornar

Nombre del archivo:menu.html

Comentarios

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

Comentarios

Creamos la tabla usuarios.

Nombre del archivo:altausuario.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

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

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>

Retornar

Código Fuente Ya - 2015