Desenvolvimento - Javascript

Ajax Básico: Estado de Prontidão e Código de Status

Veja neste artigo o que é estado de prontidão e código de status para aplicações Ajax, como se dá o seu funcionamento, sua implementação básica e como ambos se relacionam.

por Higor Medeiros


Introdução ao Ajax

O Ajax (Asynchronous JavaScript and XML) permite que os aplicativos se tornem muito mais dinâmicos e com maiores capacidades de respostas. Todas essas vantagens são executadas usando-se um conjunto de tecnologias como JavaScript, XML e HTML dinâmica. Dessa forma Ajax não é compreendido como uma linguagem mas sim uma tecnologia que utiliza-se de padrões existentes.

O Ajax basicamente faz solicitações ao servidor que responde a essa solicitação, sendo que o servidor apenas retorna dados brutos e não mais uma página inteira para ser exibida no navegador do usuário. Dessa forma o Ajax consegue carregar apenas partes de uma página e não mais carregar uma página inteira.

Uma das grandes vantagens para conhecer o funcionamento interno do Ajax é saber como ocorre essa solicitação e resposta entre o navegador e o servidor utilizando-se da tecnologia Ajax. O desenvolvedor que entende esse funcionamento poderá entender melhor a tecnologia e prever certos imprevistos que podem ocorrer. Com isso podem-se evitar falhas que por ventura poderiam parar o seu aplicativo ou causar aborrecimentos ao usuário que está cada vez mais exigente. Além disso, pode-se elaborar caminhos alternativos para contornar certos problemas.

Estado de Prontidão no Ajax

Para explicar melhor o funcionamento do estado de prontidão devemos primeiramente analisar os dois códigos Ajax abaixo.

Listagem 1: Exemplo do objeto de solicitação.

