Autor: Décio | Publicado: 2008-04-28T14:28:00-03:00

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. &lt;ul&gt;&lt;li&gt;Os 11 sites mais interessantes da nova internet&lt;/li&gt;&lt;li&gt;Notebooks de 2015&lt;/li&gt;&lt;li&gt;Microsoft confirma softwares vendidos por assinatura&lt;/li&gt;&lt;li&gt;Excesso de downloads punidos por provedores&lt;/li&gt;&lt;/ul&gt; 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 &lt;html&gt;&lt;head&gt;&lt;title&gt;Exemplo simples do uso de AJAX&lt;/title&gt;&lt;script&gt;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.');}}}&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;input type="button" value="Carregar" onclick="loadData('exemplo.html');" /&gt;&lt;div id="codigo"&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt; 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