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”

Buenas! Estive um pouco ocupado e não atualizo a muito tempo… bom voltei e hoje vou mostrar como iniciar com o jquery, você já sabe para o que serve e agora vai aprender como usar… uma mão na roda!

O principio básico como já dito, esta no ‘$’, que seria como ‘document.getElementById’ porém claro com muitas vantagens.

Um dos pontos primordiais do jQuery é você “bindar” ou seja, setar ações nos objetos da página no momento que ela carrega.

Consideramos que já baixamos o jQuery, colocamos na pasta ‘js’, renomeamos para jquery.js e já temos a tag de inclusão do jquery na página que seria:

<script src="js/jquery.js" type="text/javascript"></script>

Vamos imaginar que queremos disparar um alert quando passamos o mouse por cima de uma imagem, para isso fariamos:

<script type="text/javascript">
$('#idDaImagem').mouseover(function(){
    alert('Passou o mouse pela imagem!');
});
</script>

Como você pode ver, é muito simples! Porém o ideal é utilizar todos os “binds” (associação de funções a objetos/eventos) logo depois do carregamento da página, isso evita de setar o comando antes do objeto existir no contexto DOM do browser, ou seja, antes do objeto ter sido criado.

Para isso, é muito comum vermos os dois comandos abaixo, que indicam ao jQuery o que fazer quando a página já foi carregada:

$(document).ready(function() {
    //funções, comandos etc
});

e

$().ready(function() {
    //funções, comandos etc
});

Particularmente prefiro o primeiro modo, com o document pois indica o objeto a ser tratado.

Como você já reparou, o jQuery trabalha muito com uma técnica chamada de “closures” ou ainda “funções anonimas” que são funções sem nome usadas principalmente para callbacks, que são funções de retorno, que aplicados ao conceito acima, fica assim (em português ;p)

Quando ‘document’ estiver pronto, execute o callback

No nosso caso o callback é:

function() {
    //funções, comandos etc
}

Ou seja, muitos dos parametros do jQuery são closures.
Um exemplo mais didático, vamos mostrar um alerta de “Página carregada” quando a página carregar, ficaria:

$(document).ready(function() {
    alert('Página carregada!');
});

Bom por enquanto é só! Confira os inúmeros comandos na página oficial do jQuery em http://docs.jquery.com/Main_Page

Qualquer dúvida mande seu comentário!

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

Salve salve!

Se você esteve procurando por um framework em javascript, para te ajudar a lidar com crossbrowser e alguns probleminhas de longaaaaaas chamadas até localizar um objeto, acabou de encontrar, jQuery que tem como slogan “Write less, do more” que em português significa, “Escreva menos, faça mais”.

Com o jQuery é possível fazer animações de estilos CSS, acessar objetos independente do browser e aproveitar os widgets e plugins disponiveis para ele.

Vamos a um exemplo. Imagine que temos um campo de texto, chamado “usuario” e queremos pegar o valor dele…
Em html seria…

1

<input type="text" id="usuario" value="teste">

e em JavaScript…

1
2

var obj = document.getElementById('usuario');
alert(obj.value);

Agora… vamos ver como fica em jQuery. Adicionamos a sua biblioteca através da tag “<script>” e começamos a mágica.

1
2

<script language="javascript" src="jquery.js"></script>
alert($("#usuario").val());

Uala! muito mais prático? Esse é o principal do jQuery, utilizar ‘$’ como ‘getElementById’ sem precisar checar browser etc, ele faz tudo por você, é super leve e dinâmico. Como você deve ter reparado, ele utiliza a mesma forma de seletores CSS para interações, ou seja é possível selecionar todos elementos de uma determinada classe apenas usando $(‘.classe’) além de outras formas, confira em jQuery Selectors. Com ele é possivel fazer toda maracutaia que você vê porai, como drag n drop, ordenar itens etc. Animações de classes além de uma vasta biblioteca de plugins, também recomendo uma busca pelo extjs + jQuery, é possível fazer coisas absurdas! por hoje é só! em breve explico como se anima um elemento e como ordenar items! Até a próxima!