Comprobar si existe un usuario con AJAX

3 COMENTARIOS - Publicado hace 41 meses - Clasificado en: AJAX, TUTORIALES

Esta anotaciÃ³n relata un problema, una tentativa de soluciÃ³n y una soluciÃ³n -aunque seguro que no serÃ¡ la Ãºnica posible-. El post puede ser bastante complejo para aquellos no muy puestos en temas de programaciÃ³n pero creo que puede ser de gran ayuda para aquellos que se hayan encontrado en una situaciÃ³n similar.

PROBLEMA: QuerÃa realizar la comprobaciÃ³n instantanea, a medida que el usuario fuese tecleando su ID, para que Ã©ste no estuviera ya tomado por otro usuario.

TENTATIVA 1: Cree dos funciones javascript ObtDatos y compUsuario. Al evento onkeyup lanzamos la funciÃ³n compUsuario que a su vez llama a ObtDatos para cargar un php externo que comprueba la existencia del usuario. La comprobaciÃ³n lÃ³gica del usuario serÃa a partir de una consulta en la base de datos a la tabla oportuna. En el ejemplo esta parte se obvia puesto que la consulta dependerÃa del diseÃ±o de la tabla en cuestiÃ³n.

AsÃ pues tendrÃamos dos ficheros que podrÃan tener la siguiente estructura.

validar.html

<script language = "javascript">
var peticion = false;
try{
   // Mozilla/Safari
   if (window.XMLHttpRequest)
           peticion = new XMLHttpRequest();
   // IE
   else if (window.ActiveXObject)
           peticion = new ActiveXObject("Microsoft.XMLHTTP");
}
        catch (e) {
                alert(e);
        }
// Error
if(!peticion)
        alert("no se pudo crear"); 
function ObtDatos(url) { 
     if(peticion) {
          peticion.open("GET", url); 
          peticion.onreadystatechange = function(){ 
               if (peticion.readyState == 4 ) {
                    if(peticion.responseText == "NO"){
                    var DivDestino = document.getElementById("DivDestino");
                    DivDestino.innerHTML = "<div id='error'>El nombre de usuario no está disponible.</div>";
                    }
               } 
          } 
peticion.send(null); 
     }
}
function compUsuario(Tecla) {
     Tecla = (Tecla) ? Tecla: window.event;
     input = (Tecla.target) ? Tecla.target : 
     Tecla.srcElement;
     if (Tecla.type == "keyup") {
          var DivDestino = document.getElementById("DivDestino");
          DivDestino.innerHTML = "<div></div>";
          if (input.value) {
               ObtDatos("login.php?q=" + input.value);
          } 
     }
}
</script>
Teclea tu Id de usuario: 
<input id = "textField" type = "text" name = "IdUsuarui" onkeyup = "compUsuario(event)">
<div id = "DivDestino"><div></div></div>
</body>

login.php

<?php 
// En el caso probable de trabajar
//con una base de datos se haria una consulta
//para averiguar si el nombre esta libre o no
if ($_GET["q"] == "juan"){
echo "NO";
}
else {
echo "OK";
} 
?>

Si probamos con este cÃ³digo. Funciona bien en Internet Explorer pero en Firefox 1.5 da un error similar a:

Error: [Exceptionâ¦ âComponent returned failure code: 0Ã80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]â nsresult: â0Ã80040111 (NS_ERROR_NOT_AVAILABLE)â location: âJS frame ...

Parece ser que se trata de un problema que surge al llamar a la funciÃ³n send() en un objeto XMLHttpRequest que todavÃa se encuentra procesando una peticiÃ³n anterior. AsÃ pues se podrÃa solucionar aumentando el tiempo de envio de las peticiones. De hecho si se escribe lentamente el ID en Firefox no aparece el problema. Pero claro no es cuestiÃ³n de pedir al usuario que teclee despacio.

TENTATIVA 2: Para evitar el problema. La Ãºnica soluciÃ³n eficaz ha sido crear una array para crear tantas peticiones como necesitemos, para asÃ evitar utilizar una ya ocupada.

validar.html

<script language = "javascript">
function createRequestObject(){
      var peticion;
      var browser = navigator.appName;
            if(browser == "Microsoft Internet Explorer"){
                  peticion = new ActiveXObject("Microsoft.XMLHTTP");
            }else{
                  peticion = new XMLHttpRequest();
}
return peticion;
}
var http = new Array();
function ObtDatos(url){
      var act = new Date();
      http[act] = createRequestObject();
      http[act].open('get', url);
      http[act].onreadystatechange = function() {
      if (http[act].readyState == 4) {
            if (http[act].status == 200 || http[act].status == 304) {
  		var texto
		texto = http[act].responseText
                    var DivDestino = document.getElementById("DivDestino");
                    DivDestino.innerHTML = "<div id='error'>"+texto+"</div>";                
}
}
}
http[act].send(null);
}
function compUsuario(Tecla) {
     Tecla = (Tecla) ? Tecla: window.event;
     input = (Tecla.target) ? Tecla.target : 
     Tecla.srcElement;
     if (Tecla.type == "keyup") {
          var DivDestino = document.getElementById("DivDestino");
          DivDestino.innerHTML = "<div></div>";
          if (input.value) {
               ObtDatos("login.php?q=" + input.value);
          } 
     }
}
</script>
<p>Teclea tu Id de usuario: 
  <input id = "textField" type = "text" name = "IdUsuarui" onkeyup = "compUsuario(event)">
</p>
<div id = "DivDestino"></div>

login.php

<?php 
// En el caso probable de trabajar
//con una base de datos se haria una consulta
//para averiguar si el nombre esta libre o no
if ($_GET["q"] == "juan"){
echo "El ID se encuentra ocupado";
}
else {
echo "Puedes utilizarlo";
} 
?>

Ver ejemplo en funcionamiento Â» Â»

Algunas entradas relacionadas: