JSON Programação de Script. O que é JSON: JavaScript Object Notation. JSON e um padrão de troca...
17
JSON Programação de Script
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/
