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 chamada de AJAX (Asynchronous JavaScript And XML). Serve basicamente para carregar dados (xml, html, texto) para uma página, abrindo um portal no espaço tempo do browser e indo buscar esta informação no servidor sem mexer no que já foi 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 podem ser referenciadas como sendo um sub-objeto, ligado ao objeto principal document. Em PHP tudo é tratado como texto, basta fazer echo de alguma coisa no meio do html e tá realizado. Mas isto por que ele faz o serviço dele lá no servidor, encima de um arquivo. O Javascript não, ele está sendo executado no browser, juntamente com o HTML. Logo, estando o HTML interpretado pelo browser, este HTML está 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.
Por hoje é só! E como prometido, quero dedicar este pequeno artigo à minha amiga Web Designer Cristina Otto, abração Cris!!
.
