O Ajax e seu funcionamento

O AJAX e o seu funcionamento na Internet. 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.

Por | @oficinadanet Programação

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.


Criando uma página com Ajax


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:
  • Opera 8
  • Mozilla e Firefox
  • Konqueror
  • Safari
  • 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.


Entendendo o AJAX


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.

Leia também:

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.

Mais sobre: ajax javascript
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo