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";
}
?>