Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Guga01

[Resolvido] Mensagem carregando em ajax...

Por , em Javascript

Recommended Posts

Guga01    0

Guga01
Postado

Olá pessoal!

 

Sou novato em ajax. Estou fazendo uns exemplos de ajax para tentar entender o seu funcionamento. Pesquisando, encontrei uma maneira de mostrar a mensagem "carregando..." enquanto os dados não chegam do servidor. Coloquei no meu exemplo, mas a mensagem não apareceu. Vou colocar aqui o código do meu exemplo para que vocês possam me ajudar a entender onde está o problema. O código é o seguinte:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.: AJAX :.</title>

<style type="text/css">
#topo
{
	width:900px;
	height:100px;
	background:#399;
}

#areaResultado1
{
	width:900px;
	height:100px;
	background:#99C;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#CCC;
}
#areaResultado2
{
	width:900px;
	height:100px;
	background:#F33;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#787878;
}
#area3
{
	position:absolute;
	top:0px;
	left:50%;
	width:400px;
	height:50px;
	background:#FF3;
	visibility:hidden;
}
</style>

<script type="text/javascript">
function xmlRequest()
{
 var xmlHttp=null;
 if (window.XMLHttpRequest) {
   // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlHttp=new XMLHttpRequest();
 }
 else if (window.ActiveXObject) {
  // code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 } else {
  alert("Your browser does not support XMLHTTP!");
 }
 return xmlHttp;
}

function area1(){
 var xmlObject=new xmlRequest();
 xmlObject.open("GET","teste2.php?id=1",true);
 xmlObject.send(null);
 xmlObject.onreadystatechange=function(){
	 if (xmlObject.readyState==1){
	  document.getElementById('area3').style.visibility="hidden";
   document.getElementById('areaResultado1').style.background="#F1F1F1";
   document.getElementById('areaResultado1').style.color="#F00";
   document.getElementById('areaResultado1').innerHTML="Carregando...";
   document.getElementById('areaResultado2').style.background="#666";
   document.getElementById('areaResultado2').innerHTML="";
  }
  if (xmlObject.readyState==4){
	  document.getElementById('area3').style.visibility="hidden";
   document.getElementById('areaResultado1').style.background="#F1F1F1";
   document.getElementById('areaResultado1').style.color="#F00";
   document.getElementById('areaResultado1').innerHTML=xmlObject.responseText;
   document.getElementById('areaResultado2').style.background="#666";
   document.getElementById('areaResultado2').innerHTML="";
  }
 }
}

function area2(){
 var xmlObject=new xmlRequest();
 xmlObject.open("GET","teste2.php?id=2",true);
 xmlObject.send(null);
 xmlObject.onreadystatechange=function(){
	if (xmlObject.readyState==1){
	   document.getElementById('area3').style.visibility="visible";
	   document.getElementById('areaResultado2').style.color="#F00";
       document.getElementById('areaResultado2').style.background="#F1F1F1";
	   document.getElementById('areaResultado2').style.color="#F00";
	   document.getElementById('areaResultado2').innerHTML="Carregando...";
	   document.getElementById('areaResultado1').style.background="#666";
	   document.getElementById('areaResultado1').innerHTML="";
  }
	
	
  if (xmlObject.readyState==4){
	   document.getElementById('area3').style.visibility="visible";
	   document.getElementById('areaResultado2').style.color="#F00";
       document.getElementById('areaResultado2').style.background="#F1F1F1";
	   document.getElementById('areaResultado2').style.color="#F00";
	   document.getElementById('areaResultado2').innerHTML=xmlObject.responseText;
	   document.getElementById('areaResultado1').style.background="#666";
	   document.getElementById('areaResultado1').innerHTML="";
  }
 }
}
</script>


</head>

<body>
	<div id="area3">
	</div>
	<div id="topo">
		<a href="#" onclick="area1()">área 1</a><br /><br />
		<a href="#" onclick="area2()">área 2</a>
	</div>
	<div id="areaResultado1">
	</div>
	<div id="areaResultado2">
	</div>
</body>
</html>

Acredito que seja algum pequeno detalhe. Agradeço a quem puder me ajudar. Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Simplificando, para facilitar o entendimento:

 

você não precisa testar os valores do readyState para colocar a mensagem de 'Carregando', pois se espera que logo após acionar a ação, algo comece a acontecer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>.: AJAX :.</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
function xmlRequest()
{
	var xmlHttp=null;
	if (window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlHttp=new XMLHttpRequest();
	}
	else if (window.ActiveXObject) {
		// code for IE6, IE5
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		alert("Your browser does not support XMLHTTP!");
	}
	return xmlHttp;
}
function test_load( event )
{
	event.preventDefault();
	
	var resultado = id('resultado');
	var xmlObject = new xmlRequest();	
	xmlObject.open("GET","teste2.php?id=1",true);
	xmlObject.send(null);
	
	resultado.innerHTML = "Carregando...";
	xmlObject.onreadystatechange=function()
	{
		if (xmlObject.readyState==4)
		{
			resultado.innerHTML=xmlObject.responseText;
		}
	}
}
function id( el ){
	return document.getElementById( el );
}
</script>
</head>
<body>
	<a href="#" onclick="test_load( event )">Testar</a>
	<div id="resultado"></div>
</body>
</html>
teste2.php

<?php
	sleep( 2 );
	echo 'Terminou de Carregar, id enviado: '.$_GET['id'];

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guga01    0

Guga01
Postado

Olá William! Obrigado pela ajuda! Alterei o meu exemplo e a mensagem apareceu. Fiz o seu exemplo, mas no IE deu erro na linha do código

event.preventDefault();

 

Já no Firefox e Chrome funcionou sem problemas. Será que o IE não reconhece esse comando? Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito