Trabalhando Requisições AJAX Com jQuery

Além de design profissional a web 2.0 também é feita de requisições AJAX. Popularizadas no início dos anos 2000, carregar apenas as informações requisitadas ao invés da página inteira já é um padrão no desenvolvimento.

Surgem atualmente críticas à técnica, apontando falhas na navegabilidade, dificuldade de salvar nos favoritos e utilizar o botão ‘voltar’ do navegador. Obviamente já existem soluções para estas questões.

Os frameworks javascript facilitaram o nosso trabalho disponibilizando funções que fazem a parte complicada e pedem apenas informações básicas. E de bônus podemos adicionar com tranqüilidade animações enquanto a informação é carregada.

O jQuery oferece uma gama de funções para trabalhar as requisições AJAX. Veremos neste tutorial desde a função $.ajax() que oferece controle total sobre as requisições, até o $.getJSON(), específico para trabalhar com dados formatados no padrão JSON.

Quando trabalhamos com AJAX, utilizamos um objeto nativo dos navegadores que permite a comunicação assíncrona com o servidor. Deixe-me apresentá-lo.

Objeto XMLHttpRequest

O objeto utilizado no AJAX é o XMLHttpRequest, manipulado através de javascript e que efetua a comunicação com o servidor através de requisições HTTP.

É um objeto nativo padronizado nos navegadores atuais, mas implementado como controle ActiveX nas versões antigas do Internet Explorer, isto é 5 e 6. Isso significa que antes de criá-lo é necessário fazer uma verificação.

Os métodos disponíveis são apenas dois, open() para abrir a requisição e send() para enviar os dados. E para receber, a propriedade é a ResponseXML.

Toda a comunicação e verificação é feita pela função do jQuery, precisamos apenas informar os dados. Sendo assim, vamos à primeira função.

$.ajax()

É a função que mais oferece funcionalidades e devido a isso exige um pouco mais de estudo para ser compreendida. E todas as funções mais específicas que serão apresentadas adiante utilizam esta função para iniciar as requisições.

Para haver a requisição, você precisa informar um seletor que vai dar início à execução, o endereço do arquivo que contém os dados que serão retornados, o tipo de dado retornado e o que será feito com ele.

Vejamos um exemplo:

$(function(){

$('#enviar').click(function(){

    $.ajax({

      type: 'post',

      data: 'nome=Usuario&email=usuario@servidor.com',

      url:'dados.php',

      success: function(retorno){

        $('#resposta').html(retorno);  

      }

       })

})

})

Quando o botão enviar do formulário for clicado, será iniciada a requisição. Utilizando o método POST, que é mais seguro para dados sensíveis, sem seguida enviamos a dupla variável/valor para o arquivo ‘dados.php’. Havendo sucesso na requisição as informações retornadas pelo arquivo serão mostradas em uma div.

Não chega a ser tão complicada quanto eu disse né?

Configurações

Vejamos agora as opções disponíveis:

• asinc – Como a requisição é feita com AJAX, ela é assíncrona. Se você quer sincronizar a requisição deve setar true para esta variável. Mas aviso que pode causar instabilidade na aplicação.
• beforeSend – Para alterar o cabeçalho da requisição ou realizar operações antes do envio da requisição, utilize esta função.
• cache – As páginas requisitas via ajax(), são armazenadas pelo navegador para agilizar o processo. Se você não quer que a página fique em cache, atribuía false.
• complete – Completando a requisição, esta função define o que deve ser feito. Vem depois das funções success e error.
• contentType – define o myme type da requisição. O padrão é application/x-ww-form-urlencoded. Que é o myme type enviado quando submetemos formulários.
• data – Os dados que serão passados para o arquivo definido em url. O formato deve ser variável/valor e se você não deixar nesta formatação a função formatará automaticamente.
• dataFilter – Para garantir que os dados retornados estão nas diretrizes esperadas.
• dataType – Você define qual o tipo de dado a ser retornado pela requisição. Os valores possíveis são: xml, html, json, sjonp, script e text. Configurando esta opção você permite uma avaliação dos dados que são retornados. Se esta opção for omitida a função identifica o tipo de dado, mas não avalia.
• error – Função que entra em ação caso a requisição retorne erro.
• global – Indica se os eventos manipuladores definidos em .ajaxSend() e .ajaxError() valerão na requisição atual. Por padrão esta setado para true.
• ifModified – se você quer que uma requisição seja retornada somente se o conteúdo dele mudou em relação à última requisição, configure esta variável para true.
• processData – Esta variável é configurada para processar e transformar as informações passadas para o padrão application/x-www-form-urlencoded. Se por algum motivo você não quer esta formatação, como mandar no formato xml para o servidor, atribua false para esta variável.
• password e username– senha e usuário a serem utilizados em caso de autenticação HTTP.
• successs – a requisição retornando sucesso, é executada esta função, que recebe os dados enviados pelo arquivo.
• timeout – Se você quer limitar o tempo para a execução da requisição, defina um valor em milisegundos. Não retornando sucesso dentro do tempo definido, uma mensagem de erro, configurada por você na função error, será mostrada.
• type – O método usado para a requisição. Aceita GET ou POST. O padrão é GET.
• url – Endereço do arquivo que receberá a requisição

