SlideShare ist ein Scribd-Unternehmen logo
1 von 11
Minicurso
JSON e AJAX
Instrutor: Wilker Iceri
O que é JSON?
• É uma notação de Objeto JavaScript.
• É usado para armazenar e transportar informações de texto, como XML.
• JSON é menor e mais rápido que o XML.
Sintaxe
• Chaves {} é usado para envolver objetos.
• Colchetes [] é usado para envolver matrizes.
• Os dados são colocados em pares de nome/valor.
• Os dados são separados por vírgula.
Sintaxe

Acessar o exemplo
Sintaxe

Acessar o exemplo
Convertendo Objetos JavaScript para
JSON
• Para converter objetos JavaScript para o formato JSON utilizamos o método
stringify do objeto JSON no JavaScript.
• Exemplo: JSON.stringify(object);

Acessar o exemplo
Convertendo JSON para Objetos
JavaScript
• Vamos usar o método parseJSON da biblioteca jQuery para converter os
dados em JSON para objetos JavaScript.
• Exemplo: jQuery.parseJSON(json);

Acessar o exemplo
O que é AJAX?
• AJAX é a sigla de Asynchronous JavaScript And XML.
• Apesar do nome contêm a palavra XML, ele é geralmente utilizado com JSON.
• A idéia do AJAX é permitir o carregamento de somente algumas partes da
página web, sem a necessidade de atualizar a página inteira.
• Exemplos: Google Maps, Gmail, Facebook, etc.
AJAX com jQuery
• É possível utilizar o AJAX facilmente utilizando a biblioteca jQuery utilizando o
método $.ajax(opcoes).

Acessar o exemplo
POST e GET
• Além da função $.ajax(), o jQuery disponibiliza a função $.post() e $.get()
como funções de conveniência.

Acessar o exemplo
FIM...

Weitere ähnliche Inhalte

Andere mochten auch

Novas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web ServicesNovas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web ServicesHelder da Rocha
 
Rails 3 Beginner to Builder 2011 Week 3
Rails 3 Beginner to Builder 2011 Week 3Rails 3 Beginner to Builder 2011 Week 3
Rails 3 Beginner to Builder 2011 Week 3Richard Schneeman
 
Rails 3 Beginner to Builder 2011 Week 2
Rails 3 Beginner to Builder 2011 Week 2Rails 3 Beginner to Builder 2011 Week 2
Rails 3 Beginner to Builder 2011 Week 2Richard Schneeman
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGHelder da Rocha
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJSBeto Muniz
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJSRodrigo Branas
 
Capítulo 10 - Sincronização de dados usando JSON
Capítulo 10 - Sincronização de dados usando JSONCapítulo 10 - Sincronização de dados usando JSON
Capítulo 10 - Sincronização de dados usando JSONMarcio Palheta
 
XML: Uma Introdução Prática (2001)
XML: Uma Introdução Prática (2001)XML: Uma Introdução Prática (2001)
XML: Uma Introdução Prática (2001)Helder da Rocha
 
Ruby on Rails Presentation
Ruby on Rails PresentationRuby on Rails Presentation
Ruby on Rails Presentationadamcookeuk
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerLuminary Labs
 

Andere mochten auch (13)

Novas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web ServicesNovas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web Services
 
Rails 3 Beginner to Builder 2011 Week 3
Rails 3 Beginner to Builder 2011 Week 3Rails 3 Beginner to Builder 2011 Week 3
Rails 3 Beginner to Builder 2011 Week 3
 
Rails 3 Beginner to Builder 2011 Week 2
Rails 3 Beginner to Builder 2011 Week 2Rails 3 Beginner to Builder 2011 Week 2
Rails 3 Beginner to Builder 2011 Week 2
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVG
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJS
 
Angular js
Angular jsAngular js
Angular js
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJS
 
Capítulo 10 - Sincronização de dados usando JSON
Capítulo 10 - Sincronização de dados usando JSONCapítulo 10 - Sincronização de dados usando JSON
Capítulo 10 - Sincronização de dados usando JSON
 
XML: Uma Introdução Prática (2001)
XML: Uma Introdução Prática (2001)XML: Uma Introdução Prática (2001)
XML: Uma Introdução Prática (2001)
 
Ruby on Rails for beginners
Ruby on Rails for beginnersRuby on Rails for beginners
Ruby on Rails for beginners
 
Ruby on Rails Presentation
Ruby on Rails PresentationRuby on Rails Presentation
Ruby on Rails Presentation
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
 
Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 

Minicurso JSON & Ajax

  • 2. O que é JSON? • É uma notação de Objeto JavaScript. • É usado para armazenar e transportar informações de texto, como XML. • JSON é menor e mais rápido que o XML.
  • 3. Sintaxe • Chaves {} é usado para envolver objetos. • Colchetes [] é usado para envolver matrizes. • Os dados são colocados em pares de nome/valor. • Os dados são separados por vírgula.
  • 6. Convertendo Objetos JavaScript para JSON • Para converter objetos JavaScript para o formato JSON utilizamos o método stringify do objeto JSON no JavaScript. • Exemplo: JSON.stringify(object); Acessar o exemplo
  • 7. Convertendo JSON para Objetos JavaScript • Vamos usar o método parseJSON da biblioteca jQuery para converter os dados em JSON para objetos JavaScript. • Exemplo: jQuery.parseJSON(json); Acessar o exemplo
  • 8. O que é AJAX? • AJAX é a sigla de Asynchronous JavaScript And XML. • Apesar do nome contêm a palavra XML, ele é geralmente utilizado com JSON. • A idéia do AJAX é permitir o carregamento de somente algumas partes da página web, sem a necessidade de atualizar a página inteira. • Exemplos: Google Maps, Gmail, Facebook, etc.
  • 9. AJAX com jQuery • É possível utilizar o AJAX facilmente utilizando a biblioteca jQuery utilizando o método $.ajax(opcoes). Acessar o exemplo
  • 10. POST e GET • Além da função $.ajax(), o jQuery disponibiliza a função $.post() e $.get() como funções de conveniência. Acessar o exemplo