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鈥 鈥淐omponent returned failure code: 0脳80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]鈥 nsresult: 鈥0脳80040111 (NS_ERROR_NOT_AVAILABLE)鈥 location: 鈥淛S 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";
}
?>
