Nome:
Local: Rio de Janeiro, RJ, Brazil

Que perguntinha hein?! Mas vamos lá, adoro estudar assuntos relacionados à web, sempre que posso aprendo uma tecnologia, técnica ou linguagem nova. Tento sempre ver quais são as tendências e acompanha-las, enfim eu sou um eterno aprendiz. Deixando o lado profissional, entrando no lado pessoal, sou uma pessoa super gente-boa (pelo menos eu me acho. rs), adoro curtir a night, sair com os amigos, fazer novas amizades e viajar (tem coisa melhor do que isso?) Acho que você já está sabendo demais sobre mim. Fuiii...

domingo, 3 de junho de 2007

JSON e AJAX - Uma dupla do barulho

JSON(Javascript Notation Object), é muito legalzinho, imagina só todos os browsers dão suporte sem precisar hackear nada, isso é uma magavilha, ele também é suportado por várias linguagens,.Provavelmente se nunca usou JSON, deve estar perguntando o porque de usá-lo? E quando?

Suponhamos:
Quando fazemos qualquer aplicação em AJAX, aplicação que de fato necessite de AJAX e não por modismo, e queremos pegar o retorno da requisição temos duas opções, ou podemos fazer que o javascript retorne uma array, ou podemos fazer um XML, para estrutura dos dados. Porém nenhuma das duas formas me satisfaz muito, pois se eu fizer um array, eu tenho que separar linhas das colunas com separadores e essa idéia de fazer separadores não é muito legal e com XML é até uma boa opção, mas ele é um pouco pesado em relação ao JSON, ou podemos fazer de outra forma que desconheço, mas deve existir. Vou usar um exemplo de JSON com AJAX, então vamos nessa.

JSON é uma estrutura de fácil entendimento, tanto para o humano quando para a máquina, é leve e como disse anteriormente é suportado por todos os browsers. Podemos construir uma estrutura JSON de duas formas.

Um coleção de nomes e valores. Objeto

var myJSONObject = {"aluno": [
{"nome":"Yusuke", "nota1": 8.5, "nota2": 4},
{"nome":"Kuabara", "nota1": 7, "nota2": 3},
{"nome":"Ryei", "nota1": 7.5, "nota2": 6}
]
};


Uma coleção de valores. Array

Var myJSONArray =[8.5, 7, 7.5]

Sabido essas duas formas de construir um JSON, basta você adaptar à sua necessidade de uso, ou array, ou objeto. Outra coisa que esqueci de mencionar, quando usa a notação de objeto (primeiro exemplo), o javascript ainda não interpreta como tal, por isso tem que fazer uso da função eval().

var jsonObject = eval('(' + myJSONObject + ')');

Agora você tem um Objeto.

Exemplo com AJAX, não vou colocar a estrutura toda do AJAX, pois esse não é o foco, mas se você não sabe montar ou não entende a estrutura é só comentar, que volto no tema. OK?! Pois bem:

Estrutura dos dados retornados

{"aluno": [
{"aluno":”Yusuke”, "nota1": 8.5, “nota2”: 4},
{"aluno":”Kuabara”, "nota1": 7, “nota2”: 3},
{"aluno":”Ryei”, "nota1": 7.5, “nota2”: 6}
]
};


Função retorno do AJAX:


function retorno(){
container = document.getElementById("container"); // o elemento que vai exibir o resultado

if (request.readyState == 4) {//verifica se o estado de completo

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


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

//joga o retorno para o elemento que vai exibi-lo

conatiner.innerHTML = "Nome : " + myJSONObject.aluno[0].nome +"\nNota1 : "+ myJSONObject.aluno[0].nota1+"\nNota2 : "+ myJSONObject.aluno[0].nota2;
container.innerHTML += "Nome : " + myJSONObject.aluno[1].nome +"\nNota1 : "+myJSONObject.aluno[1].nota1+"\nNota2 : "+myJSONObject.aluno[1].nota2;
container.innerHTML += "Nome : " + myJSONObject.aluno[2].nome +"\nNota1 : "+myJSONObject.aluno[2].nota1+"\nNota2 : "+myJSONObject.aluno[2].nota2;
}
}
}


Viu como é simples, porém há ainda uma questão e ela é. Como vou fazer com que o meu código server-side (php, asp, ...) monte a estrutura de dados retornados?

To be Continued...


Update
Quando falei em notação de array, foi só para ilustrar como iria ficar os objetos, pois no exemplo de array ele se torna um objeto também, após o usa da function eval()

Marcadores: ,

2 Comentários:

Blogger Micox - Náiron J. C. G. disse...

Opa.
Muito bom.
Não conheço muito sobre Json. Quem sabe agora eu animo pra aprender melhor.

Obs.: Acho que os primeiros itens do "aluno" se chamam "nome" não é? hehe

Té mais.

5 de junho de 2007 às 22:15  
Blogger ramon disse...

Muito bem observado, erro de edição. :)
vlw

amanhã devo estar colocando a parte para montar a estrutura no server-side.

5 de junho de 2007 às 22:25  

Postar um comentário

Assinar Postar comentários [Atom]

<< Página inicial