A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

JSON Programação de Script.

Apresentações semelhantes


Apresentação em tema: "JSON Programação de Script."— Transcrição da apresentação:

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 porem mais compacto, mais rapido 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 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":" "}; 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" – 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

17 Fonte http://www.w3schools.com/json/
com-jquery/


Carregar ppt "JSON Programação de Script."

Apresentações semelhantes


Anúncios Google