É um formato de dados fácil de escrever e ler por seres humanos e é bastante fácil de ser interpretado por computadores, sendo possível converte-lo facilmente para a notação de objetos JavaScript, o que o torna um boa opção para AJAX, principalmente quando necessitamos processar de alguma forma os dados buscados via AJAX.

Vejamos um exemplo do formato JSON:

1
2
3
4
5
6

{
"nome": "Rodrigo",
"sobrenome": "Aramburu",
"idade":"25",
"site":"http://www.botecodigital.info"
}

O formato é bem simples, um objeto é formado de vários membros dentro de chaves. Um membro é formado de uma string que será o nome da variável e um valor que pode ser: string, numérico, lógico, um array ou um outro objeto.

Vejamos um exemplo um pouco mais complexo:

1
2
3
4
5
6
7
8

{
    "nome":"Loja Exemplo",
    "produtos":[
                {"nome":"Monitor LCD","preco":350},
                {"nome":"Gravador de DVD","preco":120},
                {"nome":"Pendrive","preco":60},
               ]
}

Neste objeto temos 2 membros: nome que é tem um valor string e produtos que é um array de outros objetos que possuem dois membros: nome e preco.

Podemos interpretar o formato JSON utilizando uma função da biblioteca JQuery – jQuery.parseJSON – ela recebe o documento JSON como parâmetro e devolve um objeto JavaScript com os valores.

Exemplo:

1
2
3
4
5
6
7

var dados = '{"nome": "Rodrigo","sobrenome": "Aramburu","idade":"25","site":"http://www.botecodigital.info"}';
var obj = jQuery.parseJSON(dados);
 
alert(obj.nome);
alert(obj.sobrenome);
alert(obj.idade);
alert(obj.site);

Bastante simples! Deve ser mostrado em janela de alert as palavras “Rodrigo”, “Aramburu”, “25″ e “http://www.botecodigital.info”. Como podemos notar isto torna muito fácil manipular uma série de valores contidos dentro de uma string ou arquivo arquivo.

Mais um exemplo para reforçar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var dados  = '{ ';
    dados += '"nome":"Loja Exemplo",';
    dados += ' "produtos":[';
    dados += '       {"nome":"Monitor LCD","preco":350},';
    dados += '       {"nome":"Gravador de DVD","preco":120},';
    dados += '       {"nome":"Pendrive","preco":60}';
    dados += '    ]';
    dados += '}';
var obj = jQuery.parseJSON(dados);
 
alert( obj.nome);
alert( obj.produtos[0].nome );
alert( obj.produtos[0].preco );
alert( obj.produtos[1].nome );
alert( obj.produtos[1].preco );

Agora vamos ver a real vantagem de utilizar JSON que é utilizá-lo para fazer AJAX e para isso a biblioteca JQuery nos fornece uma função chamada $.getJSON.

Exemplo:

1
2
3
4
5
6
7
8

        $(document).ready(function(){
              $.getJSON('dados.json', function(data) {
                   $('#nome').html( data.nome);
                   $('#sobrenome').html( data.sobrenome );
                   $('#idade').html( data.idade );
                   $('#site').html( data.site );
             });
    });

A função $.getJSON recebe como parâmetros um nome de arquivo com dados no formato JSON, após o arquivo ser carregado ele é convertido em um objeto e passado por parâmetro(data) para a função que é responsável por manipular os valores.

Veja o exemplo de uso de JSON

Para começar vamos esclarecer que AJAX não é uma tecnologia e sim uma metodologia que utiliza tecnologias não tão novas assim como XML e Javascript para fazer requisições assíncronas ao servidor e com as informações retornadas modificar a página já carregada utilizando DOM para modificar-la sem recarregar todo conteúdo novamente. E com isso economizar no tráfego de internet e melhorar a experiência do usuário.

Primeiramente vejamos como uma página simples é carregada.

1 . O usuário digita um URL no campo endereço aperta enter e o navegador envia uma requisição normalmente do tipo GET para o servidor que retorna para o navegador o conteúdo que é exibido.

2. O usuário clica em um link da página então o navegador faz outra requisição ao servidor que envia todo o conteúdo da nova página novamente.

Se pensarmos um pouco, muito conteúdo é repetido é baixado quando navegamos entre as página de um mesmo site, como topo, menus, rodapés etc.

Com base nisso, porque não carregar somente o conteúdo que mudou a cada requisição, sem mexer no resto do conteúdo da página? Isto é a base do AJAX.

