Jonas Martinez – Web Developer

Algumas pessoas me pediram para explicar como funciona o Ajax com o jQuery, então vou explicar!

Para quem não sabe, Ajax nada mais é do que uma técnica que utiliza um componente do browser para requisições dinâmicas.

Com a popularização, para muitos, Ajax é uma linguagem, o que de fato não é verdade.

Ajax tem esse nome pois significa Asynchronous Javascript And XML.

Bom  vamos ao que interessa!

Existem 2 (na verdade vários) métodos de se fazer uma requisição em Ajax pelo jQuery, por GET e POST.

A mais comum é GET pois é mais simples e prático, muito comum para poucos parâmetros.

Vou explicar como utilizar Ajax com jQuery com as funções $.get, $.post e $.load

Vamos supor que você deseja carregar uma página html em um div quando o usuário clicar em um botão, como ficaria?

Vejamos:

1
2
3
4
5
6
7

$(document).ready(function (){ //diz ao jQuery executar as instruções quando carregar a página
    $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao
        $.get('pagina.html', function(data) { //chamada em Ajax para o método GET
            $('#idDoDiv').html(data); //insere o valor de data no div #idDoDiv
        });
    });
});

Desta forma, carregando o conteúdo de pagina.html no div #idDoDiv.

Vamos melhorar esse código adicionando variáveis a ele, tornando dinâmico nosso carregamento, para isso passamos um objeto JavaScript no segundo parâmetro. Para quem não conhece, um objeto “anônimo” no JavaScript é bem simples, basta usar { variavel: ‘valor’ }, para mais de um { varivel1: ‘valor1′, variavel2: ‘valor2′ }

1
2
3
4
5
6
7

$(document).ready(function (){ //diz ao jQuery executar as instruções quando carregar a página
    $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao
        $.get('pagina.html', { nome:'Jonas', sobrenome:'Martinez' }, function(data) { //chamada em Ajax para o método GET
            $('#idDoDiv').html(data); //insere o valor de data no div #idDoDiv
        });
    });
});

Desta forma, ficará assim ‘pagina.html?nome=Jonas&sobrenome=Martinez’

Bem simples não?
Uma das vantagens do jQuery é que você pode carregar não só conteúdo HTML, mas tbm conteudo JSON, XML e até mesmo JavaScript!
Isso cria uma gama de possibilidades enormes, vamos imaginar que queremos utilizar um request JSON.

1
2
3
4
5
6
7

$(document).ready(function (){ //diz ao jQuery executar as instruções quando carregar a página
    $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao
        $.get('pagina.html', { nome:'Jonas', sobrenome:'Martinez' }, function(data) { //chamada em Ajax para o método GET
            $('#idDoDiv').html(data.variavel); //insere o valor da variavel 'variavel' de data no div #idDoDiv
        }, 'json');
    });
});

Também podemos usar funções dedicadas para esses request, que seriam $.getScript e $.getJSON.

Vamos ao método POST?
Muito simples também, o que muda é o nome da função e que o post retorna um status sobre a requisição. Utilizado muito quando precisamos enviar muitos dados como formulários por exemplo. No caso do POST a função de callback recebe 2 parâmetros, um é o dado em si e o outro é o status do request.

Vejamos:

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function (){ //diz ao jQuery executar as instruções quando carregar a página
    $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao
        $.post('pagina.php', { nome:'Jonas', sobrenome:'Martinez' }, function(data, textStatus) { //chamada em Ajax para o método POST
            if (textStatus == 'success') { //verifica se o status está tudo ok!
               $('#idDoDiv').html(data); //insere o valor de data no div #idDoDiv
            } else {
                alert('Erro no request!'); //mostra erro caso não tenha sido bem sucedido
            }
        });
    });
});

Também podemos usar modos especificos de carregamento além do padrão HTML, assim como no GET podemos colocar como ultimo parâmetro da função os valores, json, jsonp, xml, html, text e script, porém não temos funções especificas para isso como $.getJSON().

Existe ainda a função “load” que facilita mais ainda! Confira!

1
2
3
4
5

$(document).ready(function (){ //diz ao jQuery executar as instruções quando carregar a página
    $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao
        $('#idDoDiv').load("pagina.html"); //chamada em Ajax
    });
});

Simples!

Segue em anexo um exemplo do ajax em GET. Qualquer dúvida deixe seu comentário!

Anexo: jquery_ajax.zip

Atenção: dúvida não é “faça pra mim”