AJAX: um simples exemplo pra você começar a pôr a mão na massa
Monday, April 28th, 2008O princÃpio básico de funcionamento do AJAX, resumidamente, é: fazer requisições para o servidor Web sem precisar recarregar a página toda. A requisição é feita por trás dos panos, ou seja, enquanto você lê este post, poderia ter alguma programação pegando mais informações no servidor.
O exemplo que vou colocar abaixo faz uma coisa bem simples. É feita uma requisição ou pedido, como alguns falam, para o servidor Web de um arquivo que tem um trecho de HTML. Quando esse trecho de HTML chega, ou seja, o pedido é entregue pelo servidor, transformo todo texto em caixa alta e o disponibilizo na própria página.
Para você fazer o exemplo funcionar, além dos passos abaixo, é fundamental que você tenha um servidor Web configurado na sua máquina ou que possa fazer o upload dos arquivos que serão criados para algum servidor Web que você tenha acesso e que saiba os endereços.
1. Pegue o trecho de código logoo abaixo, coloque no bloco de notas e salve o arquivo com o nome exermplo.html dentro de algum diretório.
<ul>
<li>Os 11 sites mais interessantes da nova internet</li>
<li>Notebooks de 2015</li>
<li>Microsoft confirma softwares vendidos por assinatura</li>
<li>Excesso de downloads punidos por provedores</li>
</ul>
2. Crie um novo arquivo com o bloco de notas, copie o código abaixo e grave no mesmo diretório do arquivo exemplo.html. Dê o nome de ajax.html
<html>
<head>
<title>Exemplo simples do uso de AJAX</title>
<script>
function getRequestObject() {
// Função que retorna o objeto que será usado para fazer requisições.
// Caso o navegador não tenha suporte, a função retorna falso.
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”)
} else {
return false;
}
return xmlhttp;
}
function loadData(url) {
// Função que recebe uma URL e dá um GET nessa URL, ou seja, faz uma requisição.
requestObject = getRequestObject();
if (requestObject) {
requestObject.onreadystatechange = requestObjectStateChanged;
requestObject.open(”GET”, url, true);
requestObject.send(null);
} else {
alert(’Seu navegador não tem suporte para essa tecnologia.’);
}
}
function requestObjectStateChanged() {
// Essa função é acionada pela função acima. Na verdade é um evento (onreadystatechange) do
// objeto que faz a requisição que a aciona toda vez que seu estado altera.
// Quando a requisição termina com sucesso, coloco o resultado dentro do div que está no
// body da página.
if (requestObject.readyState==4) {
if (requestObject.status==200) {
document.getElementById(’codigo’).innerHTML = requestObject.responseText.toUpperCase();
} else {
alert(’Erro ao carregar os dados.’);
}
}
}
</script>
</head>
<body>
<input type=”button” value=”Carregar” onclick=”loadData(’exemplo.html’);” />
<div id=”codigo”></div>
</body>
</html>
Agora basta testar. Aqui na minha máquina tenho um servidor Apache rodando. Eu editei o arquivo de configuração (httpd.conf) e mudei o DocumentRoot para o diretório que usei para gravar os arquivos. Depois disso, acessei http://localhost/ajax.html para testar.
Uma outra possibilidade é você fazer o upload desses dois arquivos para algum servidor Web. Depois disso, basta você acessar o arquivo ajax.html e clicar no botão carregar.
Caso encontre problemas ou não tenha entendido o que o código faz, linha por linha, deixe seu comentário para que eu ou outros leitores ajudem.