Existem outras configurações mais intrincadas, mas só de ler esta acima acredito que você já esteja satisfeito.

Fazendo Uma Requisição

Vamos então a um exemplo aplicado do que vimos acima.

  $.ajax({

    url : 'dados.php',

    type : 'post',

    data : {'nome':'Usuario', 'email': 'usuario@servidor.com'},

    dataType: 'html',

    username: 'root',

    password: '123456',

    beforeSend: function(){

      $('#carregando').fadeIn();  

    },

    timeout: 3000,    

    success: function(retorno){

      $('#resposta').html(retorno);

    },

    error: function(erro){

      $('#resposta').html(erro);

    }       

  })

Antes que eu comece a explicação e mesmo que você não seja fera em inglês, tente entender o que esta sendo feito. É possível entender tranquilamente certo? Mesmo assim vale a pena uma pequena explanação.

Iniciada a função, passamos o nome do arquivo que receberá as informações, o tipo de requisição e os dados. Um parênteses aqui. O objeto data aceita o par variável/valor já encodado com os símbolos (& e =) ou como apresentado acima. Nesse caso os dados são formatados antes de serem enviados. E fica mais organizado. Aconselho.

Em seguida definimos que os dados retornados serão HTML e informamos um usuário e senha (no exemplo o servidor exige autenticação). Antes de enviar, informamos ao usuário o que esta acontecendo tornando visível a div com uma animação de carregamento.

Em um último ajuste, é definido que a requisição deve durar no máximo três segundos (3000 milisegundos). Se este tempo for ultrapassado, a função error entra em ação e apresenta uma mensagem descrevendo o erro.

Tudo acertado e a requisição sendo um sucesso, com retorno de informação, a div ‘#resposta’ recebe os dados.

$.post() e $.get()

Existem funções derivadas da $.ajax() que são mais fáceis de utilizar e não oferecem tantas opções de configuração.

A função $.post() é utilizada para requisições onde as informações são mais sensíveis e de forma alguma são apresentadas na barra de endereço do navegador.A sintaxe é a seguinte:

jQuery.post( url, [data], [callback], [type] )

Entre parênteses informamos o endereço da página que receberá os dados, os dados em si, o que acontece se a operação for um sucesso e finalmente, qual o formato dos dados retornados.

Um exemplo:

$.post("envia.php",{nome: nome, email:email, msg:msg},

  function(retorno){

    $(‘#resposta’).html(retorno);

  }, “html”);

O formato dos dados enviados, pode ser como o apresentado {nome:nome} e também uma array {‘nomes[]’: [“usuario01”, “usuario02”]}. Em seguida é definido qual a natureza dos dados retornados, no caso HTML.

Para utilizar o $.get(), pasta substituir a palavra post por get no exemplo acima. A diferença reside somente na utilização. Se forem dados não sensíveis, pode utilizar o $.get(), caso contrário, o $.post().

load()

A forma mais simples para carregar os dados de outra página.

$(‘#noticia’).load(‘noticia.php’);

Dispensa explicações. Então vamos à sintaxe que aceita alguns parâmetros:

jQuery.load(url, [data], [callback] )

O endereço da página a ser carregada, variável/valor, se for necessário, e função a ser executada quando a operação for completada. Por padrão as requisições são GET.

Uma opção interessante desta função é que você pode escolher parte a página que será carregada. Pode ser um id ou um elemento HTML

$(‘#resposta’).load(‘noticia.php #titulo’);

$(‘#resposta’).load(‘noticia.php h1);

$.getJSON()

Expecialmente criada para trabalhar com dados formatados no padrão JSON, não é diferente das outras funções AJAX. É um atalho.

jQuery.getJSON( url, [data], [callback] )

O primeiro parâmetro é o endereço da página que proverá os dados. O segundo envia as variáveis para serem tratadas pela página e por último é definido o que acontece se a requisição for um sucesso.

  $.getJSON("busca_noticia.php",{id:id}, function(info){

    var titulo = info.titulo;

    var img = info.img;

    var texto = produto.texto;

    var conteudo = img + titulo + texto;

    $('.global-div').append(conteudo).fadeIn(2000);

    })

  })

Quero que você observe no exemplo acima, como os dados são retornados para a função. O mapa de dados info, vem com as informações no formato {titulo: ‘Titulo not&iacutecia’}. Para pegar este valor usamos ‘info.valor’.

Conclusão

Existem funções para todos os propósitos.Contudo, tenha cuidado para não exagerar na utilização do AJAX, cuidando sempre para manter o usuário bem informado sobre o que esta acontecendo. Outro aspecto importante é permitir a utilização do botão ‘voltar’ e ‘adicionar aos favoritos’ do navegador.