Ajuda ae, no carregamento automático de cidades

[joersbrasil]

Precisava de uma ajuda rápidamente em um script ajax

Quero que quando selecione o estado apareça um loading.gif até que carregue todas as cidade referentes ao estado selecionado, e aí sim substituí o loading.gif pela combobox.

Vocês podem me ajudar com isso gostaria de dar um visual mais profissional, ficaria muito grato.

O script funciona perfeitamente só gostaria de acrescentar este recurso.

Segue o script abaixo.

//inicio do script ajax

var xmlHttp

/* Essa function manda a ID selecionada do combo de estados para a pgina que ir filtrar as cidades */

function MandaID(str)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Este browser no suporta HTTP Request")

return

}

var url="seleciona_cidade.asp" // o arquivo que ir executar a SQL das cidades

url=url+"?id_estado="+str // recebe o ID do estado para filtrar as cidade

url=url+"&sidjs="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

/* Essa function ira exibir o resultado na DIV */

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("exibe_cidade").innerHTML=xmlHttp.responseText

}

}

/* Instancia */

function GetXmlHttpObject()

{

var objXMLHttp=null

if (window.XMLHttpRequest)

{

objXMLHttp=new XMLHttpRequest()

}

else if (window.ActiveXObject)

{

objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

return objXMLHttp

}

function ExibeIds()

{

var Estado = document.getElementById('state');

var Cidade = document.getElementById('city');

if (Estado.value != '' && Cidade.value != '')

alert('ID do estado : ' + Estado.value + ' (' + Estado.options[Estado.options.selectedIndex].text + ')' + '\n\n' + 'ID da cidade : ' + Cidade.value + ' (' + Cidade.options[Cidade.options.selectedIndex].text + ')');

}

// fim do script ajax

Editado Maio 11, 2012 por joersbrasil