<head>
  <script language="javascript" type="text/javascript">
   var request = null;

   function createRequest() {
     try {
       request = new XMLHttpRequest();
     } catch (trymicrosoft) {
       try {
         request = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (othermicrosoft) {
         try {
           request = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (failed) {
           request = null;
         }
       }
     }

     if (request == null)
       alert("Error creating request object!");
   }
  </script>
</head>

Listagem 2: Solicitação ao Servidor.

<head>
  <script language="javascript" type="text/javascript">
   function getInformacaoQualquer() {
     createRequest();
     var url = "getInformacaoQualquerDoServidor-ajax.php";
     request.open("GET", url, true);
     request.onreadystatechange = atualizaPagina;
     request.send(null);
  }
  </script>
</head>

Se você não entendeu o que significa esses dois códigos recomenda-se que o leitor leia o artigo sobre o básico de Ajax que está disponível aqui no portal.

No código da listagem 2 observa-se em especial a linha “request.onreadystatechange = atualizaPagina”. Sempre que o navegador receber a resposta do servidor ele chamará essa linha. Dessa forma, o navegador chamará a função que está indicada na propriedade onreadystatechange, ou seja, ele chamará a função “atualizaPagina” que será responsável por pegar as informações que vieram do servidor e disponibilizar na página do cliente. Por exemplo, o seu site poderia estar atualizando notícias na página e assim utiliza-se Ajax para buscar as últimas notícias, após receber do servidor a notícia ele chamará essa função que simplesmente utiliza-se de Javascript para disponibilizar essa notícias na página do usuário.

Abaixo segue como a função “atualizaPagina” é implementada.

Listagem 3: Manipulando a resposta enviada pelo servidor.

  function atualizaPagina() {
    if (request.readyState == 4) {
      var respostaDoServidor = request.responseText;
      //Setar aqui a noticia na pagina
    }
  }

Na função acima pode-se notar a presença da verificação “request.readyState == 4”. Esta linha simplesmente verifica se o estado de prontidão do servidor é igual a 4, ou seja, se a solicitação está completa.

Essa verificação ocorre porque o navegador SEMPRE executará a função de retorno (configurada em onreadystatechange) quando o estado de prontidão de seu objeto de solicitação mudar. O interessante a saber agora é quando esse estado de prontidão muda. Tem-se assim os seguintes estados de prontidão possíveis:

Estado de Prontidão 0: Quando cria-se o objeto de solicitação ele está no estado 0. Para o exemplo anterior é quando a variável request chama open.

Estado de Prontidão 1: Aqui diz-se que está no estado 1 quando a solicitação sabe como e com o que se conectar. Para o exemplo anterior é quando a propriedade onreadystatechange é configurada.

Estado de Prontidão 2: Nesse estado a solicitação está em progresso, portanto o servidor já recebeu a solicitação no script e esse programa responde essa solicitação.

Estado de Prontidão 3: No estado 3 os dados estão sendo baixados no objeto de solicitação, mas ainda não estão prontos para serem usados no código. O navegador ainda está capturando a resposta do servidor.

Estado de Prontidão 4: No estado 4 a resposta do servidor está concluída. Agora tem-se todos os dados da resposta disponíveis na propriedade responseText do objeto de solicitação. Nesse instante a propriedade onreadystatechange é executada e já pode usar os dados do servidor.

Uma informação muito importante que o desenvolvedor deve ter em mente é que a função “atualizaPagina” configurada na propriedade onreadystatechange será sempre executada quando o estado de prontidão muda, por isso que a verificação do estado de prontidão é realizada na função. Portanto, essa função será executada mais de uma vez, por exemplo quando o estado de prontidão mudar de 1 para 2 ou de 3 para 4, etc. Porém o navegador somente terá os dados (que o desenvolvedor possa realmente usar na página) quando o estado de prontidão for 4, caso contrário iremos acessar ou atualizar a página com dados inválidos ou ausentes.

Vale salientar que é sempre o navegador que chama a função “atualizaPagina”, isto ocorre porque, na comunicação entre o navegador e o servidor, o servidor sempre informa ao navegador que ele concluiu a solicitação, e assim o navegador por sua vez sabe o que fazer agora, como por exemplo chamar a função “atualizaPagina” devido a mudança do estado de prontidão. Entre outras tarefas do navegador está a de inserir a resposta do servidor na propriedade responseText após o estado de prontidão ser igual a 4. Isto dá a possibilidade de se buscar a resposta retornada pelo servidor que é o que interessa nesse caso.

Código de Status do Ajax

Outro retorno importante do servidor é o código de Status. O código de Status é um código gerado pelo servidor onde o servidor informa se encontrou o recurso de solicitação e o que esse recurso retornou ao acessa-lo.

É sempre importante lembrar do caminho percorrido entre o navegador e o servidor. O navegador cria um objeto de solicitação e envia uma solicitação ao servidor informando o script que ele deve executar. O servidor por sua vez tenta localizar esse script na url da solicitação passada pelo navegador. Às vezes o servidor não consegue encontrar esse programa ou tem problemas para acessar o recurso solicitado. Assim, o servidor retorna um código de Status informando a situação atual.

Entre os Status mais importantes tem-se o 404 que significa que o servidor não conseguiu encontrar um recurso e o código 200 indicando que não houve nenhum problema ao acessar este recurso.

Outros Status existente são:

  • Código 400: Bad Request
  • Código 401 Unauthorized
  • Código 403 Forbidden
  • Código 405 Method Not Allowed
  • Código 406 Not Acceptable
  • Código 408 Request Timeout

Para saber outros códigos de Status e o significado de cada veja o link disponibilizado nas referência bibliográficas.

Para verificar o código de status no seu código basta adicionar o comando “if (request.status == 200)” como pode ser exemplificado abaixo:

Listagem 4: Verificando o status retornado pelo servidor.

  function atualizaPagina() {
    if (request.readyState == 4) {
	if (request.status == 200)
      		var respostaDoServidor = request.responseText;
    }
  }

Assim, o código acima apenas verifica o status retornado pelo servidor que está configurado na variável request.

Estado de Prontidão e Código de Status em Ajax

É sempre interessante nos atentarmos para o fato de que o estado de prontidão e o código de status são coisas diferentes. O estado de prontidão informa se o servidor concluiu o processamento da solicitação. Após saber que a solicitação foi processada com sucesso ainda precisa-se verificar se não ocorreu nenhum erro. Para saber se nenhum erro foi reportado pelo servidor utiliza-se então o código de status. Portanto, para saber se realmente tudo ocorreu bem é preciso verificar tanto o estado de prontidão quando o código de status. Baseando-se nesses dois parâmetros pode-se prever determinadas situações, evitar erros e até mesmo contornar problemas que sejam recorrentes num determinado ambiente. Muitos desenvolvedores não os utilizam por não saberem da sua existência ou simplesmente por não saber como usá-los.

Conclusões

Neste artigo abordou-se o que é estado de prontidão e código de status para aplicações em tecnologia Ajax, além disso procurou-se falar sobre o seu funcionamento, implementação básica e como ambos se relacionam. É muito importante que o desenvolvedor saiba como se dá cada uma dessas etapas. Como foi dito isso poderá poupar muita dor de cabeça daqueles que trabalham com Ajax. Sugestões ou dicas continuem me enviando e-mail, estou atendendo a todas solicitações e respondendo sempre que possível.

Higor Medeiros

Higor Medeiros - Higor Medeiros (higorowen@gmail.com) é aluno da Universidade do Vale do Rio dos Sinos em Ciência da Computação cursando o 4º semestre, onde também trabalha na pesquisa científica na área de inteligência artificial com Processamento de Linguagem Natural, desde 2004. É programador em diversas linguagens, tendo mais experiência em C# onde hoje desenvolve softwares para PLN.