Aplicações Web mais ricas com AJAX

Olá a todos. Depois dos posts micro do Gerson eu vou postar algo realmente grande para dar contraste :)

Durante o desenvolvimento de aplicações web às vezes nós precisamos fazer certas interações com o usuário que apenas com o script cliente fica difícil; ao mesmo tempo que ir ao servidor e fazer o processamento e refazer o render da página é problemático também. Ah.... como era legal programar estilo janelinha.... ah... bons tempos...

Caaaaalmaaa....... podemos juntar estas duas tecnologias de forma muito eficiente (e divertida também) usando AJAX.

AJAX? Sem piadinhas toscas por favor :P Direto da wikipedia:
AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é o uso sistemático de Javascript e XML (e derivados) para tornar o navegador mais interativo com o usuário, utilizando-se de solicitações assíncronas de informações. AJAX não é somente um novo modelo, é também uma iniciativa na construção de aplicações web mais dinâmicas e criativas. AJAX não é uma tecnologia, são realmente várias tecnologias trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades.

Não vou explicar cada coisa dessa definição ( :\ preguiçoso... ). Em vez disso vou mostrar um exemplo dele em ação.

Página Web, elemento select (combo). Ao selecionar um item do select usamos este valor como parâmetro para preencher outro select. No modo tradicional quando trocar o valor do select a página será recarregada com a diferença do novo parâmetro.

Com AJAX não é necessário. O coração do AJAX é um objeto que faz chamadas ao servidor e recupera o resultado nele mesmo, sem precisar recarregar a página. Antigamente nós usávamos IFRAME pra isso, mas isso são outros quinhentos hehe.

Vamos ao funcionamento: Entendam AJAX por um objeto javascript chamado XMLHttpRequest (simplificando é claro).

Este objeto tem métodos para chamar um script server-side (duh) no servidor (é claro!) e armazenar nele o resultado do processamento, que normalmente seria carregado na página. Suas páginas que usam AJAX não devem (preferencialmente) retornar uma página HTML completa. Apenas o resultado que será usado deve ser retornado. Este resultado pode vir de duas maneiras: em texto plano ou XML. Para XML devemos usar as funções javascript para XML e em texto plano pode ser um script javascript ou código HTML para ser substituído dentro de um DIV.

Eu ainda não comecei a usar XML; meus script usados em AJAX sempre retornam texto plano em forma de comandos javascript, que eu executo usando a função eval(), que entende o conteúdo de uma string como código e o executa.

Eu podia ficar mais 10 páginas de blá blá blá, mas como a maioria não vai ler mesmo vou direto mostrar como eu faço no site em que estou trabalhando atualmente.

No arquivo de include funcoes.js

var xmlhttp;
if (typeof XMLHttpRequest != 'undefined') {
 xmlhttp = new XMLHttpRequest();
}
else {
 xmlhtttp = new ActiveXObject("Microsoft.XMLHttp");
 if (!xmlhttp) {
  xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
 }
}


function respostaAjax(url) {
 xmlhttp.open("GET", url, false);
 xmlhttp.send(null);
 return xmlhttp.responseText;
}

Explicando. A variável da página xmlhttp é o objeto que faz as chamadas assíncronas dos scripts. este código grande para instanciar é porque... advinha??? advinha??? claro! há diferenças entre os navegadores e o IE6 usa um controle Activex para isso. O Mozilla Firefox e o IE7 já possuem este componente na sua arquitetura.

na função respostaAjax passamos como parâmetro a url do script ajax com parâmetros via GET (pagina.php?parametro=valor)

Este método faz a requisição desta url para o servidor e recupera o resultado na propriedade responseText. Caso use XML a propriedade será responseXML.

vamos a um exemplo:

Interface:

<script language="javascript" type="text/javascrpt" src="funcoes.js">
</script>

<script language="javascript" type="text/javascript" for="combo1" event="onchange">
  var resultado = respostaAjax("resultado.php?valor=" + this.value);
  eval(resultado);
</script>


<select name="combo1" id="combo1">
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Arquivo resultado.php, que espera um parâmetro da url (GET)

<?

  header("Content-Type: text/html; charset=iso-8859-1");
  $valor = $_GET["valor"];

  $quadrado = $valor * $valor;

  echo "alert('O quardado de $valor é $quadrado');";
?>

Se testarmos a aplicação veremos que assim que o valor do select muda o objeto AJAX chama a página do servidor, recupera o resultado e executa como um script. O resultado do nosso exemplo será um alert informando o quadrado do número informado.

Este exemplo é meio bobo; até poderia ser resolvido com script cliente. Mas imagine uma situação em que a interface precisa acessar o banco de dados e usar este resultado para montar outro select. Neste caso este sistema é legal.

Eu usei o PHP aqui para exemplificar mas vale ressaltar que qualquer linguagem server-side (não necessariamente script) pode ser usada. Basta suportar request/response.

Então é isso. Aproveitem e divirtam-se bastante enriquecendo suas aplicações web.