Quando começou a ser utilizado a o retorno do servidor era feito em XML (por isso o X da sigla) mas com o passar do tempo passou a se chamar AJAX toda requisição assíncrona ao servidor Web.

Bom para entendermos como fazer uma requisição assíncrona precisamos conhecer 2 tipos de requisição que o protocolo HTTP aceita:

GET: É o método mais comum: solicita algum recurso como um arquivo ou um script (qualquer dado que estiver identificado pelo URI) por meio do protocolo HTTP. O método GET é reconhecido por todos os servidores.

POST: Envia dados para serem processados (por exemplo, dados de um formulário HTML) para o recurso especificado. Os dados são incluídos no corpo do comando.

Bom vamos agora ver um pequeno exemplo de como fazer requisições assíncronas e carregar o conteúdo dentro de um div utilizando a JQuery.

HTML Principal

<div id="carregando">Carregando</div>
 
<h1>Cabeçalho</h1>
 
<a href="conteudo1.php">Conteudo 1</a>
<a href="conteudo2.php">Conteudo 2</a>
<a href="conteudo3.php">Conteudo 3</a>
<a href="conteudo4.php">Conteudo 4</a>
 
<div id="conteudo"></div>

Como vimos não é nada diferente do que conhecemos, também temos os arquivos com o conteúdo que irá dentro do div #conteudo:

conteudo1.php

<h1> Conteudo 1</h1>
<p>Donec scelerisque aliquet nunc id mattis. Aliquam auctor bibendum massa at dapibus. Suspendisse ante metus, ornare vitae venenatis vitae, posuere sit amet risus. Nam lacus orci, placerat ut tincidunt nec, tincidunt mollis nisl? Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse id arcu sed urna tincidunt semper. Mauris eu mauris nec est euismod dapibus. Suspendisse imperdiet est id purus placerat consectetur. Curabitur interdum ipsum vitae lacus tincidunt nec elementum nunc consectetur. Etiam dapibus felis non nisl tempor lobortis. Mauris commodo varius ligula eget posuere. Suspendisse ligula arcu, tincidunt dictum varius in, bibendum in purus. Maecenas faucibus, lorem vel fermentum vehicula, dui magna dignissim mauris, viverra egestas magna eros eu lorem. Donec facilisis felis suscipit dui blandit eget commodo erat feugiat. Proin eget diam risus.</p>

conteudo2.php

<h2> Conteudo 2</h2>
<p>Nullam non metus risus, in congue velit. Mauris vitae est massa! Nunc suscipit iaculis varius. Suspendisse eros neque, consectetur ut tincidunt sed, placerat eget ipsum? Phasellus eget mauris libero. Donec elit nunc, varius nec auctor vitae, dapibus non turpis. Donec cursus malesuada quam, id accumsan ante imperdiet ac. Donec purus lorem, fringilla fermentum tempus a, porta quis velit. Morbi quis arcu magna, in ultrices neque? Nullam molestie ultricies nibh placerat varius?</p>

conteudo3.php

<h3> Conteudo 3</h3>
<p>Vestibulum eget tellus eros. Mauris et ante id diam malesuada dignissim. Nam vel sem pulvinar velit tincidunt sodales id et ipsum. Cras magna turpis; egestas non dignissim id; malesuada vel velit! Vivamus libero lorem; congue ut auctor sed; rhoncus mattis magna. Sed eget purus ac ante feugiat laoreet! Aliquam erat volutpat. Duis eu nisi ac metus interdum lobortis eget vitae enim. Nunc adipiscing accumsan magna, at rutrum tortor condimentum ac. Sed lobortis adipiscing erat, faucibus blandit odio mollis in. Integer ipsum justo, varius ac malesuada in, laoreet vitae lacus. Donec varius mauris nec dui tristique aliquet. Donec eros arcu, tristique eget fringilla sit amet, feugiat vel leo. Ut elit justo, elementum ut convallis in, consequat in eros. Proin a leo sed dolor aliquam ultrices.</p>

conteudo4.php

<h4> Conteudo 4</h4>
<p>Cras porta, tellus eu elementum pulvinar, tellus nulla tempus neque, ac posuere sem sem varius quam? Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse lobortis feugiat ante interdum facilisis. Proin ante velit, congue vel lobortis a, commodo id risus. Ut sapien turpis, convallis condimentum suscipit in, imperdiet ut ante. Nullam molestie cursus leo, quis luctus risus bibendum quis? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse lacus nulla; tincidunt consequat rhoncus sed, suscipit sit amet tellus. Fusce faucibus, justo quis mollis volutpat, ligula est sodales dui; eu dictum ante urna vitae ipsum. Vivamus elementum leo et dui viverra blandit. Nunc ac blandit tellus. Sed dui nibh, porttitor nec sagittis quis, commodo tincidunt libero.</p>

