<!--
Este código fuente es de libre utilización y modificación bajo la siguiente licencia:
http://creativecommons.org/licenses/by-nc-sa/2.5/
Puedes distribuir estos scripts o colocarlos en tu Sitio siempre y cuando no elimines estos
comentarios y la licencia expuesta sea respetada.
Mas ejemplos y material sobre AJAX en:
http://www.formatoweb.com.ar/ajax
Cualquier sugerencia, crítica o comentario son bienvenidos.
Contacto:
[email protected]
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">
function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); }
return xmlhttp;
}
function eliminaEspacios(cadena)
{
// Funcion para eliminar espacios delante y detras de cada cadena
while(cadena.charAt(cadena.length-1)==" ") cadena=cadena.substr(0, cadena.length-1);
while(cadena.charAt(0)==" ") cadena=cadena.substr(1, cadena.length-1);
return cadena;
}
function validaIngreso(valor)
{
/* Funcion encargada de validar lo ingresado por el usuario. Se devuelve TRUE en caso de ser
valido, FALSE en caso contrario */
var reg=/(^[a-zA-Z0-9.@ ]{4,40}$)/;
if(reg.test(valor)) return true;
else return false;
}
function nuevoEvento(evento)
{
var divMensaje=document.getElementById("mensaje");
/* Dependiendo de cual sea el evento que ejecuto esta funcion (ingreso o verificacion) se setean
distintas variables */
if(evento=="ingreso")
{
var input=document.getElementById("ingreso");
var boton=document.getElementById("boton_1");
var valor=input.value;
var accion="Ingresando...";
}
else
{
var input=document.getElementById("verificacion");
var boton=document.getElementById("boton_2");
var valor=input.value;
var accion="Comprobando...";
}
// Elimino espacios por delante y detras de lo ingresado por el usuario
valor=eliminaEspacios(valor);
// Si el ingreso es invalido...
if(!validaIngreso(valor))
{
divMensaje.innerHTML="El texto ingresado contiene caracteres o longitud inválida";
}
else
{
// Deshabilito inputs y botones para evitar dobles ingresos
boton.disabled=true; input.disabled=true;
input.value=accion;
var ajax=nuevoAjax();
ajax.open("POST", "comprobar_disponibilidad_de_apodo_proceso.php ", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(evento+"="+valor);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
// Habilito nuevamente botones e inputs
input.value="";
boton.disabled=false; input.disabled=false;
// Muestro el mensaje enviado desde el servidor
divMensaje.innerHTML=ajax.responseText;
}
}
}
}
</script>
<style type="text/css">
.boton
{
height:16px;
width:58px;
font-size:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.inputs
{
width:130px;
height:12px;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.aviso
{
text-align:center;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#FFFFFF; color:#FF0000;
}
.punteado
{
border-style:dotted;
border-color:#000000;
background-color:#EAEAEA;
font-family:Verdana;
font-size:10px;
text-align:center;
}
</style>
</head>
<body>
<center>
<table border="1" width="550" style="border-style:none;">
<tr>
<td id="fila_1" class="punteado" style="width:50%">
<input type="text" id="ingreso" class="inputs">
<input id="boton_1" onclick="nuevoEvento('ingreso');" type="button" value="Ingresar" class="boton">
</td>
<td id="fila_2" class="punteado" style="width:50%;">
<input type="text" id="verificacion" class="inputs">
<input id="boton_2" onclick="nuevoEvento('verificacion');" type="button" value="Comprobar" class="boton">
</td>
</tr>
</table>
<div class="aviso" id="mensaje"></div>
</center>
</body>
</html>