Ajax o inicio.

Neste tutorial vou explicar talvez a parte mais importante em termos de AJAX.
Por favor toma em consideração que AJAX é especialmente Javascript e por isso ainda é um pouco de misterio para mim como podem ver neste tutorial. Para descobrirmos um pouco mais sobre AJAX temos que falar sobre Javascript e o famoso objecto XMLHttpRequest.
O objecto XMLHttpRequest permite aos programadores receber e enviar informação para o servidor sem que o user note a diferença (não existe o tal refresh da página).
Foi criado pela Microsoft e era um dos componentes ActiveX, mas mesmo assim quase todos os browsers do dia de hoje têm a capacidade de usar o XMLHttpRequest.
Para podermos usar o XMLHttpRequest temos que criar uma função em Javascript, que iremos chamar sempre que precissamos de enviar ou receber informação do servidor.

var xmlHttp

function GetXmlHttpObject(handler)
{ 
var objXmlHttp=null

if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("Este exemplo nao funciona em Opera") 
return; 
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{ 
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
} 
try
{ 
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler 
return objXmlHttp
} 
catch(e)
{ 
alert("Activex pode nao estar activado") 
return 
} 
} 
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler 
return objXmlHttp
}
} 

Esta função vai criar o nosso objecto, vamos por passos:
Primeiro verificamos se o browser do user é o Opera, se for estamos agarrados (por enquanto).
De seguida verificamos se o browser faz parte da Microsoft, se for acima da versão 5.5 do Internet Explorer usamos o Msxml2 a versão mais recente, senão usamos o antigo.
Por ultimo verificamos se o browser é o Mozilla Firefox.
Basicamente eu guardo este snippet de codigo comigo no bolso(eheh), e penso nele da mesma forma que uso ASP para uma criar uma ligação a base de dados.
Sendo assim, sempre que quero enviar ou receber informação, o primeiro passo e abrir a ligação ao servidor.

Ok ligação feita e agora?

Agora falta duas funcões importantes, a primeira é a funcão que envia o nosso pedido para o servidor.
A segunda é a função que recebe a nossa informação do servidor. Vamos comecar com a primeira.

function mandarAlgoParaUmScript(strTomaladisto)
{ 
var url="voureceberinformacao.asp?InformacaoParaOScript=" + strTomaladisto 
xmlHttp=GetXmlHttpObject(epaTemosResposta)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
} 

Para tal criamos a função mandarAlgoParaUmScript e enviamos uma váriavel no parametro strTomaladisto.
A váriavel url, é o script que queremos que receba a váriavel. De seguida chamamos a nossa função que abre a ligação, e tambem dizemos qual a outra função que vai lidar com a resposta do servidor. A função que vai lidar com a resposta do servidor é: epaTemosResposta.

function epaTemosResposta() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("dizaiavariavel").innerHTML=xmlHttp.responseText 
} 
} 

Esta função é a que lida com a resposta do servidor, basicamente quando o servidor enviar a resposta sera apresentada num div com o ID dizaiavariavel.

Ok resume lá isso.

Ok isto ate pode parecer um pouco confuso, mas se já estas habituado a PHP ou ASP podes imaginar AJAX como o PHP/ASP a usarem uma base de dados.

• Abrir ligação a base de dados.
• Abrir e apresentar os resultados da base de dados através do recordset.
• Fechar a ligação e destruir o recordset.

AJAX

• Enviar e abrir a ligação ao servidor.
• Esperar pela a resposta
• Apresentar os resultados

Podes ver um exemplo deste tutorial, em que tens uma caixa de input e seja la o que escreveres e mudar o focus do rato para fora da caixa ira aparecer por baixo sem haver o reload da pagina.

Isto e so o inicio mas ja podemos ver a diferenca que o AJAX faz, e as vantagens que traz. Nos proximos artigos vou falar de como usar AJAX com base de dados e algumas das libraries que existe em AJAX.

De dizer que neste tutorial não explico o codigo ASP, pois esta fora da ideia deste tutorial e sim so explico o Javascript.

Obrigado.