Bom com os arquivos HTML prontos vamos ao que interessa, o código Javascript que é responsável pelas requisições assíncronas pelo método GET:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  $(document).ready(function(){
      $("a").each(function() {
           var href = $(this).attr('href');
           $(this).attr('href','javascript:void(0)');
           $(this).click(function(){
                $('#conteudo').html("");
       	    	$("#carregando").show('slow');
                 $.get( href , function(data){
                        $('#conteudo').html(data);
                        $("#carregando").hide('slow');
                 });
                return null;
        });
     });
  });

Na linha 2 utilizamos o método each que para cada elemento encontrado pelo seletor, no caso “a”(links), ele vai executar a função definida que captura a URL do atributo href do link e armazena em uma variável (linha 3), seta o atributo href para não apontar mais para nenhum link(linha 4), adiciona o evento click (linha 5), dentro do evento click limpamos o div #conteudo (linha 6), mostramos a mensagem de carregando (linha 7) e utilizamos o método $.get(url,function(data){}) que realmente faz a mágica( linha 8).

O método $.get(url,function(data){}) faz a requisição assíncrona com o servidor e passa para a função passada por parâmetro o retorno do servidor na variável data.

Após receber o retorno do servidor jogamos este retorno dentro da div #conteudo(linha 9) e escondemos a mensagem de carregando (linha 10).

Para ver o exemplo funcionando clique aqui

Veremos agora como criar um formulário utilizando AJAX pelo método POST:

HTML

<div id="carregando">Carregando</div>
<div id="mensagem"></div>
 
<form action="processapost.php" method="post">
 
    <label for="nome">Nome:</label>
    <input type="text" name="nome" />
 
    <label for="email">E-mail</label>
    <input type="text" name="email" />
 
    <input type="submit" value="Enviar" />
</form>

Script que processa a requisição POST (processapost.php)

1
2
3
4

        Dados enviados:<br /><br />
       <?php echo "Nome: ".$_POST['nome']; ?>
       <br />
       <?php echo "E-mail: ".$_POST['email']; ?>

E o código Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  $(document).ready(function(){
        var action = $('form').attr('action');
        $('form').attr('action','javascript:void(0);');
        $('form').submit(function(){
       	    	$("#carregando").show('slow');
 
 
                 $.post(action ,jQuery("form").serialize(),  function(data){
                        $('#mensagem').html(data);
                        $('#mensagem').show();
                        $("#carregando").hide('slow');
                 });
                return null;
        });
 
	});

Na linha 2 capturamos a URL que irá processar e retornar os valores do nosso formulário e depois (linha 3) configuramos para que o formulário não envie a requisição como faria normalmente, e configuramos o evento submit (linha 4) que é ativado quando o formulário é enviado.

Quando isto acontecer ele irá mostrar a mensagem de carregando (linha 5) e utilizamos o método $.post(url ,dados, function(data)){} que faz uma requisição via POST para url, enviando um array dados e após executa a função recebendo por parâmetro data com o retorno do servidor. Na linha 9 inserimos o retorno da requisição na div #mensagem, deixamos visível esta div e por fim escondemos a mensagem de carregando(linha 11).

Os dados enviados são passados na forma de array no fomato:

 { var1: "valor1", var2: "valor2" }

ou na forma de string:

 var1=valor&var2=valor

Como vimos no exemplo utilizamos jQuery(“form”).serialize(), que converte um conjunto de inputs em uma string no segundo formato.

Para ver o exemplo funcionando clique aqui

Este foi o tão aguardado artigo sobre AJAX com JQuery, os exemplos são bastante simples mas com um pouco de criatividade dá para fazer coisas bem legais.

Até mais “Vida longa e prospera!”

Sim ele foi pegos pelos bots de span, para quem não sabe, existem muitos bots rodando na internet com o intuito de pegar os emails que estão disponíveis na página para enviar spam.

Hoje necessitei colocar uma lista de endereços de e-mails em um site e lembrei deste triste incidente. Então como informar um e-mail em uma página sem receber spam(ou sem receber muito pelo menos).

