Donde poner la img del Cargando en Ajax

[kernelcom-com]

Hola amigos tengo una funcion que me carga los resultados de una consulta por get llamando a un ajax

Código:

<script type="text/javascript">
function mostrarSecciones(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
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","columna-deSecciones.php?s="+str,true);
xmlhttp.send();
}
</script>

<form name="seccio">
<select name="secciones" onChange="mostrarSecciones(this.value)">
<option value="">Seleccione una secci&oacute;n:</option>
<option value="1">Mas Leidos</option>
<option value="2">Seccion 2</option>
<option value="3">Seccion 3</option>
</select>
</form>
<br />
<div id="txtHint"><b>Consulta alguna seccion.</b></div>

Quisiera saber donde pongo la accion para poner un fig con la palabra cargando, gracias por sus sabios consejos, saludos.

[blakmetall]

que tal amigo no voy a responder en concreto a tu pregunta,
pero me gustaria decirte como usar ajax mas facil

bajate el framework de javascript jquery.
y si quieres hacer una consulta con ajax es sencillisima

$.post('pagina_a_consultar.php',{"var1":"que tal","var2":"hola"},function(data){
//aqui data es resultado que diste en pagina_a_consultar.php
//los echo que hayas hecho, html que hayas incluido,etc
});

http://api.jquery.com/jQuery.post/
checa el enlace, abajo dice EXAMPLES ahi estan ejemplos mas claros.

[kernelcom-com]

Gracias por tu respuesta, igual agradeceré quien pueda brindarme la respuesta, estoy seguro que no es muy difícil, gracias nuevamente.

[bet7o]

Lo puedes hacer así:

Código Javascript:

document.getElementById('IdElement').innerText = 'Cargando . . .';
if(window.XMLHttpRequest)
 

y despues para quitarlo lo haces acá:

Código Javascript:

if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
    document.getElementById('IdElement').innerText = '';
 

Ahora también debes tener en cuenta que pueden ocurrir errores, entonces tambien debes borrar el mensaje.

Como dice blakmetall existe jquery, entre otros tantos, que nos hacen la vida mas fácil pero también opino que es bueno saber como se hacen las cosas sin frameworks porque nos da mucha experiencia.

He conocido a personas que cuando no se puede usar un framework sufren mucho.

Saludos!

[kernelcom-com]

Muchas gracias, pude hacerlo y me funciona a la perfección, pero pienso que no es recomendable hacer esta accion cuando la web tienen millones de visitas al día por la doble petición al servidor mysql para resolver los datos, gracias saludos.

[cuasatar]

No se si la manera como te lo indican sea la más adecuada. Para eso creo que es mejor usar los estados de la carga de ajax. Aquí te dejo un resumen de los mismos.

readyState: Holds the status of the XMLHttpRequest. Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

Por tanto lo único que se debe hacer es crear un estado cuando el servidor esta conectado, es decir:

Código HTML:

if(xmlhttp.readyState==1)
{document.getElementById('IdElement').innerHTML='<img src="imagenes/ajax-loader.gif" border="0"/>Cargando, espere por favor...'}

[kernelcom-com]

gracias chochera(amigo);

Como puedo agregar en codigo las variables que indicas en primera instancia, entiendo la parte del código, pero si puedes expresarlo en codigos sería excelente, gracias buen aporte, saludos.

Atte: