Há duas maneiras de um navegador requisitar informações do servidor sem descarregar a página atual. A primeira é a arqueológica técnica de esconder um frame (hoje em dia prefiro trabalhar com um iframe, claro) e fazer suas requisições nele. Assim, digamos que quiséssemos obter uma lista de cidades do servidor, e passar essa lista para a função javascript fazAlgumaCoisaComAsCidades. Poderíamos requisitar uma página num iframe, cujo código seria:
<script type="text/javascript"> parent.fazAlgumaCoisaComAsCidades([ "Belo Horizonte", "Rio de Janeiro", "Porto Alegre", "Curitiba" ]) </script>
Essa solução era usada há muito tempo, desde o século passado. Esconde-se o iframe com CSS e tudo resolvido. Apesar disso, é um jeito um tanto deselegante de resolver o problema, principalmente porque vai fazer aquele sonzinho de "clic" ao navegar no Internet Explorer, mas também porque vai interferir no botão de voltar e entrar no histórico do sujeito.
Uma abordagem mais atual para o problema é o uso do objeto XMLHttpRequest, que faz parte do padrão ECMA e está presente em todas as boas versões do Javascript. Os navegadores que suportam XMLHttpRequest hoje incluem:
Além disso o Internet Explorer, desde a versão 5, suporta o Microsoft XMLHTTP, um substituto para o XMLHttpRequest bom o suficiente para que possamos usá-lo (e não mais que isso.)
Assim, nosso primeiro desafio é criar o objeto XMLHttpRequest ou XMLHTTP, dependendo do navegador. Isso não é tão complicado:
try{
xmlhttp = new XMLHttpRequest();
}catch(ee){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xmlhttp = false;
}
}
}
No final desse código, teremos em xmlhttp o objeto apropriado para nossa conexão ou, no caso de um navegador sem suporte a nenhum dos objetos acima, teremos false, que podemos usar para não mexer no conteúdo em navegadores onde o Ajax vai funcionar.
Vejamos um exemplo de como usar esse objeto:
xmlhttp.open("GET", "http://www.tableless.com.br/ajax/",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4){
alert(xmlhttp.responseText)
}
}
xmlhttp.send(null)
O objeto xmlhttp é executado de maneira assíncrona, numa outra thread. Por isso não lemos o retorno depois de chamar o método send, mas criamos uma função onreadystatechange, que será executada pelo objeto quando ele terminar sua navegação.