COMPROBAR USUARIO CON AJAX

Muchas veces cuando tenemos una pagina para el registro de Usuarios en nuestra Web, dada la casualidad de que un Usuario, elija el mismo Username de otro, es demasidado fastidioso (Para el cliente) estar escribiendo sus datos..., enviandolos... y esperando "a ver si logra" registrase satisfactoriamente, puesto que despues de todo este proceso de envio de datos al Servidor, el usuario recien sabrá si el Username que eligio estaba disponible;

Para ahorrarnos todo este "menjunje" (Mezcla de aspecto desagradable), les traigo una de muchas soluciones a este problema, en este caso será utilizando AJAX+PHP+MYSQL, la cual quedara masomenos asi:

Utilizaremos el Script Para Recargar Una Pagina con Ajax (Del Post Anterior), para este caso le hemos agregado la funcion "ComprobarUsuario", la cual recibe los mismos parametros (datos,contenedor), pero a diferencia, recoge el Username de la caja de texto para poder comprobar su disponibilidad. Los parametros: datos = URL de la pagina que queremos llamar,en este caso sera "./comprobarUser.php" y Contenedor = Objeto donde queremos que se muestre el estado del Usuario., la funcion ComprobarUsuario quedara asi:

archivo: ajax.js

  function ComprobarUsuario(datos,contenedor){
 divResultado = document.getElementById(contenedor);
 
 username_=document.formUsuario.txt_username.value;
 
 ajax=getXMLHttpRequest();
 ajax.open("POST", datos);
 ajax.onreadystatechange=function(){
 if(ajax.readyState==1)
  {divResultado.innerHTML='Cargando...'}
  else{
   if(ajax.readyState==4)
   {divResultado.innerHTML=ajax.responseText;}
   }
  }
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 
 ajax.send("username="+username_);//enviando los parametros a la pagina "datos";
}
 

Y la funcion para crear el objeto XMLHttpRequest en el mismo archivo:

archivo: ajax.js

  function getXMLHttpRequest(){
 var xmlhttp=false;
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
   }
 }

 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}
 

Por Parte del Servidor tenemos el archivo "comprobarUsuario.php" el que se encargara de ir a la base de Datos y comprobar si el username enviado esta disponible o no, este archivo recibe el parametro POST "username", con el (Valga la redundancia) Username en cuestion... y lo que hace es Imprimir en pantalla "Username Disponible" o "Username Ocupado" segun sea el caso; El "comprobarUsuario.php" es el siguiente:

archivo: comprobarUsuario.php

 
$hostname_conn = "localhost";
$database_conn = "user";
$username_conn = "root";
$password_conn = "root";
$conn = mysql_pconnect($hostname_conn, $username_conn, $password_conn) or trigger_error(mysql_error(),E_USER_ERROR);

$colname_rs_user = "-1";
if (isset($_POST['username'])) {
 $colname_rs_user = $_POST['username'];
}
mysql_select_db($database_conn, $conn);
$query_rs_user = sprintf("SELECT * FROM usuario WHERE username = '%s'",$colname_rs_user);
$rs_user = mysql_query($query_rs_user, $conn) or die(mysql_error());
$row_rs_user = mysql_fetch_assoc($rs_user);
$totalRows_rs_user = mysql_num_rows($rs_user);
if($totalRows_rs_user == 0)
{
 echo '
Username Disponible';
}
else{
 echo '
Username Ocupado';
}
mysql_free_result($rs_user);  

Debemos poner un DIV cerca del formulario donde mostrar el mensaje de estado del Username Ocupado o Disponible

archivo: index.php

El proceso iniciara en el index.php desde el formulario:

archivo: index.php

REGISTRO DE USUARIO

  

 

  
      
        
Username:
        

       
      
      
        
Nombre:
        
      
      
        
Password:
        
      
    
   

     
     
 

Al pinchar en el boton "Disponible?"

estamos llamando a la funcion "comprobarUsuario(datos,contenedor)", la cual recoge el username a comprobar desde el campo de texto que le indiquemos en el codigo:

username_=document.formUsuario.txt_username.value;

Se envian los parametros :

ajax.send("username="+username_);//enviando los parametros 

y finalmente Mostramos el Resultado cuando el Servidor halla dado una respuesta:

 if(ajax.readyState==1)
   {divResultado.innerHTML='Cargando...' //Mostramos "Cargando..." mientras no hay respuesta del Servidor
   }
  else{
   if(ajax.readyState==4)
    {divResultado.innerHTML=ajax.responseText; //Se muestran los resultados en el divResultado
    }
   }
  }

finalmente al comprobar usuario nos mostrara Username Disponible o Username Ocupado:

VER EJEMPLO FUNCIONANDO:

Ver Ejemplo

DESACARGAR EJEMPLO:

Ejemplo-Comprobacion-Usuario