em 10/11/2010 00:00
AJAX é carregar e renderizar uma página, utilizando recursos de scripts rodando pelo lado cliente, buscando e carregando dados em background sem a necessidade de reload da página. AJAX é acrônimo para: Asynchronous JavaScript And XML e foi gerado por Jesse James Garret, em um artigo no site http://www.adaptivepath.com/publications/essays/archives/000385.php, da sua empresa Adaptive Path, em fevereiro de 2005. Ajax não é uma tecnologia, mas sim um conjunto de tecnologias. O conceito de AJAX se resume em conhecer bem JavaScript, trabalhando com DOM (Document Object Model), CSS (Cascading Style Sheets) e XML.
Como se trabalha com o AJAX
Enquanto em uma aplicação Web clássica o navegador tem que ir buscar as informações no servidor e retornar para o cliente, no Ajax ocorre de forma diferente. No carregamento da página, toda a lógica de processamento de dados é passado ao cliente. Quando o usuário faz uma requisição, quem busca e trás essas informações é o JavaScript, de forma assíncrona, não causando assim o chamado ?reload? na tela. O tratamento dos dados, seu formato e exibição fica toda por conta do script que foi carregado inicialmente quando se acessou a página. O processo inicial de carregamento é mais lento que de uma aplicação comum, pois muitas informações são pré-carregadas. Mas depois, somente os dados são carregados, tornando assim o site mais rápido.
Com o uso do objeto XMLHttpRequest, que faz parte do padrão ECMA e está presente em todas as boas versões do Javascript. Os browsers que suportam esse padrão são:
Além disso o Internet Explorer, desde a versão 5, suporta o Microsoft XMLHTTP, um substituto para o XMLHttpRequest.
Há duas maneiras de se fazer uma requisição com um objeto XMLHttpRequest, uma é síncrona, outra assíncrona. No modo síncrono, quando você manda o objeto fazer uma requisição, o seu script é interrompido esperando pelo retorno. No modo assíncrono a requisição é feita em segundo plano e seu script continua a ser executado. Em modo síncrono, você tem o problema de ter seu navegador congelado enquanto seu script é executado. E isso é ruim, pois podem ser que seja rápida a requisição e pode ser que não, ai você pergunta, será que está funcionando ou travou? O negócio é evitar esse método.
Para ter a forma com que o objeto XMLHttpRequest vai trabalhar, você tem que alterar o terceiro parâmetro do método open. Com esse parâmetro em true, no terceiro parâmetro do método open, coloca o objeto em modo assíncrono. O método open do objeto XMLHttpRequest permite abrir um documento, passar argumentos para ele e capturar uma resposta. Com apenas dois métodos possíveis de se utilizar para acessar um documento: GET e POST, o método usado no exemplo é GET. No entanto se a quantidade de informações a ser passada for muito grande você deverá alterar para o método POST. O método send ativa a conexão e faz a requisição de informações ao documento aberto pelo método open. Este método possui somente um parâmetro que serve para enviar dados extras ao documento que está sendo acessado.
Mensagem de carregando com ajax
O browser Internet Explorer não o obriga a passar nenhum parâmetro, mas outros navegadores como o Mozilla, exige algum dado, neste caso, a solução foi enviar null, mesmo não havendo necessidade de passar nenhum parâmetro. Ao fazer a requisição o objeto vai executar o método onreadyStatechange. Esse código vai ser executado várias vezes durante a requisição, por isso é testado readyState. Quando readyState tiver o valor 4, significa que a requisição foi concluída e que é possível ler o retorno e trabalhar com ele. Para capturar a resposta do documento web acessado, você tem duas propriedades do objeto XMLHttpRequest: responseText e responseXML.
A propriedade responseText contém o retorno do documento web acessado na forma de texto. Já a propriedade responseXML retorna um objeto DOM, em formato XML, podendo ser manipulado facilmente.