No Sitio

Testando configuração

AJAX: um simples exemplo pra você começar a pôr a mão na massa

Resumidamente, o princípio básico de funcionamento do AJAX é o seguinte: 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, 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 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 ao qual tenha acesso e que saiba os endereços.

1. Pegue o trecho de código logo abaixo, coloque no bloco de notas e salve o arquivo com o nome exemplo.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>

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>

</body>

</html>

Agora basta testar. Aqui na minha máquina tenho um servidor Apache rodando. 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.

Publicado por Rodrigo Leme às 10h30