A solução que encontrei foi utilizando o JQuery para substituir uma string predeterminada(no caso _em_) pelo @. Simples não!

$(document).ready(function() {
    $(".email").each(function() {
	    var tmp = $(this).html();
        $(this).html( tmp.replace('_em_','@') );
	});
});

Para aqueles que não conhecem o método each() do JQuery ele executa a função passada por parâmetro para cada elemento encontrado pelo seletor.

Agora basta colocar o e-mail dentro de um elemento da classe .email .

1

<span class="email">blogbotecodigital_em_gmail.com<span>

OBS.: Para dificultar eu aconselho mudar a string _em_ por outra, para que mesmo que os spammers alterem seus bots para pegar emails com _em_ no lugar de @ não não vão pegar o seu.

Para aqueles que não sabem trabalhar com JQuery veja nosso artigo de iniciação.

show() e hide()

Para começar vamos simplesmente esconder e mostrar um elemento da página para isso utilizamos o método hide() para esconder e o método show() para mostrá-lo.

1
2
3
4
5
6
7
8
9

    $('#conteudo').hide();
 
    $('.elemento').click(function(){
        $('#conteudo').show('slow');
    });
 
    $('.elemento2').click(function(){
        $('#conteudo').hide('fast');
    });

demo

A maior parte dos métodos de animação da JQuery aceitam um parâmetro que define sua velocidade de animação em milissegundos. Existem também dois valores default que também podem ser usados: slow que equivale a 600 milissegundos e o fast que equivale a 400 milissegundos.

Se nenhum parâmetro for especificado para os métodos show() e hide() ele executarão sem nenhuma animação simplesmente aparecendo/desaparecendo.

toogle() e slideToggle()

Um efeito bastante utilizado é o de clicar em um elemento para mostrar outro e clicar novamente no mesmo link para esconde-lo sendo que para isso ele desliza na tela. Estes efeitos são implementados pela JQuery pelos métodos toggle e slideToggle().

Se você precisar apenas deslizar o elemento para cima ou para baixo e não permitir que ele volte a posição original você também pode utilizar os métodos slideUp() e slideDown().

1
2
3
4
5
6
7

    $('a.l1').click(function(){
        $('#conteudo').toggle('slow');
    });
 
    $('a.l2').click(function(){
        $('#conteudo').slideToggle('slow');
    });

demo

fadeIn() e fadeOut()

Outros efeitos interessantes são os fadeIn() e o fadeOut() que faz o efeito de esmaecer, ou seja, o elemento vai ficando transparente até sumir, ou o contrário.

1
2
3
4
5
6
7

    $('a.fadein').click(function(){
        $('#conteudo').fadeIn(1000);
    });
 
    $('a.fadeout').click(function(){
        $('#conteudo').fadeOut(1000);
    });

demo

Animate

O método animate permite uma grande flexibilidade de animação, já consegui até fazer uma abertura de site ao estilo flash utilizando-o.

O animate() permite modificar várias propriedades do elemento alvo como largura, altura, opacidade, posição, margem, etc.

O verdadeiro poder deste método é que ele permite ser chamado várias vezes em sequência permitindo animações bastante complexas.

Para chamar o método animate() uilizamos dois parâmetros com as propriedades que serão modificadas e a velocidade desta animação. Segue abaixo uma pequena lista de parâmetros que o método animate() aceita.

• width: Largura do elemento
• height: Altura do elemento
• opacity: Transparencia do elemento
• marginLeft: Margem esquerda
• marginTop: Margem superior
• marginRight: Margem direita
• marginBottom: Margem inferior
• top: Posição em relação ao topo(somente funciona se a propriedade positon do CSS estiver em absolute)
• left: Posição em relação a esquerda(somente funciona se a propriedade positon do CSS estiver em absolute)
• fontSize: Tamanho da fonte
• borderWidth: Tamanho da Borda

1
2
3
4
5

         $('a').click(function(){
            $('#conteudo').animate({width: "400",opacity : 0.2}, 1200)
            .animate({height: "400",opacity : 1},1200)
            .animate({opacity : 0.2});
        });

demo

Bom foi isso, espero que tenham gostado, desculpem pelo atraso do post, falta de energia no final de semana(da companhia de eletricidade e minha ).

Fiquem atentos no próximo post vamos brincar um pouco com ajax com JQuery.

T++.c

Visando solucionar este problema surgiu uma biblioteca que facilita bastante a vida de quem trabalha com javascript a JQuery. Uma biblioteca que permite manipular e selecionar elementos do DOM de forma muito fácil.

