Json+Jquery+Ajax Exemplos

Com o crescente avanço da programação WEB, é imprescindível conhecer bem estes elementos: JSON e AJAX. Para facilitar nosso trabalho, vou explicar isso utilizando a biblioteca JQuery, que facilita muito a vida neste processo.

Para iniciarmos, primeiro precisamos entender o que é JSON.

JSON

JSON (JavaScript Object Notation) é uma forma de representação de dados em forma de um objeto javascript. A linguagem javascript não é orientada a objetos, mas pode ter um comportamento similar. Um objeto em javascript é declarado com duas chaves: var objeto = {}.

Para declarar atributos a este objeto basta coloca-los dentro das chaves:

var pessoa = {
	idade: 17,
	nome: 'Bruno Santos',
	altura: 1.73,
	peso: 78,
	tipo_sanguineo: 'O+'
}

Mas e os comportamentos deste objeto? As funções? Elas também podem ser declaradas:

var pessoa = {
	idade: 17,
	nome: 'Bruno Santos',
	altura: 1.73,
	peso: 78,
	tipo_sanguineo: 'O+',
	aumenta_peso: function(kilos){
		this.peso += kilos
	},
	aniversario: function(){
		this.idade++;
	}
}

Depois disso, podemos alterar propriedades deste objeto, chamar funções, etc:

//vamos aumentar o peso desta pessoa:
pessoa.aumenta_peso(4);
alert(pessoa.peso); //saída 82
pessoa.aniversario();
alert(pessoa.idade) //saída 18
pessoa.nome = "Pedro Augusto";

Vale ressaltar que este objeto pessoa é igual a qualquer variável, e estará disponível dentro do seu escopo.

Voltando ao tema do post, e o AJAX? O que ele tem a ver com isso?
Obs:(Se você ainda não sabe o que é o AJAX ou como funciona, clique aqui e leia este post antes)
Como a programação WEB evoluiu muito, hoje em dia os sites tendem a se tornar muito mais dinâmicos, utilizando cada vez mais o AJAX. Isto torna cada vez mais necessário a passagem de objetos das linguagens de backend, como: PHP, ASP, Java EE, para o javascript. Pensando nisso, o ajax que antes transportava XML para este propósito, que precisava ser “parseado” pelo javascript, passou a ser substituído pelo JSON, como sendo um formato de transporte de dados suportado por inúmeras linguagens. Para o javascript isso é uma grande vantagem, já que esta notação de dados já vem no formato de objeto em javascript.

getJSON

Você pode utilizar ajax para retornar dados do servidor, e o Jquery possui vários métodos, que são “chamadas curtas” ao método $.ajax(), dentre eles estão o $.load(), $.get(), $.post(). Mas o jquery possui uma outra forma de chamada específica pra isso: o $.getJSON().
O primeiro parâmetro da função, é a url que será requisitada, o segundo, pode ser um objeto json com par:valor que será enviado como variáveis de post (opcional), ou uma função a ser executada ao fim da requisição. O terceiro parâmetro será a função a ser executada ao fim da requisição caso o segundo parâmetro for o objeto json.
Imagine que podemos através de AJAX, pegar esse retorno pra preencher o nosso objeto pessoa:

var dados = {id: 12}

$.getJSON("get_pessoa", dados, function(result){
    //result é o retorno, um objeto em JSON passado de parâmetro a esta função
	pessoa.nome = result.nome;
	pessoa.idade = result.idade;
	pessoa.peso = result.peso;
	pessoa.altura = result.altura;

	var html = "Dados da pessoa retornados via ajax:";
	html += "Nome: "+pessoa.nome;
	html += "Idade: "+pessoa.idade;
	html += "Peso: "+pessoa.peso;
	html += "Altura: "+pessoa.altura;

	$('#dados_pessoa').html(html);
});

Mas e no backend? vou mostrar um exemplo no PHP, mas isto pode ser feito em diversas outras linguagens.
Primeiramente setamos o header da página, pro navegador entender, que o retorno da requisição é do tipo JSON e não apenas puro texto em HTML:

header('Content-Type: application/json');

Pegamos o id enviado via post para fazer uma busca no banco de dados por exemplo:

$id = $_POST['id']; 
//faz uma busca no banco de dados e guarda o retorno na variável $resultado
$pessoa = array();
$pessoa['nome'] = $resultado->nome;
$pessoa['idade'] = $resultado->idade;
$pessoa['peso'] = $resultado->peso;
$pessoa['altura'] = $resultado->altura;

Por fim, utilizamos uma função nativa do PHP, chamada json_encode():

echo json_encode($pessoa);

o código PHP completo:

header('Content-Type: application/json');
$id = $_POST['id']; 
//faz uma busca no banco de dados onde o id for = $id e guarda o retorno na variável $resultado
$pessoa = array();
$pessoa['nome'] = $resultado->nome;
$pessoa['idade'] = $resultado->idade;
$pessoa['peso'] = $resultado->peso;
$pessoa['altura'] = $resultado->altura;
echo json_encode($pessoa);

Assim o PHP irá printar na tela o array pessoa, no formato JSON, e o javascript ira capturar esse array em PHP como um objeto, pronto para ser manipulado no javascript.
Lembrando que este é um exemplo bem simples, mas você pode fazer inúmeras coisas, como guardar arrays dentro de objetos JSON que também funcionarão como arrays em javascript, consultar outros tipos de informações, e criar a lógica que seu sistema necessita. Este exemplo apenas serve como base, para você treinar e utilizar estes conceitos de forma mais elaborada.

Hoje em dia, o JSON  é muito utilizado em Web services e Serviços REST, utilizado em muitas API´S de mídias sociais, serviços de compartilhamento, flickr, Twitter, API´s de gateways de pagamento, etc. Portanto o conhecimento deste tipo de troca de informações e programação em javascript é muito importante nos dias atuais.

Veja este exemplo, se quiséssemos procurar produtos utilizando a API do Mercado Livre, poderíamos procurar por exemplo playtation3, clique no link e veja como ele retornaria o resultado: https://api.mercadolibre.com/sites/MLB/search?q=playstation3

Quer outro exemplo? abra o seu facebook, clique na sua página de perfil e pegue o link da sua página, o endereço que vem logo após o facebook.com/, coloque neste endereço: http://graph.facebook.com/seu_endereco_aqui e abra no navegador.
Você verá que é possível consultar informações da sua conta em formato json com esta simples consulta. Não se assustem, são apenas informações básicas. Para conseguir dados mais específicos, só será possível se você permitir e fornecer um token de segurança.

Consulte a documentação do método getJSON.
Consulte a documentação da função json_encode.

www.simplesharebuttons.comCompartilhe este conteúdo nas mídias sociais!