![Page 1: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/1.jpg)
JSON
Programação de Script
![Page 2: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/2.jpg)
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.
![Page 3: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/3.jpg)
Exemplo
{"employees": [{ "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" }]}
![Page 4: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/4.jpg)
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.
![Page 5: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/5.jpg)
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>
![Page 6: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/6.jpg)
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"
![Page 7: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/7.jpg)
Tipo de dados
number (inteiro ou real) string (entre aspas duplas) boolean (true or false) array (entre colchetes) object (entre chaves) null
![Page 8: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/8.jpg)
Objetos
Objetos do JSON são escritos entre chaves
Objetos podem contem multiplos conjuntos de nomes/valores.
Exemplo { "firstName":"John" , "lastName":"Doe" }
![Page 9: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/9.jpg)
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" }
]}
![Page 10: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/10.jpg)
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";
![Page 11: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/11.jpg)
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;
![Page 12: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/12.jpg)
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)
![Page 13: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/13.jpg)
JSON e JQUERY
Exemplo Fonte de dados: {"codigo":"2","nome":“Prof. Norton
","perfil":“Professor","horario":"Noite"}
![Page 14: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/14.jpg)
JSON e JQUERY
$.getJSON( "data.js", function(data){
$('#nome').text(data.nome); $
('#perfil').text(data.perfil); $('#horario').text(data.horario);
} ););
![Page 15: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/15.jpg)
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)
![Page 16: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader036.vdocuments.com.br/reader036/viewer/2022062318/552fc132497959413d8d6268/html5/thumbnails/17.jpg)
Fonte
http://www.w3schools.com/json/ http://www.zigolis.com.br/blog/
manipulacao-json-com-jquery/