Janela de aguarde

[alexandremanowar 0]

E a e pessoal beleza

 

Eu fiz o seguinte código em ajax:

function BTNAlterarFinal(codigo)
{

	var descricao = document.getElementById("texto"+codigo).value;
		var Substituir = document.getElementById("botao_"+codigo);

	
	var CampoHTML = "";
	
	ajax.open("POST","alterar_centralizadora2.php",true);
	ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	ajax.onreadystatechange = function() 
	{
							   if(ajax.readyState < 4 ) 
		{
		   //aqui entra a tela de aguarde
								 }
				
		if(ajax.readyState == 4 ) 
		{
			CampoHTML = '<input type="submit" value="Alterar"  class="formbutton"   onclick="BTNAlterar('+codigo+')">';

			document.getElementById(codigo).innerHTML = descricao;
			document.getElementById(codigo).setAttribute("inputdados",descricao);
			Substituir.innerHTML = CampoHTML;
				

			
			
		}
	}
	
		
		var params = "centralizadora="+descricao+"&codigo="+codigo;
		ajax.send(params);

	
}

Eles esta funcionando perfeitamente, integrando com meu código php e exibindo na minha página html, a única coisa que não consegui fazer é aparecer aquela tela de aguarde ao clicar no botão! Aquela tela que mostra uma gif animada na frente da minha página enquanto carrega, sei que ela tem que entrar na seguinte parte do código:

 

if(ajax.readyState < 4 ) 
		{
		   //aqui entra a tela de aguarde
								 }
				
		if(ajax.readyState == 4 ) 
		{
			CampoHTML = '<input type="submit" value="Alterar"  class="formbutton"   onclick="BTNAlterar('+codigo+')">';

			document.getElementById(codigo).innerHTML = descricao;
			document.getElementById(codigo).setAttribute("inputdados",descricao);
			Substituir.innerHTML = CampoHTML;
				

			
			
		}

Sei que o ajax.readyState == 4 é para quando tudo já estiver ok então no if que fica com ajax.readyState < 4 será o que deve exibir o gif com a mensagem aguarde mas não sei como fazer alguém pode me explicar?

 

Valeu

[Hildds 1]

Você pode fazer uma div com a mensagem carregando e com a imagem que você quiser utilizando CSS.

 

Exemplo:

CSS:
.esconder {
visibility:hidden;
}
.aparecer {
visibility:visible;
background:#FFF;
...
}
HTML:
<div id="carr" class="esconder"></div>

Com o Javascript ( integrando-o no seu código ) você pode fazer ele mudar de classe do esconder por aparecer.

 

No seu exemplo em AJAX:

Exemplo:

if(ajax.readyState == 1 ) {
var elemento = document.getElementById("carr");
elemento.className = "aparecer";
}
if(ajax.readyState == 4 ) {
var elemento = document.getElementById("carr");
elemento.className = "esconder";
}

Vê se ajuda http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif .