JSONtoujours deux fois

Comment on dit ?

Djîçonne

J’y sonne

Djéy-sonne

Jay SON

Jason

Comment on dit ?

Djîçonne

J’y sonne

Djéy-sonne

Jay SON

Jason -> remember G.I. Joe

Comment on dit ?

Djîçonne

J’y sonne

Djéy-sonne

Jay SON

Jason -> remember G.I. Joe-> remember DJ(ay)

Bon

C’est quoi, sinon ?

le JSON, c’est quoi ?

JavaScript Objet Notation

C’est quoi ?

un format de données

basé sur la syntaxe du JavaScript

assez lisible pour l’humain

assez facile à écrire à la main (ou au pied)

Un fichier JSON

à quoi ça ressemble ?

Un fichier JSON

c’est beau

Un fichier JSON

et à l’intérieur ?

Un fichier JSON

et à l’intérieur ?

C’est beau aussi !

Mais d’abord, un peu d’histoire...

{}Ceci n’est pas un objet

{}C’est la représentation d’un objet

en JavaScript

{}C’est la représentation d’un objet

en JavaScript

et aussi la base de la notation JSON

Rappelons-nous...La syntaxe du JavaScript pour les données de base

Rappelons-nous...La syntaxe du JavaScript

pour créer un objet

Un objet, des propriétés.

Un objet, c’est un peu comme un étagedans une structure de donnée.

On peut y stocker des choses,qui deviennent ses propriétés.

Exemple concret

et ainsi de suite...

En imbriquant des structures, on arrive à créer un arbre de données

qui peut devenir complexe, mais reste toujours logique.

OK

OKet pour l’utiliser ?

facile !pour l’utiliser ?

JSON vs JSONP

Un fichier JSON “propre” :

JSON vs JSONP

Un fichier JSON “propre” :

Si je l’ajoute tel quel à ma page HTML,ça ne va pas aller...

JSON vs JSONPParce que :

- sécurité Cross-Domaine- syntax error

JSON vs JSONP

Donc :il faut un moyen de rendre le JSON utilisable

par les scripts de la page.

Parce que :

- sécurité Cross-Domaine- syntax error

JSONP = JSON with Padding

JSONP = JSON with Padding

Le padding, ce n’est pas le pudding

JSONP = JSON with Padding

Le padding, c’est un truc que le serveur rajoute autour des données

pour qu’on puisse les toucher.

JSONP = JSON with Padding

Le padding, ça peut être :

Assignation

JSONP = JSON with Padding

Le padding, ça peut être :

Assignation Appel de fonction

JSONP = JSON with Padding

Le padding, ça peut être :

En pratique

JSON : à charger avec un XMLHttpRequest

JSONP : à intégrer avec une balise <script>

Tu veux une démo ?

Les données de l’école

schoolData.jsque je dois encore vous transmettre

Bon, ça suffit !amusez-vous, maintenant.