Portal webmaster

Trabalhando com JSON

Novo aqui no site? Talvez gostaria de assinar o
RSS feed do site?

Publicado em: 25/05/2007
Área: Ajax
Visualizações: 8.238
Comentário(s): 0

A JSON nada mais é do que uma maneira de representar os objetos em JavaScript,ou seja, JSON é JavaScript puro. Para trabalhar com esse formato não é necessário usar DOM ou qualquer Framwork ou Kit específico, embora muitos dos frameworks de hoje em dia dêem algum tipo de suporte à JSON.

JSON se assemelha muito com as matrizes do JavaScript, mas pode armazenar os mesmos dados que os documentos XML.
Veja um breve exemplo:

dados retornados,

{"notas" : [

   {"nome":"João", "nota1":8, "nota2":6, "nota3":10 },

   {"nome":"Maria", "nota1":5, "nota2":9, "nota3":8 },

   {"nome":"Pedro", "nota1":2, "nota2":7, "nota3":5 }

]};

código da página,



<html>

<head>

<script language="javascript">

var request = null;

try {

  request = new XMLHttpRequest();

} catch (trymicrosoft) {

  try {

    request = new ActiveXObject("Msxml2.XMLHTTP");

  } catch (othermicrosoft) {

    try {

      request = new ActiveXObject("Microsoft.XMLHTTP");

    } catch (failed) {

      request = null;

    }

  }

}



if (request == null)

  alert("Não foi possível criar o objeto !");





function obterDados() {

  var url = "alunos.php";

  url = url + "?cache=" + new Date().getTime();//para evitar problemas com o cache do navegador

  request.open("GET", url, true);

  request.onreadystatechange = exibe;//chame a função sem os parênteses 

  request.send(null);

}





function exibe(){

 if (request.readyState == 4) {//verifica o estado de prontidão

    

	if (request.status == 200) {//verifica o status da requisição

	

		//recupera os dados e os converte em um objeto

		var jsonData = eval('(' + request.responseText + ')');

		//o navegador trata a JSON com texto, portanto utilize o responseText

		//trabalhando com os dados

		var aluno1 = jsonData.notas[0].nome;//recupera o nome do primeiro aluno

		var aluno2 = jsonData.notas[1].nome;//recupera o nome do segundo aluno

		var aluno3 = jsonData.notas[2].nome;//recupera o nome do terceiro aluno

		//exibe as notas

		alert("Aluno : " + aluno1+"nNota1 : "+jsonData.notas[0].nota1+"nNota2 : "+jsonData.notas[0].nota2+"nNota3 : "+jsonData.notas[0].nota3);

		alert("Aluno : " + aluno2+"nNota1 : "+jsonData.notas[1].nota1+"nNota2 : "+jsonData.notas[1].nota2+"nNota3 : "+jsonData.notas[1].nota3);

		alert("Aluno : " + aluno3+"nNota1 : "+jsonData.notas[2].nota1+"nNota2 : "+jsonData.notas[2].nota2+"nNota3 : "+jsonData.notas[2].nota3);

		}

	}

}

</script>

</head>

<body>

<script language="javascript">

	obterDados();//chama a função

</script>

</body>

</html>

  O interessante da JSON é que ela é apenas javascript, portanto, o seu código JavaScript poderá utiliza-lá facilmente.

  A má notícia é que JSON é JavaScript, linguagens como PHP, PERL e Asp não consiguirão entendê-la. Provalvelmente você precisará de alguma biblioteca para exibir a JSON em seus scripts de servidor.

  Para fazer o download das bibliotecas mais comuns de JSON, acesse:www.json.org

Veremos agora um exemplo de como gerar uma JSON resposta no PHP





<?php header("Content-Type: text/html; charset=ISO-8859-1",true); ?>



<?php 

require("JSON.php");  //importando a biblioteca



$json = new Services_JSON();//criando o objeto para manipular a JSON



$aluno1 = array('nome'=> 'Ana', 

              'nota1'=> "8",

              'nota2'=> "6" ,

              'nota3'=> "2");

$aluno2 = array('nome'=> 'Maria', 

              'nota1'=> "5",

              'nota2'=> "9" ,

              'nota3'=> "8");

$aluno3 = array('nome'=> 'Pedro', 

              'nota1'=> "2",

              'nota2'=> "7" ,

              'nota3'=> "5");

$notas = array('notas' => array($aluno1, $aluno2, $aluno3));



$output = $json->encode($notas);

echo($output);

?>

   Como podemos observar, primeiro temos de criar um vetor para cada aluno, em seguida deve-se criar um outro vetor para armazenar os vetores de alunos, formando uma matriz.
   Já foi dito anteriormente que matrizes são os objetos que mais se assemelham à JSON, por isso a grande maioria de classes para a JSON, pedirá como parâmetro de entrada uma matriz;
   Este foi apenas um exemplo simples simples para a utilização da JSON.Em breve eu postarei mais exmplos e aplicações mais úteis para a JSON
   Até a Proxima.

Clique aqui para comentar comentários

Preencha o formulário para comentar:

Seja o primeiro a comentar!

Autor da matéria

» site do autor

Ramon Ferreira Silva
Estudante de Sistemas de Informação, estudou no CEFET/RJ e hoje trabalha com ASP, ASP.NET, PHP e AJAX.

Todas as matérias de Ramon Ferreira Silva

Seguir o Oficina da Net

Top matérias do mês

1992 - O ano em que Bill Gates previu o futuro dos computadores
O computador terá o tamanho que você quiser. Poderá ser do tamanho da .
Photoshop: Aplicando tatuagem em uma pessoa
Aqui veremos como aplicar uma tatuagem a qualquer pessoa de uma maneir.
Dicas para tornar seu site conhecido
Público é um item fundamental para se ter um site. De que adianta você.
Imagens em quebra cabeça
Veja como transformar suas imagens em quebra cabeças de uma maneira be.
Vídeo Aula Sony vegas - Criando efeito de filme antigo
Olá pessoal, estou aqui para mais uma vídeo aula, desta vez vou mostra.

Matérias relacionadas

Resolvendo o problema do Cache
Muitas das vezes quando para web, nossa aplicação não responde da mane.
Exibindo Hints com AJAX
É comum ver em aplicações Desktop, elementos que possuem um Hint(Dica).
Preenchendo uma ComboBox Ajax e Json
Munidos de nossos conhecimentos sobre DOM e JSON, começaremos agora av.
Acentuação para conteúdos carregados por AJAX
Este é um breve artigo, irei mostrar como renderizar corretamente car.
UPLOAD com AJAX é possível?
Não considere isso um artigo, isso é um desafio. Eu desafio a alguém a.

Destaque

ÍCONESBR
Confira uma das maiores coletâneas grátis de ícones da internet. No íconesbr é fácil de encontrar o que você procura.