1 / 17

JSON

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 .

marc
Download Presentation

JSON

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JSON Programação de Script

  2. O que é • JSON: JavaScript Object Notation. • JSON e um padrão de troca de armazenamento e troca de dados. • JSON é similar ao XML poremmaiscompacto, maisrapido e mais simples de utilizar. • E independente de plataforma e linguagem de programação.

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

  4. 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.

  5. Exemplo com Javascript • <!DOCTYPE html><html><body><h2>JSON ObjectCreation 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>

  6. 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"

  7. Tipo de dados • number (inteiro ou real) • string (entre aspas duplas) • boolean (true or false) • array (entre colchetes) • object (entre chaves) • null

  8. Objetos • Objetos do JSON são escritos entre chaves • Objetos podem contem multiplos conjuntos de nomes/valores. • Exemplo • { "firstName":"John" , "lastName":"Doe" }

  9. 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" }]}

  10. 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";

  11. 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;

  12. 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)

  13. JSON e JQUERY • Exemplo • Fonte de dados: • {"codigo":"2","nome":“Prof. Norton ","perfil":“Professor","horario":"Noite"}

  14. JSON e JQUERY $.getJSON( "data.js", function(data){ $('#nome').text(data.nome); $('#perfil').text(data.perfil); $('#horario').text(data.horario); } ); );

  15. 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)

  16. Parâmetro Data Type • "xml" – um documento XML • "html" – textoemformato 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

  17. Fonte • http://www.w3schools.com/json/ • http://www.zigolis.com.br/blog/manipulacao-json-com-jquery/

More Related