Você pode baixá-la pelo seguinte endereço jquery.js ou também pode utilizá-la pelo google pelo seguinte link “http://jqueryjs.googlecode.com/files/jquery-1.3.2.js” e deve ser inserida na tag head (<script src=”jquery.js”></script>).

Vamos aos exemplos:

1
2
3
4
5
6
7
8
9

<div id="content">
<ul>
	<li><a href="#">Teste1</a></li>
	<li><a href="#">Teste2</a></li>
	<li><a href="#">Teste3</a></li>
	<li><a href="#">Teste4</a></li>
	<li><a href="#">Teste5</a></li>
</ul>
</div>

Bom vamos começar por um clássico quando clicarmos no link exibiremos a mensagem Hellos World:

1
2
3
4
5

$(document).ready(function() {
    $('a').click(function(){
        alert("Hello World");
    });
});

Antes de explicarmos o código vale chamar atenção para função $() ela recebe por parâmetro um seletor que identificará um elemento HTML e é através desta função chamaremos outras funções da biblioteca jQuery utilizando o operador “.” .

No nosso exemplo a primeira coisa que fazemos é selecionarmos o document ou seja o documento HTML em si e utilizarmos a função ready que executa a função passada para ela por parâmetro quando o DOM estiver pronto, ou seja, a página estiver carregada. Este é um recurso essencial já que sem ele as funções podem serem executadas sem que seus alvos(seletores) tenham sido carregados.

Na linha 2 selecionamos o elemento “a” ou seja os links da página e chamamos a função click e passamos por parâmetro uma função que exibe um alert(“Hello World”). A função click é, resumidamente, uma alias para o atributo onclick do elemento, então agora em qualquer link que clicarmos na página será exibida a mensagem “Hello World”.

Esta é uma das maiores facilidades que a JQuery proporciona, permitir que utilizemos seletores CSS para selecionarmos os elementos do DOM. Podemos desta forma selecionar os elementos com muita facilidade como por exemplo:

1
2
3
4

    $('h3')
    $('.botao')
    $('#conteudo')
    $('.content li a')

Na linha 1 selecionamos todos os elementos h3 da página, na 2 todos os elementos da classe botao na linha 3 selecionamos o elemento que tiver o id conteudo, na linha 4 selecionamos todos os elementos que a que estiverem dentro de um elemento li que estiverem dentro de um elemento que pertença a classe content.

Um outro seletor muito importante é o $(this) com ele é possível acessar a referência do elemento que chamou o método como vemos no exemplo asseguir.

1
2
3

$('#bloco a').click(function(){
    alert( $(this).attr('title'))
} );

Métodos mais comuns da JQuery

Vamos fazer agora uma pequena introdução à alguns métodos do JQuery:

1

    $('#bloco').html();

Retorna o HTML que estiver dentro do elemento.

1

    $('#bloco').html("Texto aqui");

Insere o texto passado por parâmentro dentro do elemento. Elimimando o conteúdo antigo.

1

    $('#bloco').append("Texto aqui");

Adiciona o texto enviado por parâmetro no final do conteúdo do elemento selecionado.

1

    $('#bloco a').attr('title','Boteco Digital');

Define o valor para uma propriedade do elemento selecionado.

1

    $('#bloco a').attr('title');

Retorna o valor de uma propriedade do elemento selecionado.

1

    $('#bloco input').val();

Retorna o valor de campo do formulário.

1

    $('#bloco').addClass("vermelho");

Adiciona a classe passada por parâmetro ao elemento selecionado.

1
2
3
4
5

    $('#bloco').hover(function() {
		$(this).addClass("verde");
	}, function() {
		$(this).removeClass("verde");
	});

Simula o :hover, quando o mouse estiver sobre o elemento selecionado executa a linha 2, quando o mouse saber de cima do elemento selecionado executa a linha 4.

1

    $('#bloco').css('background','#CCC');

Define propriedade CSS para um elemento selecionado.

1

    $('#bloco').css('background-color');

Retorna o valor da propriedade CSS.

1
2
3

$('#bloco select').change(function(){
    alert( $(this).val())
} );

Executa a função passada por parâmetro quando o elemento selecionado for alterado

Mais funções podem ser encontradas aqui.

Pessoal comentem o que acharam, se está claro. No próximo artigo irei ensinar como fazer um pouco de animação com JQuery.

T++.c