Introdução ao AJAX com JQuery

09/05/2009

Rodrigo Aramburu

Para quem já trabalha com internet há algum tempo esta é uma sigla bastante comum. Mas o que seria exatamente AJAX?

Para começar vamos esclarecer que AJAX não é uma tecnologia e sim uma metodologia que utiliza tecnologias não tão novas assim como XML e Javascript para fazer requisições assíncronas ao servidor e com as informações retornadas modificar a página já carregada utilizando DOM para modificar-la sem recarregar todo conteúdo novamente. E com isso economizar no tráfego de internet e melhorar a experiência do usuário.

Primeiramente vejamos como uma página simples é carregada.

1 . O usuário digita um URL no campo endereço aperta enter e o navegador envia uma requisição normalmente do tipo GET para o servidor que retorna para o navegador o conteúdo que é exibido.

2. O usuário clica em um link da página então o navegador faz outra requisição ao servidor que envia todo o conteúdo da nova página novamente.

Requisição ajax

Se pensarmos um pouco, muito conteúdo é repetido é baixado quando navegamos entre as página de um mesmo site, como topo, menus, rodapés etc.

Com base nisso, porque não carregar somente o conteúdo que mudou a cada requisição, sem mexer no resto do conteúdo da página? Isto é a base do AJAX.

Quando começou a ser utilizado a o retorno do servidor era feito em XML (por isso o X da sigla) mas com o passar do tempo passou a se chamar AJAX toda requisição assíncrona ao servidor Web.

Bom para entendermos como fazer uma requisição assíncrona precisamos conhecer 2 tipos de requisição que o protocolo HTTP aceita:

GET: É o método mais comum: solicita algum recurso como um arquivo ou um script (qualquer dado que estiver identificado pelo URI) por meio do protocolo HTTP. O método GET é reconhecido por todos os servidores.

POST: Envia dados para serem processados (por exemplo, dados de um formulário HTML) para o recurso especificado. Os dados são incluídos no corpo do comando.

Bom vamos agora ver um pequeno exemplo de como fazer requisições assíncronas e carregar o conteúdo dentro de um div utilizando a JQuery.

HTML Principal

<div id="carregando">Carregando</div>

<h1>Cabeçalho</h1>

<a href="conteudo1.php">Conteudo 1</a>
<a href="conteudo2.php">Conteudo 2</a>
<a href="conteudo3.php">Conteudo 3</a>
<a href="conteudo4.php">Conteudo 4</a>

<div id="conteudo"></div>

Como vimos não é nada diferente do que conhecemos, também temos os arquivos com o conteúdo que irá dentro do div #conteudo:

conteudo1.php

<h1> Conteudo 1</h1>
<p>Donec scelerisque aliquet nunc id mattis. Aliquam auctor bibendum massa at dapibus. Suspendisse ante metus, ornare vitae venenatis vitae, posuere sit amet risus. Nam lacus orci, placerat ut tincidunt nec, tincidunt mollis nisl? Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse id arcu sed urna tincidunt semper. Mauris eu mauris nec est euismod dapibus. Suspendisse imperdiet est id purus placerat consectetur. Curabitur interdum ipsum vitae lacus tincidunt nec elementum nunc consectetur. Etiam dapibus felis non nisl tempor lobortis. Mauris commodo varius ligula eget posuere. Suspendisse ligula arcu, tincidunt dictum varius in, bibendum in purus. Maecenas faucibus, lorem vel fermentum vehicula, dui magna dignissim mauris, viverra egestas magna eros eu lorem. Donec facilisis felis suscipit dui blandit eget commodo erat feugiat. Proin eget diam risus.</p>

conteudo2.php

<h2> Conteudo 2</h2>
<p>Nullam non metus risus, in congue velit. Mauris vitae est massa! Nunc suscipit iaculis varius. Suspendisse eros neque, consectetur ut tincidunt sed, placerat eget ipsum? Phasellus eget mauris libero. Donec elit nunc, varius nec auctor vitae, dapibus non turpis. Donec cursus malesuada quam, id accumsan ante imperdiet ac. Donec purus lorem, fringilla fermentum tempus a, porta quis velit. Morbi quis arcu magna, in ultrices neque? Nullam molestie ultricies nibh placerat varius?</p>

conteudo3.php

<h3> Conteudo 3</h3>
<p>Vestibulum eget tellus eros. Mauris et ante id diam malesuada dignissim. Nam vel sem pulvinar velit tincidunt sodales id et ipsum. Cras magna turpis; egestas non dignissim id; malesuada vel velit! Vivamus libero lorem; congue ut auctor sed; rhoncus mattis magna. Sed eget purus ac ante feugiat laoreet! Aliquam erat volutpat. Duis eu nisi ac metus interdum lobortis eget vitae enim. Nunc adipiscing accumsan magna, at rutrum tortor condimentum ac. Sed lobortis adipiscing erat, faucibus blandit odio mollis in. Integer ipsum justo, varius ac malesuada in, laoreet vitae lacus. Donec varius mauris nec dui tristique aliquet. Donec eros arcu, tristique eget fringilla sit amet, feugiat vel leo. Ut elit justo, elementum ut convallis in, consequat in eros. Proin a leo sed dolor aliquam ultrices.</p>

