Desmistificando o temível AJAX!

O termo AJAX não provém do latim “Acessarium Javascriptum Atloren Xmelum”, não, mas da expressão da língua inglesa “Asynchronous JavaScript And XML” ou Javascript e XML assíncronos.

Um parêntesis teórico:

Esta questão de atividade assíncrona está para Javascript assim com THREAD’S estão para JAVA. Ou seja, a execução assíncrona ocorre em um tempo diferente da execução do script original. De modo que, se no meio de um looping for chamada a execução de uma tarefa assíncrona, o programa não irá aguardar a conclusão desta tarefa para então passar ao próximo passo do looping. Assim ao concluir a execução de um looping de 10 iterações, em que todas executam uma nova tarefa assíncrona, a nona tarefa pode estar sendo aberta e a primeira não ter sido concluída ainda, mas a terceira tarefa já pode ter retornado um resultado.

O que realmente interessa, prática!

Vamos partir de um layour HTML ultra básico:

<div id=“geral”>
<div id=“coluna_menu”></div>
<div id=“coluna_principal”></div>
</div>

Para incluir dados dinamicamente via PHP poderíamos proceder da maneira tradicional:

<div id=“geral”>
<div id=“coluna_menu”>
<a href=“index.php?arquivo=lista.php”>
</div>
<div id=“coluna_principal”>
<!– assim ao clicar no menu recarrega a página incluindo o arquivo que deve ser mostrado –>
<?php include($_GET['arquivo']); ?>
</div>
</div>

Tudo certo até aqui?

Bom, existe uma maneira de se carregar um conteúdo para dentro da div “coluna_principal”, sem usar frames ou recarregar a página utilizando includes.

Trata-se da técnica entitulada de AJAX (Asynchronous JavaScript And XML). Serve basicamente para carregar dados (xml, html, texto) em uma página, abrindo um portal no “espaço tempo” do browser e indo buscar novo conteúdo no servidor, sem desfazer todo o HTML  que já tinha sido previamente carregado no browser, ao acessar a página.

Um parêntesis de programação javascript:

Em primeiro lugar, gostaria de explicar como funciona o atributo innerHTML do javascript. Atenção innerHTML não é AJAX. Serve apenas para alterar dinamicamente o HTML contido dentro de uma tag. É preciso ter em mente que o Javascript vê as tags do browser de uma maneira diferente do PHP. Em Javascript, todas as tags HTML podem ser referenciadas como um objeto (com métodos e atributos), ligado ao objeto principal document. Em PHP, porém, todas as tag’s são tratadas puramente como texto, basta fazer echo de alguma coisa no meio do html e tá realizado. Claro, isto por que o PHP faz a sua parte lá no servidor, e o servidor apenas tem interesse em fornecer TAG’s HTML, e não em interpretá-las. Já o Javascript, é  executado no browser, juntamente com o HTML. Logo, estando o HTML interpretado pelo browser, este HTML fica na memória do computador, e o browser não mais o enxerga como um texto, mas como objetos que tem propriedades e comportamentos. Por exemplo, um botão não pode ser visto como um texto, mas deve ser visto como um programa, um objeto que reage ao click do usuário. Continuando:

var container = document.getElementById(‘coluna_principal’);
//getElementById localiza um objeto no meio do html,
//pelo seu ID, e retorna uma referência para este objeto.

Agora, a variável container se tornou um objeto com referência para a tag “coluna_principal”. E ele tem propriedades que podem ser acessadas a partir desta variável. Tipo, poderíamos descobrir que tag é esta:

alert(container.tagName); //isto mostraria “div” , pois div é o nome da tag

//que é identificada pelo id “coluna_principal”.

Aqui é que entra o innerHTML.

container.innerHTML = “<br> oi <br><br><br><br> bla bla bla”;

//com isto o texto e o HTML entre aspas foram adicionados dentro da tag div com id “coluna_principal”.

Bom esta é a maneira de escrever um HTML novo dentro de uma tag já existente, de forma dinâmica (DHTML – Dynamic HTML).

Então… como o Ajax funciona?

Ajax nada mais é do que a técnica para carregar conteúdo no browser, que utiliza funções javascript para buscar dados de um arquivo presente no servidor. Esta tarefa é executada por um componente do browser (XMLHttpRequest), que pode ser acessado através de funções Javascript para buscar no servidor um novo HTML ou XML.

<script>
//Tenta criar o objeto xmlhttp responsável por buscar os dados no servidor, são necessárias
// 3 tentativas de criação do objeto por conta das discrepâncias de browsers microsoft
try {
xmlhttp = new XMLHttpRequest();
} catch(ee) {
try{
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch(e) {
try{
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch(E) {
xmlhttp = false;
}
}
}


//a função de carregamento, recebe como parâmetro
//_idConainer – id da tag onde será escrito o novo HTML que será buscado no servidor
//_endereco – endereço da página que será buscada no servidor
function carrega(_idContainer, _endereco){

xmlhttp.open(“GET”,_endereco,true);
xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4){

//pega o resultado e filtra alguns caracteres absurdos
retorno=xmlhttp.responseText;
//tag_container contem a referencia da tag que vai receber
var tag_container = document.getElementById(_idContainer);
//escreve dentro da tag o novo HTML
tag_container.innerHTML=retorno; //olha o inner html aí

}
}
//Executa
xmlhttp.send(null)
}
</script>

Pronto! Lembra daquele trecho básico de html?

<div id=“geral”>
<div id=“coluna_menu”></div>
<div id=“coluna_principal”></div>
</div>
Para inserir um conteúdo HTML, no div de id “coluna_principal”, basta invocar a função carrega passando como parâmetro o id da div, e o endereço da página que contém os dados que devem ser carregados via AJAX. Ex:

<script>
carrega(‘coluna_principal’, ‘dados.php’);

// ou se for o caso, a url completa:
carrega(‘coluna_principal’, ‘http://www.minhapagina.com/dados.php’);
</script>

Quando carrega for chamado com os devidos parâmetros é que ocorre a tarefa de carregamento que se dá assincronamente, ou seja, não há como prever o tempo que levará para ela ser concluída, uma vez que este tempo depende de diversos fatores como: a velocidade da conexão de rede naquele momento, a quantidade de dados que serão carregados, a disponibilidade do servidor de atender etc…

E como fazer para um link ativar o carregamento de uma página usando AJAX?

<div id=“geral”>
<div id=“coluna_menu”><a href=“javascript:carrega(‘coluna_principal’, ‘dados.php’);”>acessar dados</a></div>
<div id=“coluna_principal”></div>
</div>
Bom, como podemos ver, AJAX nada mais é do que uma técnica de carregamento de dados. O exemplo acima funciona, porém por tratar-se de um código exemplar de extrema simplicidade, não pode ser utilizado para aplicações sérias. Nele faltam diversos recursos, que talvez em outra análise sobre AJAX possamos aprofundar.

[15/01/2009 - Edição problema grave no wordpress]  - Ao copiar trechos de código, dos posts do Ahã Programando, substitua todas as aspas redigitando-as. Pois o WordPress substitui as aspas originais por algumas que são inúteis em programação. E os testes acabam não funcionando, deixando os entusiastas da programação web frustrados.  Não desista! Tente novamente

Por hoje é só! E como prometido, quero dedicar este pequeno artigo à minha amiga Web Designer Cristina Otto, abração Cris!!

Tags: Ajax, assíncrono, DHTML, innerHTML, Javascript, XMLHttpRequest