Desenvolvimento - Javascript

Ajax Básico: Introdução

Veja neste artigo uma introdução sobre o que é Ajax, qual a sua utilização e como ele se relaciona com outras tecnologias. Além disso, será visto como é a sua implementação e quais as suas vantagens e desvantagens.

por Higor Medeiros


Introdução ao Ajax

O Ajax (Asynchronous JavaScript and XML) é uma tecnologia muito utilizada atualmente e que está em bastante evidência porque ela torna seus aplicativos muito mais dinâmicos e com maiores capacidades de respostas. O Ajax basicamente utiliza JavaScript, XML e HTML dinâmica. Nota-se que Ajax não é uma linguagem de programação, mas uma nova forma de usar os padrões existentes.

No Ajax o Javascript faz uma solicitação ao servidores, no servidor nada muda com a utilização de Ajax, ele continua respondendo cada solicitação exatamente como fazia antigamente quando não se usava Ajax. Porém a resposta do servidor agora retornará apenas os dados que a página precisa sem qualquer marcação ou apresentação. Uma característica que será notada pelo usuário que está acessando a página que está utilizando Ajax é que grande parte da página não será alterada, mas sim apenas partes que necessitarão de atualização. Antigamente a página inteira era carrega, porém com Ajax esse paradigma muda.

Características do Ajax

Uma característica extremamente importante e útil do Ajax é que as solicitações são assíncronas. Isso quer dizer que o Javascript de um aplicativo Ajax se comunica assincronamente com o servidor, ou seja, apesar do código Javascript fazer uma solicitação ao servidor, o usuário da página pode continuar navegando na página clicando em botões ou até mesmo preenchendo um formulário. Esta é mais uma mágica dos aplicativos Ajax. Portanto, como foi dito anteriormente o Ajax além de permitir que o usuário apenas tenha parte da página carregada (não necessitando assim recarregar toda a página após uma solicitação) ainda pode navegar tranquilamente pela sua página enquanto a solicitação ao servidor é feita.

Espera-se que tenha ficado claro ao leitor que o modelo de solicitação e resposta ainda é utilizado no Ajax, o que muda é que agora não temos um formulário inteiro sendo enviado ao servidor e o aguardo da sua resposta. Tem-se um modelo muito mais dinâmico com Ajax.

Para concluir este tópico será exposto abaixo as três principais características do Ajax que deve-se obrigatoriamente saber:

  • Aplicativos assíncronos, como é o caso de um aplicativo Ajax, fazem solicitações usando um objeto Javascript e não um envio de formulário.
  • O navegador Web irá manipular as suas solicitações e respostas e não o seu código Javascript.
  • Uma vez que o navegador Web receber uma resposta a uma solicitação assíncrona, ele retornará a chamada para o seu código Javascript com a resposta do servidor.

Implementando Ajax

Para começar a colocar Ajax nas aplicações é bastante simples. Inicialmente precisamos criar uma função Javascript que cria um novo objeto para fazer solicitações ao servidor. Aqui devemos atentar para o fato que diferentes browsers podem fazer de diferentes maneiras. Segue abaixo a criação da função que será incorporada na página HTML de onde partirá a solicitação:

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>

Inicialmente declara-se a variável request como nula, essa variável será responsável por armazenar o objeto de solicitação. Na atribuição ao objeto request no comando “request = new XMLHttpRequest()” tem-se a tentativa da criação do objeto de solicitação. XMLHttpRequest é o tipo do objeto solicitação. Repara-se que nos comandos “request = new ActiveXObject("Msxml2.XMLHTTP")” e “request = new ActiveXObject("Microsoft.XMLHTTP");” há a tentativa também de criar o objeto solicitação, mas de uma maneira que funcione também no Internet Explorer. Se tudo der errado o comando “request = null” dentro do bloco “catch (failed)” será executado garantindo que a variável da solicitação continue nulo. Caso seja nulo uma mensagem será disparada no browser do usuário através do comando “alert“.

Nota-se que agora que já possuímos um objeto de solicitação estamos prontos para partir para a próxima etapa que é a função Javascript responsável por solicitar ao servidor um dado em especial.

O código abaixo exemplifica a próxima etapa:

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>

A função acima é bastante simples, primeiramente ela chama a função “createRequest()” para criar um novo objeto de solicitação. Depois, abaixo no comando “var url = "getInformacaoQualquerDoServidor-ajax.php"” tem-se a configuração da URL que será necessário para se conectar e obter assim os dados necessários. No comando “request.open("GET", url, true);” tem-se a inicialização da conexão e a informação ao objeto de solicitação de como se conectar ao servidor. Em “request.onreadystatechange = atualizaPagina;” tem-se a configuração dos valores na página, a função “atualizaPagina” será vista abaixo. Por fim no comando “request.send(null);” apenas estamos dizendo que nenhum dado está sendo enviado na solicitação. O script nesse caso não precisará de nenhum dado, apenas retornará o resultado esperado.

