Trocando dados utilizando JSON
JSON é um formato leve de troca de informações que em muitos casos está sendo utilizado para substituir o XML ou mesmo utilizado em conjunto.
É 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:
{
"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:
{
"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:
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:
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:
$(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