WEBCODELOG

Resolvi escrever sobre AJAX porque vejo muita confusão ainda sobre o assunto, tem uma galera que não sabe exatamente o que é e, como se aplica e o que se ganha utilizando a técnica. Vou apenas demonstrar o mecanismo básico para funcionamento, não é um segredo, esse mesmo tutorial pode ser encontrado em milhares de sites na internet.

AJAX (Asynchronous JavaScript and XML) é uma técnica simples aplicada em ambiente de internet que utiliza apenas JavaScript e XML, possibilitando ao desenvolvedor criar funcionalidades mais ricas, daí o famoso RIA (Rich Internet Application). É possível usar AJAX em qualquer linguagem dinâmica de internet que suporte XML, como PHP, ASP, J2EE, .NET, etc.  A diferença realmente está nos navegadores de internet, que utilizam o componente chave XMLHttpRequest cada um a sua maneira.

O processo é feito de maneira simples, o XMLHttpRequest  faz uma chamada assíncrona por XML a uma outra página oculta aos olhos do usuário. Esta página oculta por sua vez devolve as informações processadas ao XMLHttpRequest, também via XML, e utilizando JavaScript é feito o parse do XML e exibido o resultado na página principal, que originou a chamada.

Para obter o XMLHttpRequest, eh comum a utilização deste bloco JavaScript

if( window.XMLHttpRequest ){ // Firefox, Safári, etc.
xmlReq= new XMLHttpRequest();
}else  if( window.ActiveXObject ){ // Se for IE – ActiveX version
xmlReq = new ActiveXObject(“Microsoft.XMLHTTP”);
}

Existem outras maneiras para obter o componente, cada programador decide pelo mais conveniente, veja este outro exemplo:

try{
xmlReq = new ActiveXObject(“Microsoft.XMLHTTP”); // IE
}catch(e){   // Falhou, para os normais
xmlReq = new XMLHttpRequest();
}

Após obter o XMLHttpRequest, vamos fazer a comunicação com um XML e exibir seu conteúdo, e tudo isso usando apenas JavaScript.

// faz a chamada no servidor da página dinâmica, responsavel por devolver o XML response
// o primeiro parametro indica se a chamada será via GET ou POST
// o segundo informa qual é a página, e por último se será uma chamada assíncrona
xmlReq.open(“GET”, “http://localhost/ajax/response.php”, true);

xmlReq.onreadystatechange=function(){
if( xmlReq.readyState < 4 ){
// Enquanto é aguardado o retorno, pode-se exibir uma mensagem
}else{
if( xmlReq.readyState == 4 ){
// Aqui é colocado o processo de parser do XMLResponse.
}
}
}// end OnReadyStateChange
xmlReq.send(null); // transporte

Vejam que a primeira ação é chamar a página “oculta”, responsável por retornar o XML com os dados necessário.

O readyState indica qual o nível do processamento, esses são os estados: 1 – Sendo enviado; 2 – Processando; 3 – Armazenando e 4 – Pronto. É possível utilizar a propriedade status do XMLHttpResponse, esta por sua vez indica o status da página que foi chamada, ou seja, se ocorreu algum erro ou não.

That`s all! Simples não? É assim que funciona o famoso AJAX, nada mais além disso, os recursos de JavaScript são utilizados ao extremo. Atualmente existem recursos extremamente avançados e mais seguros que este exemplo, mesmo assim é válido o entendimento do mecanismo utilizado nesses frameworks e esclarecer o funcionamento do AJAX.

Você pode fazer aqui o download de um exemplo simples, porém muito útil em formulários de cadastro, onde três dropdowns (País, Estado e Cidade) interdependentes, que ao fazer o reload da página para carregá-los é muito cansativo. Vale ressaltar que utilizei PHP para a construção deste pequeno tutorial, acabando como mito de que AJAX está vinculado a Java/.Net.

Ambiente

PHP 5 e MySQL 5, rodando em Windows XP, IE 6 e 7 e Firefox 2.

Desafio

Talvez você tenha idéia melhores para aplicar o AJAX depois de entendê-lo e, eu não me surpreenderia com isto, então faço aqui um desafio para estimular o aprendizado: crie um Auto-Completar! Você é capaz?!