Importante: AJAX só funciona com requisições HTTP. Por este motivo, o tutorial abaixo não irá funcionar caso você esteja tentando rodar a página dos exemplos clicando diretamente nos arquivos HTML. O ideal é criar um servidor local. Apache é uma ótima ideia. Clique aqui para saber mais.
Afinal, o que é AJAX?
AJAX (sigla para Asynchronous Javascript and XML) é um conjunto de técnicas usadas para fazer requisições asíncronas, isto é, que rodam em background sem interferir com a visualização da página.
Requisições síncronas x assíncronas
Toda a web funciona por meio de requisições. A cada link que se abre, o cliente faz uma requisição HTTP ao servidor, e este, por sua vez, retorna uma página HTML. O navegador então se encarrega de atualizar a tela, renderizando o conteúdo recebido.
Esta é uma arquitetura bem simples, e é assim que a maioria dos sites funcionam. A isto damos o nome de requisições síncronas, pois o cliente terá que esperar o servidor responder para realizar qualquer ação dentro da página (a famosa “travadinha”).
Entretanto, imagine se cada ação nossa dentro de um site requisitasse que ele atualizasse a página. Dependendo da aplicação, seria extremamente frustante, tanto para o cliente (pela interrupção abrupta do conteúdo da página) quanto para o servidor (pela carga adicional de ter que reenviar toda a página, e não apenas a resposta da ação requisitada).
O AJAX existe para solucionar esses problemas!
Mãos a obra!
Como dito anteriormente, AJAX é um conjunto de técnicas, e não uma tecnologia específica. Portanto, existem várias implementações diferentes. Neste tutorial, vamos focar no uso do AJAX utilizando a biblioteca jQuery, que parece ser a mais simples e popular.
Não se preocupe caso não saiba jQuery, um dos objetivos desse tutorial também é abordar um pouco dessa tecnologia.
Exemplo a ser utilizado
Para fins didáticos, vamos utilizar uma página web simples que utilize requisições síncronas, e por meio de poucos passos poderemos transformá-la em uma página muito mais dinâmica. O exemplo a ser utilizado é o seguinte:
(Link de download: http://goo.gl/Ju8bnf)
Por favor, não prestem atenção no design do site. :P
Como você já deve ter percebido, essa é uma página que faz requisições síncronas. Para cada novo link é preciso atualizar toda a página. Esse é o primeiro comportamento que iremos mudar.
O primeiro passo é criar um arquivo Javascript e linká-lo a todas as páginas.
O arquivo deve estar localizado no mesmo diretório dos arquivos HTML. Nomeio-o "script.js".
E agora vamos linká-lo às páginas. Além disso, também devemos linkar o jQuery, que, felizmente, está acessível através do seguinte link:
http://code.jquery.com/jquery-latest.min.js
Sendo assim, o header de nossas páginas deve estar assim:
Atenção: A ordem da linkagem importa. Scripts que dependem de outros devem sempre ficar abaixo de suas dependências.
Agora chega de HTML! Vamos nos concentrar no Javascript.
Como dito anteriormente, trabalharemos com AJAX em conjunto com jQuery. Todo código jQuery possuí uma função “main”, por assim dizer, que é chamada quando a página é carregada. A maneira de criá-la é a seguinte:
$(document).ready(function(){
});
Agora precisamos selecionar todos os links das páginas e evitar que eles ajam de maneira padrão, isto é, mandando requisições síncronas. A maneira de fazer isso é a seguinte:
$(document).ready(function(){
$(“a”).click(function(){
return false;
});
});
Explicando o código acima! Primeiro estamos selecionando todos os links (tag “a”), através do jQuery selector, e associando aos objetos encontrados um evento que recebe uma função a ser chamada toda vez que a ação associada a esse evento (neste caso, a ação de clicar) for chamada. Retornando falso, fazemos que a ação que se seguiria após a do evento (ir para a página depois de clicar no link) seja interrompida.
Agora é a hora da mágica. Vamos finalmente utilizar o AJAX!
Utilizar AJAX usando jQuery é incrivelmente fácil. Veja um exemplo:
$.ajax({
type: “GET”,
url: “www.google.com”,
success: function(result) {
console.log(result);
}
});
O exemplo acima irá fazer uma requisição do tipo “GET” à página do Google e caso tenha sucesso irá imprimir no console a página enviada pelo servidor no formato HTML.
O tipo de requisição pode ser qualquer uma das quatro suportadas pelo HTTP: GET, POST, PUT e DELETE. Isso é bastante útil, e já é um indicio que podemos enviar formulários através de AJAX também!
Trazendo o exemplo acima pro nosso código, ele ficaria assim:
$(document).ready(function(){
$("a").click(function(){
$.ajax({
type: "GET",
url: $(this).attr("href"),
success: function(result) {
}
});
return false;
});
});
A novidade é que a url é $(this).attr(“href”). O que isso significa? Isso simplesmente me diz que a url será a mesma url do link que cliquei (o atributo “href”). $(this) é um objeto que aponta para o objeto para o qual o listener está respondendo naquele momento.
Agora vamos nos concentrar na função guardada em “success”. O que queremos que aconteça caso a requisição seja respondida com sucesso? Vamos atualizar a página com esse novo conteúdo!
$(document).ready(function(){
$("a").click(function(){
$.ajax({
type: "GET",
url: $(this).attr("href"),
success: function(result) {
$("body").html(result);
}
});
return false;
});
});
Concentrando-se apenas no código em negrito, o que está sendo feito aqui é simplesmente pegar o resultado da requisição (que é a própria página HTML do link) e colocá-lo no lugar do HTML do
da página atual. Uma simples substituição de conteúdo.Agora, se você rodar a página, verá que ao clicar num link, a URL do navegador não mudará, mesmo embora o conteúdo tenha mudado!
Isso parece ser bem fútil, e é mesmo para esse exemplo, mas as possibilidades são infinitas quando bem utilizado.
Gostaria muito de abordar também o envio de formulários através do AJAX, infelizmente isso foge do escopo esse tutorial, pois iria requerer um conhecimento adicional de CGI.
Mas não se preocupe, no final desta matéria existem alguns apontadores e você pode terminar a implementação em sua linguagem de script favorita!
Perceba que na página de Contatos do exemplo foi propositadamente inserido um formulário. O primeiro passo é fazer algo semelhante ao que fizemos anteriormente, evitar o comportamento padrão, que é síncrono!
$(“form”).submit(function(){
return false;
});
Ao invés de usar “click” no caso dos links, usamos o evento submit, que é ativado toda vez que o formulário é enviado.
E agora para submeter o formulário:
$(“form”).submit(function(){
$.ajax({
type: $(this).attr(“method”),
url: $(this).attr(“action”),
success: function(data) {
}
});
return false;
});
E é isso ai! “type” e “url” estão simplesmente pegando os atributos “method” e “action” do form, respectivamente, para que assim mantenha o mesmo comportamento, só que de maneira assíncrona.
Com isso terminamos este tutorial. AJAX é uma ferramenta poderosíssima que vai muito além do contexto explorado aqui, principalmente quando aliado ao JSON. Recomendo fortemente qualquer um que esteja interessado em desenvolvimento web a continuar aprendendo sobre suas utilizações. Possivelmente essa é a última matéria de Tutoriais no formato atual. Nos encontraremos novamente no novo site! Até lá!
Grupo PET Computação UFCG, 2014. All rights reserved.
