minicurso json & ajax

11

Click here to load reader

Upload: wilker-iceri

Post on 02-Jul-2015

529 views

Category:

Technology


2 download

DESCRIPTION

Minicurso de JSON & AJAX oferecido aos alunos da FATEC.

TRANSCRIPT

Page 1: Minicurso JSON & Ajax

Minicurso

JSON e AJAXInstrutor: Wilker Iceri

Page 2: Minicurso JSON & Ajax

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.

Page 3: Minicurso JSON & Ajax

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.

Page 4: Minicurso JSON & Ajax

Sintaxe

Acessar o exemplo

Page 5: Minicurso JSON & Ajax

Sintaxe

Acessar o exemplo

Page 6: Minicurso JSON & Ajax

Convertendo Objetos JavaScript para

JSON

Acessar o exemplo

• Para converter objetos JavaScript para o formato JSON utilizamos o método stringify do objeto JSON no JavaScript.

• Exemplo: JSON.stringify(object);

Page 7: Minicurso JSON & Ajax

Convertendo JSON para Objetos

JavaScript

Acessar o exemplo

• Vamos usar o método parseJSON da biblioteca jQuery para converter os dados em JSON para objetos JavaScript.

• Exemplo: jQuery.parseJSON(json);

Page 8: Minicurso JSON & Ajax

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.

Page 9: Minicurso JSON & Ajax

AJAX com jQuery• É possível utilizar o AJAX facilmente utilizando a biblioteca jQuery utilizando o método $.ajax(opcoes).

Acessar o exemplo

Page 10: Minicurso JSON & Ajax

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

Page 11: Minicurso JSON & Ajax

FIM...