Problema app ajax

[osvaldo1herrera]

HOLA, mi problema es simple: tengo una sencilla app AJAX que comprueba si el nombre de usuario y la contrasena ingresados son correctos, la situacion es que quiero que mientras lo comprueba, salga un gif que indique que esta cargando, y desaparezca el boton del formulario, y lo que pasa es que despues de que cargo y mostro la respuesta del servidor es cuando se desactiva el boton y aparece el gif, quisiera saber que estoy haciendo mal? PAra alcanzar a ver el retraso uso la funcion php sleep() y por cierto, otro problema es que al ejecutar una vez la funcion ya no me deja volver a hacerlo... o sea si ya me salio error ya no me deja inicair sesion con los datos correctos MUCHAS GRACIAS!!

el codigo:

Código:

function login(form)
{
	http = new XMLHttpRequest();
	login_engineer = "login.php";
	message_field = document.getElementById("message_field");
	
	user = encodeURIComponent(form.user.value);	
	password = encodeURIComponent(form.password.value);
	if(user && password)
	{
		if(http)
		{
			random_num = parseInt(Math.random()*99999999999999999);
			data = "user=" + user + "&password=" + password + "&random=" + random_num;
			
			http.open("POST", login_engineer, true);
			http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			http.onreadystatechange = manage_response;
			http.send(data);
		}
		else
		{
			alert("Ha ocurrido un error en el sistema intenta de nuevo mas tarde.");
		}
	}
	else
	{
		message_field.className = "message_error";
		message_field.style.visibility = "visible";
		message_field.innerHTML = "<p>No has indicado los datos necesarios.</p>";
	}
		
}

function manage_response()
{
	if(http.readyState == 4)
	{
		if(http.status == 200)
		{
			response();	
		}
		else
		{
			loading_field = document.getElementById("cargando");
			loading_field.innerHTML = http.statusText;
		}
	}
	else
	{
                loading_field = document.getElementById("cargando");
		loading_field.innerHTML = "<img src='loading.gif' width=20 height=20>";
		
	}
}

function response()
{
	response = http.responseXML;
	result = response.getElementsByTagName("result")[0].firstChild.data;
	message = response.getElementsByTagName("message")[0].firstChild.data;
	
	
	message_field.className = (result != "1") ? "message_error" : "message_ok"; 
	message_field.style.visibility = "visible";
	message_field.innerHTML = message;
	
}

Código:

<script language="javascript" type="text/javascript" src="fns.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<?
function formulario()
{

echo
"<form action='login.php' method='post'>
	<input type='text' name='user' /><br />
	<input type='password' name='password' /><br />
	<div id='cargando'><input type='button' onclick='login(this.form);' value='Ingresar' /></div>
</form>";
}
echo "<div id='message_field'></div>";
	
formulario();

?>

Código:

<?
sleep(5);
session_start();
function conect_db($db="winiks_dany")
{
	$conection = mysql_connect ("localhost", "", "");
	if (!$conection) 
		return false;
	
	if (!mysql_select_db ("$db"))
		return false;
	
	return true;
}

function login($user, $password) 
{
	$conection = conect_db();
	if (!$conection)
		return false;
		
	$query = mysql_query ("SELECT * FROM users WHERE username ='$user' AND password = password ('$password')");
	if (!$query)
		return false;
	
	if (mysql_num_rows($query)>0)
	{
		if (check_account_status($user) == "ok")
			return true;
		elseif (check_account_status($user) == "unactivated")
			return 'unactivated';
		elseif (check_account_status($user) == "disabled")
			return 'disabled';
	} else {
		return false;
	}
}

function check_account_status($user)
{
	$query = mysql_query ("SELECT activated,attempts FROM users WHERE username ='$user'");
	if (!$query)
		return false;
		
	if (mysql_result($query, 0, "activated") == "1")
		return 'ok';
	
	if (strlen(mysql_result($query, 0, "activated")) > 1) 
		return 'unactivated';
		
	if (mysql_result($query, 0, "attempts") > 5)
		return 'disabled';
}

$username = $_REQUEST['user'];
$password = $_REQUEST['password'];

$login = login($username, $password);

switch($login)
{
	case "true" || "1":
	$_SESSION['user'] = $username;
	$message = "Bienvenido ".$_SESSION['user']."!";
	break;
	
	case "unactivated":
	$message = "Error: No has activado tu cuenta.";
	break;
	
	case "disabled":
	$message = "Error: Tu cuenta ha sido desactivada, se han hecho varios intentos fallidos de accesar a ella. Se ha enviado un mail a tu cuenta
	de correo para que la reactives.";
	break;
	
	default:
	$login = "0";
	$message = "Error: Los datos introducidos no son correctos. Intenta de Nuevo.";
	break;
}
	
	$response = 
	"<?xml version='1.0' encoding='UTF-8' standalone='yes' ?>".
		"<response>".
			"<result>".
					$login.
			"</result>".
			"<message>".
				$message.
			"</message>".	
		"</response>"; 

header('Content-Type: text/xml');	
echo $response;
?>

Código:

#message_field {
	width: 90%;
	height: 40px;
	margin-left: 5%;
	text-align:center;
	color:#FFFFFF;
	font-size: 18px;
	font-weight: bold;
}

.message_error {
	background-color: #C66;
	border: #666 3px solid;
	visibility: hidden;
}
.message_ok {
	background-color: #099;
	border: #666 3px solid;
	visibility: hidden;
}

[maycolalvarez]

primero normalice su código para seguir los estándares:

- use var para declarar variables
- propague variables por parámetros, evite el uso de variables en el scope global
- Consulte un manual de AJAX para que obtenga los valores indicados de readyState y status para mostrar el gif animado
- La forma en que obtiene el XHR no es crossbrowser, por la que no funcionará en todos los navegadores, consulte y copie una función para obtener el XHR más completa.