BRASIL TUTORIAIS – Tudo sobre tutoriais

O que é AJAX? (Asynchronous Javascript and XML, mais conhecido como AJAX) foi criado com o principio de ser uma maneira rápida e otimizada de podermos fazer requisições Web, sendo esta totalmente transparente ao usuário.

Este processo normalmente não é notado na visão do usuário, mas é isso que acontece quando digitamos em nosso navegador de internet um endereço da Web. O AJAX por sua vez também roda encima desta lógica.

Mas e afinal, para que usamos o AJAX?

Hoje esta tecnologia é utilizada para uma infinidade de processos, mas o que precisamos saber não é o que fazer com ele, mas sim saber como ele trabalha para podermos adequar tal tecnologia em nosso dia-a-dia.

Um exemplo básico da utilização de AJAX, é um refresh de página, sem que o usuário necessite faze-lo.

O programador que cria a página, programa uma requisição AJAX, para que busque novos dados no servidor em um limite de tempo, e então também por Javascript, altera a visualização do usuário, talvez inserindo linhas em uma tabela ou algo do gênero, assim dando um aspecto de atualização automática.

Como utilizar?

Hoje, o AJAX é suportado pelos principais browsers disponíveis no mercado, e utilizados pela comunidade Web.

Para isso utilizados objetos Javascript, que rodam encima do browser do usuário e transitam dados por estas requisições.

Assim sendo, podemos fazer interações com processos de servidor, sem que seja necessário por exemplo recarregar a página do usuário, ou mesmo se quer visualize tal iteração.

Vejamos um exemplo básico:

//variavel ajax
var ajax = null;

//função que faz a requisição ajax
function requisicaoAjax(){
    //utilizado para requisições no browser Internet Explorer
    if (window.ActiveXObject) ajax = new ActiveXObject(’Microsoft.XMLHTTP’);
    //utilizado como o padrão javascript para requisições AJAX.
    else if (window.XMLHttpRequest) ajax = new XMLHttpRequest();
    //se a variável ajax for nula, logo o browser não suporta tal tecnologia
    if(ajax != null){
      //abre a requisição ajax, passando o método de acesso, a url
 solicitada e o parâmetro sobre sincronia
      ajax.open(’GET’,’http://gujs.com.br/’,false);
      //seta a funcao que sera chamada quando o ajax for retornado
      ajax.onreadystatechange = statusAjax;
      //inicia o tranporte
      ajax.send(null);
    }
}

//função que trata o retorno ajax
function statusAjax(){
  //caso o status do ajax esteja ok, então chama a função retornoAjax
 enviando o retorno da requisição como parâmetro
  if(ajax.readyState == 4 && ajax.status == 200){
    retornoAjax(ajax.responseText);
  }
}

//função que é chamada quando o ajax for retornado
function retornoAjax(response){
  //dá um alerta no texto de retorno
  alert(response);
}
requisicaoAjax();
Sendo que:

Criamos um objeto para o transporte do AJAX;
Setamos ao objeto as diretivas da solicitação como a url a ser solicitado e o método. O terceiro parâmetro é se deve ser assíncrono ou não, no caso estamos passando false, para o Javascript aguardar o retorno da requisição.
Indicamos qual será a função que irá fazer o tratamento de estados da requisição. O status da requisição é retornado pelo browser para tratamento a cada vez que este status muda.
Você pode ver a listagem completa de status aqui:

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Quando dizemos:

ajax.onreadystatechange = statusAjax;
Estamos indicando que toda a vez que este AJAX mudar de status, ele deve chamar esta função.

No nosso caso, o único status interessante é o status de requisição ok.

Se a requisição retornar um status ok, então a partir daí trabalharemos em nosso refresh, como dito acima, onde trataríamos os dados retornados e aplicaríamos na visualização do usuário;

Uma coisa que devemos considerar e que por sua vez é de grande importância, é que não podemos fazer requisições AJAX a outro domínio diferente ao que o site atual roda.

Por exemplo: Sendo que minha página exemplo_ajax.htm estivesse dentro de http://www.gujs.com.br, só poderei fazer requisições AJAX para arquivos que fiquem dentro de http://www.gujs.com.br.

Este exemplo é bem simples, mas apenas para podermos ter uma noção de como funciona uma requisição AJAX.

Existem hoje, várias bibliotecas Javascript para formalizar tais requisições, bibliotecas que fazem o controle de estados inválidos da requisição, ou mesmo que facilitam o transporte de requisições via método POST.

O intuito deste artigo é simplesmente desmistificar este fênomeno chamado AJAX.