Ajax Passo a Passo

O ponto chave para enviar e receber informações do servidor de forma assíncrona e sem precisar recarregar a página inteira é o objeto XMLHttpRequest definido pelo World Wide Web Consortium (W3C) em <http://www.w3.org/TR/XMLHttpRequest/>. Esse objeto tem uma API simples que será o foco desta seção.

Para melhor entendimento, após ler cada item abaixo, volte ao código do segundo exemplo e veja onde o mesmo se encontra.

 

A classe XMLHttpRequest

Logo quando o AJAX começou a ser utilizado, não existia uma API padrão para enviar e receber dados do servidor de forma assíncrona. Visando padronizar e garantir a portabilidade das aplicações web entre os vários navegadores existentes, a W3C definiu uma classe chamada XMLHttpRequest. Essa classe está implementada nos principais (se não todos) navegadores comerciais e contempla as necessidades para a conversação assíncrona com o servidor.

 

Instanciando o objeto XMLHttpRequest

Para obter uma instância do objeto XMLHttpRequest, basta chamar seu construtor:

var ajaxReq = new XMLHttpRequest();

 

Tratando as respostas do servidor

Na grande maioria dos casos, é desejável tratar as respostas das requisições enviadas ao servidor (uma exceção seria o envio de um aviso ao servidor, cujo recebimento e processamento não influencia no lado cliente). Para tal, o primeiro passo é associar uma função ao atributo “onreadystatechange” do objeto XMLHttpRequest criado.

Ex.:

ajaxReq.onreadystatechange = function() { ... };

Essa função é especificada para tratar as respostas do servidor e pode ser chamada para diversas situações distintas. Por essa razão, devemos escrever o código de tratamento de modo que nosso tratamento seja executado apenas para o cenário que desejamos. Basicamente, os possíveis cenários se restringem a combinações das etapas de envio e do status da resposta:

if (ajaxReq.readyState == 4 && ajaxReq.status == 200) { ... }

 

Etapa	Valor	Descrição
UNSET	0	A instância do objeto XMLHttpRequest foi criada.
OPENED	1	O método open (será vista logo em seguida) foi chamado com sucesso e já é possível definir cabeçalhos (utilizando a função setRequestHeader) e enviar dados ao servidor.
HEADERS_RECEIVED	2	Parte da resposta de uma requisição já foi recebida e todos os cabeçalhos da resposta já estão disponíveis.
LOADING	3	O corpo da resposta está sendo recebida.
DONE	4	Toda a resposta foi recebida ou algo de errado ocorreu.

Tabela 1 - Etapas, valores e significado do atributo readyState da instância do objeto XMLHttpRequest.
Fonte: Autoria Própria