É importante salientar novamente que o script PHP acima “getInformacaoQualquerDoServidor-ajax.php” deve retornar unicamente o dado bruto e não mais um HTML como antigamente.

Agora basta chamar a função criada a partir do seu HTML. Isso poderia ser feito, por exemplo, utilizando um botão HTML, como por exemplo:

Listagem 3: Chamando a função getInformacaoQualquer().

   <form method="GET">
    <input value="Mostre a informação" type="button"
           onClick="getInformacaoQualquer();" />
   </form>

Um simples manipulador de eventos “onClick” do botão “button” foi utilizado para chamar a função Javascript anteriormente criada para fazer a solicitação ao servidor.

Agora a última etapa seria atualizar a página Web com as informações que vieram do servidor. Para isso a função “atualizaPagina” deverá ser configurada para fazer este procedimento. Antes, salienta-se que nesse momento entra uma figura importante no cenário do uso do Ajax, é o navegador. O navegador é o grande responsável por transformar o seu HTML em uma página com figuras, botões, texto, etc. Além disso, é o navegador Web que manipula as solicitações feitas a servidores Web e resolve o que fazer com as respostas que ele receberá desses servidores. Portanto, é o navegador que faz todo o trabalho “sujo” de converter o código para algo que o computador realmente entenda. Assim, ao fazer a conexão com o servidor é o navegador que fará a solicitação e guardará a resposta por debaixo dos panos.

Com o comando mostrado anteriormente “request.onreadystatechange = atualizaPagina;” temos a indicação que assim que o navegador receber a resposta do servidor ele chamará a função “atualizaPagina”. Isso acontece porque, lembre-se o que foi explicado anteriormente, a comunicação com o servidor em aplicativos Ajax é assíncrona, portanto não se sabe quando a resposta chegará. Cabe ao navegador se responsabilizar por isso, pois é ele quem sabe quando a resposta efetivamente chegará do servidor.

Agora o que o desenvolvedor tem a fazer é manipular essa resposta que veio do servidor. Para fazer isso, o código abaixo dá uma breve ilustração:

Listagem 3: Manipulando a resposta vindo do servidor.

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

A função acima exemplifica o uso da propriedade responseText do objeto de solicitação, essa propriedade contém a resposta retornada pelo servidor. Veja que no comando “var respostaDoServidor = request.responseText” captura-se a resposta do servidor e coloca-se essa resposta em uma variável qualquer. Agora que temos a resposta do servidor, basta na função acima atribuir para algum lugar da sua página este novo valor trazido do servidor, para fazer isso o desenvolvedor pode usar DOM (Document Object Model) onde um código Javascript pode utilizar-se dele para atualizar valores em uma página dinamicamente. A propriedade “readyState” acima é quem armazena o estado de prontidão atual, quando a propriedade for 4 temos um indicativo de que o servidor terá concluído a solicitação. Portanto, todo o código abaixo da condicional “if (request.readyState == 4)” será executado quando a solicitação ao servidor for totalmente concluída, ou seja, quando uma resposta for trazida do servidor.

Vantagens e Desvantagens do Uso do Ajax

Como vantagens de se usar Ajax temos o aumento de velocidade de um site, melhor uso por parte do usuário e flexibilidade para escolha da linguagem do lado servidor.

Entre as desvantagens estão a utilização de frameworks que podem impossibilitar a utilização de outros frameworks, botões de avançar e voltar do navegador que não voltará ao conteúdo anterior, dificuldade na manutenção do site, pois ao utilizar muitos Ajax por toda a página pode acabar poluindo o código com diversas solicitações e tratamentos diferentes.

Conclusões

Neste artigo abordou-se o que é Ajax, como é o seu funcionamento e como ele se relaciona com outras tecnologias para atingir o seu objetivo, como é a sua implementação básica e quais são as suas vantagens e desvantagens. Trarei mais artigos sobre Ajax devido a grande quantidade de dúvidas e curiosidades que ainda existem por parte dos desenvolvedores front-end e não esqueçam de me escreverem se tiverem dúvidas ou sugestões de artigos.

Bibliografia

Brett McLaughlin. Head Rush Ajax. O‘Reilly, 2006.

Ajax Tutorial disponível em http://www.w3schools.com/ajax/default.asp

Cursos sobre Ajax:

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.