Son las 5:01 am y me eh desvelado por cuestiones de trabajo, y bueno despues de no encontrar en internet como hacer esto de mostrar un gif mientra carga una pag con ajax, eh escrito mi propio programa usando la teoria basica de como se debe hacer y los resultados me encantaron.
Antes de entrar en codigo veremos unas capturas:
----------------------------------------------Formulario.html---------------------------------------------------------
<html>
<head>
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0){
alert("se reinicia el proceso");
document.getElementById("txtHint").innerHTML="<img id="cargando" src="cargando.gif" style="display: none;">";
return;
}else{
document.getElementById("cargando").attributes['style'].value = "";
}
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","resolver.php?e="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Introdusca un texto</h3>
<form action="">
Campo: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<div id="txtHint">
<img id="cargando" src="cargando.gif" style="display: none;">
</div>
</body>
</html>
---------------------------------------------resolver.php--------------------------------------------------------
<html>
<head>
<title>Problema</title>
</head>
<body>
<?php
sleep(5); //Solo detiene el proceso 5 segundos simulado el retraso de una pagina pesada
echo "Se encontro: ".$_REQUEST['e'] ;
?>
</body>
</html>
cualquier gif funcionara, solo recuerda tener los tres archivos en la misma carpeta
Fuente:
La parte mas esencial del codigo se puede encontrar en:
http://www.w3schools.com/ajax/default.asp
pero es insuficiente.