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ícia’}. 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.
