JSON Programação de Script. O que é JSON: JavaScript Object Notation. JSON e um padrão de troca...

Post on 18-Apr-2015

174 views 1 download

Transcript of JSON Programação de Script. O que é JSON: JavaScript Object Notation. JSON e um padrão de troca...

JSON

Programação de Script

O que é

JSON: JavaScript Object Notation.

JSON e um padrão de troca de armazenamento e troca de dados.

JSON é similar ao XML porem mais compacto, mais rapido e mais simples de utilizar.

E independente de plataforma e linguagem de programação.

Exemplo

{"employees": [{ "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" }]}

Por que JSON ?

Para utilização de aplicações AJAX, JSON e mais rapido e mais facil que com XML.

E um formato de intercambio de dados entre tecnologias distintas.

Exemplo com Javascript <!DOCTYPE html>

<html><body><h2>JSON Object Creation in JavaScript</h2><p>Name: <span id="jname"></span><br /> Age: <span id="jage"></span><br /> Address: <span id="jstreet"></span><br /> Phone: <span id="jphone"></span><br /> </p>

<script>var JSONObject= {"name":"John Johnson","street":"Oslo West 555", "age":33,"phone":"555 1234567"};document.getElementById("jname").innerHTML=JSONObject.name;document.getElementById("jage").innerHTML=JSONObject.age; document.getElementById("jstreet").innerHTML=JSONObject.street;document.getElementById("jphone").innerHTML=JSONObject.phone; </script>

</body></html>

Sintaxe

Dado e composto pelo conjunto nome/valor.

Dado e separado por virgula. Chaves definem o objeto Colchetes definem uma coleção

Exemplo: "firstName" : "John"

Tipo de dados

number (inteiro ou real) string (entre aspas duplas) boolean (true or false) array (entre colchetes) object (entre chaves) null

Objetos

Objetos do JSON são escritos entre chaves

Objetos podem contem multiplos conjuntos de nomes/valores.

Exemplo { "firstName":"John" , "lastName":"Doe" }

Coleção

Uma coleção contem vários objetos e delimitado por chaves.

{"employees": [{ "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" }

]}

Coleção

Exemplo de acesso a um atributo de um objeto da coleção:

Lendo o primeiro objeto: employees[0].firstName + " " + employees[0].lastName;

Alterando o atributo de um objeto: employees[0].firstName = "Gilbert";

Como Fazer

Convertendo um JSON em formato texto em um objeto no javascript:

var txt = '{ "employees" : [' +'{ "firstName":"John" , "lastName":"Doe" },' +'{ "firstName":"Anna" , "lastName":"Smith" },' +'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

var obj = eval("(" + txt + ")");obj.employees[1].firstName;

JSON e JQUERY

Utilizaremos a função jQuery.getJSON, essa função será responsável por obter os dados contidos no nosso json.

jQuery.getJSON( url, [data], [callback] ) url -> A url requisitada (parâmetro

obrigatório) [data] -> dados que serão enviados via GET

(parâmetro opcional) [callback] -> Função que será executada

quando os dados forem carregados com sucesso (parâmetro opcional)

JSON e JQUERY

Exemplo Fonte de dados: {"codigo":"2","nome":“Prof. Norton

","perfil":“Professor","horario":"Noite"}

JSON e JQUERY

$.getJSON( "data.js", function(data){

$('#nome').text(data.nome); $

('#perfil').text(data.perfil); $('#horario').text(data.horario);

} ););

Jquery – Método POST e JSON Na estrutura da função POST existe um

parâmetro opcional que permite definir o tipo de retorno da função de callback

$(selector).post(URL,data,function(data,status,xhr),dataType)

Parâmetro Data Type

"xml" – um documento XML "html" – texto em formato HTML "text" – uma string "script" - Runs the response as JavaScript,

and returns it as plain text "json" - Runs the response as JSON, and

returns a JavaScript object "jsonp" - Loads in a JSON block using JSONP.

Will add an "?callback=?" to the URL to specify the callback

Fonte

http://www.w3schools.com/json/ http://www.zigolis.com.br/blog/

manipulacao-json-com-jquery/