conteudo4.php

<h4> Conteudo 4</h4>
<p>Cras porta, tellus eu elementum pulvinar, tellus nulla tempus neque, ac posuere sem sem varius quam? Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse lobortis feugiat ante interdum facilisis. Proin ante velit, congue vel lobortis a, commodo id risus. Ut sapien turpis, convallis condimentum suscipit in, imperdiet ut ante. Nullam molestie cursus leo, quis luctus risus bibendum quis? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse lacus nulla; tincidunt consequat rhoncus sed, suscipit sit amet tellus. Fusce faucibus, justo quis mollis volutpat, ligula est sodales dui; eu dictum ante urna vitae ipsum. Vivamus elementum leo et dui viverra blandit. Nunc ac blandit tellus. Sed dui nibh, porttitor nec sagittis quis, commodo tincidunt libero.</p>

Bom com os arquivos HTML prontos vamos ao que interessa, o código Javascript que é responsável pelas requisições assíncronas pelo método GET:

  $(document).ready(function(){
      $("a").each(function() {
           var href = $(this).attr('href');
           $(this).attr('href','javascript:void(0)');
           $(this).click(function(){
                $('#conteudo').html("");
       	    	$("#carregando").show('slow');
                 $.get( href , function(data){
                        $('#conteudo').html(data);
                        $("#carregando").hide('slow');
                 });
                return null;
        });
     });
  });

Na linha 2 utilizamos o método each que para cada elemento encontrado pelo seletor, no caso “a”(links), ele vai executar a função definida que captura a URL do atributo href do link e armazena em uma variável (linha 3), seta o atributo href para não apontar mais para nenhum link(linha 4), adiciona o evento click (linha 5), dentro do evento click limpamos o div #conteudo (linha 6), mostramos a mensagem de carregando (linha 7) e utilizamos o método $.get(url,function(data){}) que realmente faz a mágica( linha 8).

O método $.get(url,function(data){}) faz a requisição assíncrona com o servidor e passa para a função passada por parâmetro o retorno do servidor na variável data.

Após receber o retorno do servidor jogamos este retorno dentro da div #conteudo(linha 9) e escondemos a mensagem de carregando (linha 10).

Para ver o exemplo funcionando clique aqui

Veremos agora como criar um formulário utilizando AJAX pelo método POST:

HTML

<div id="carregando">Carregando</div>
<div id="mensagem"></div>

<form action="processapost.php" method="post">

    <label for="nome">Nome:</label>
    <input type="text" name="nome" />

    <label for="email">E-mail</label>
    <input type="text" name="email" />

    <input type="submit" value="Enviar" />
</form>

Script que processa a requisição POST (processapost.php)

        Dados enviados:<br /><br />
       <?php echo "Nome: ".$_POST['nome']; ?>
       <br />
       <?php echo "E-mail: ".$_POST['email']; ?>

E o código Javascript:

  $(document).ready(function(){
        var action = $('form').attr('action');
        $('form').attr('action','javascript:void(0);');
        $('form').submit(function(){
       	    	$("#carregando").show('slow');

                 $.post(action ,jQuery("form").serialize(),  function(data){
                        $('#mensagem').html(data);
                        $('#mensagem').show();
                        $("#carregando").hide('slow');
                 });
                return null;
        });

	});

Na linha 2 capturamos a URL que irá processar e retornar os valores do nosso formulário e depois (linha 3) configuramos para que o formulário não envie a requisição como faria normalmente, e configuramos o evento submit (linha 4) que é ativado quando o formulário é enviado.

Quando isto acontecer ele irá mostrar a mensagem de carregando (linha 5) e utilizamos o método $.post(url ,dados, function(data)){} que faz uma requisição via POST para url, enviando um array dados e após executa a função recebendo por parâmetro data com o retorno do servidor. Na linha 8 inserimos o retorno da requisição na div #mensagem, deixamos visível esta div e por fim escondemos a mensagem de carregando(linha 10).

Os dados enviados são passados na forma de array no fomato:

 { var1: "valor1", var2: "valor2" }

ou na forma de string:

 var1=valor&var2=valor

Como vimos no exemplo utilizamos jQuery(“form”).serialize(), que converte um conjunto de inputs em uma string no segundo formato.

Para ver o exemplo funcionando clique aqui

Este foi o tão aguardado artigo sobre AJAX com JQuery, os exemplos são bastante simples mas com um pouco de criatividade dá para fazer coisas bem legais.

Até mais “Vida longa e prospera!”

ajax, Javascript, JQuery, Web