JSON - Présentation

JSON: Java Script Objet Notation.

JSON est une syntaxe pour stocker et échanger des données.

JSON est un texte écrit avec la notation objet JavaScript.

Échange de données
Lors de l'échange de données entre un navigateur et un serveur, les données
ne peuvent être que du texte.

JSON est un texte, et nous pouvons convertir tout objet JavaScript en JSON, et
envoyer JSON au serveur.

Nous pouvons également convertir toute JSON reçue du serveur en objets

JavaScript.

De cette façon, nous pouvons travailler avec les données sous forme d'objets
JavaScript, sans analyse syntaxique et traductions compliquées.

Envoi de données
Si vous avez des données stockées dans un objet JavaScript, vous pouvez
convertir l'objet en JSON, et l'envoyer à un serveur:

Exemple
var myObj = { "name":"John", "age":31, "city":"New York" };
var myJSON = [Link](myObj);
[Link] = "demo_json.php?x=" + myJSON;

Réception de données
Si vous recevez des données au format JSON, vous pouvez le convertir en un
objet JavaScript:
Exemple
var myJSON = '{ "name":"John", "age":31, "city":"New York" }';
var myObj = [Link](myJSON);
[Link]("demo").innerHTML = [Link];

Stocker des données

Lors du stockage de données, les données doivent avoir un certain format, et
quel que soit l’endroit où vous choisissez de le stocker, le texte est toujours
l’un des formats légal.

JSON permet de stocker des objets JavaScript sous forme de texte.

Exemple
Stockage de données dans le stockage local

//Storing data:
myObj = { "name":"John", "age":31, "city":"New York" };
myJSON = [Link](myObj);
[Link]("testJSON", myJSON);

//Retrieving data:
text = [Link]("testJSON");
obj = [Link](text);
[Link]("demo").innerHTML = [Link];

Qu'est-ce que JSON?

 JSON signifie J ava S cript O bjet N otation
 JSON est un format léger d'échange de données
 JSON est « auto-description » et facile à comprendre
 JSON est indépendant du langage *

*
JSON utilise la syntaxe JavaScript, mais le format JSON est du texte.
Le texte peut être lu et utilisé comme format de données par un langage de
programmation.

Le format JSON a été spécifié par Douglas Crockford .

Pourquoi utiliser JSON?
Étant donné que le format JSON est un texte seulement, il peut facilement
être envoyé vers et à partir d'un serveur, et utilisé comme format de données
par un langage de programmation.

JavaScript a une fonction intégrée pour convertir une chaîne, écrite au format
JSON, en objets JavaScript natifs:

[Link]()

Donc, si vous recevez des données d'un serveur, au format JSON, vous
pouvez l'utiliser comme tout autre objet JavaScript.

JSON Syntaxe
La syntaxe JSON est un sous-ensemble de la syntaxe JavaScript.

JSON Règles de syntaxe

La syntaxe JSON est dérivée de la syntaxe JavaScript de notation objet:

 Les données sont en paires nom / valeur

 Les données sont séparées par des virgules
 accolades détiennent des objets
 Les crochets détiennent des tableaux

{ "name":"John", "age":31, "city":"New York" };

JSON données - Un nom et une valeur

Les données JSON sont écrites sous forme de paires nom / valeur.

Une paire nom / valeur est constituée d'un nom de champ (entre guillemets),
suivi de deux points, suivi d'une valeur:

Exemple
"name":"John"

Les noms JSON nécessitent des guillemets doubles. Les noms JavaScript ne le
font pas.
JSON - Évalue à des objets JavaScript
Le format JSON est presque identique aux objets JavaScript.

En JSON, les noms (clé) doivent être des chaînes, écrites avec des guillemets
doubles:

JSON
{ "name":"John" }

En JavaScript, les noms (clé) peuvent être des chaînes, des nombres ou des
noms d'identification:

JavaScript
{ name:"John" }

Les valeurs JSON

En JSON, les valeurs doivent être l' un des types de données suivants:

 un string
 un nombre
 un objet (objet JSON)
 un tableau
 un booléen
 nul

les valeurs JavaScript peuvent être tout ce qui précède, ainsi que toute autre
expression JavaScript valide, y compris:

 une fonction
 Une date
 indéfini

En JSON, les valeurs de chaîne doivent être écrits avec des guillemets
doubles:

JSON
{ "name":"John" }

En JavaScript, vous pouvez écrire des valeurs de chaîne avec double ou des
guillemets simples:

JavaScript
{ name:'John' }

JSON JavaScript Syntaxe

Parce que la syntaxe JSON est dérivée de la notation objet JavaScript, très peu
de logiciel supplémentaire est nécessaire pour travailler avec JSON dans les
JavaScript.

Avec JavaScript, vous pouvez créer un objet et lui affecter des données,
comme ceci:

Exemple
var person = { "name":"John", "age":31, "city":"New York" };

Vous pouvez accéder à un objet JavaScript comme ceci:

Exemple
// returns John
[Link];

Il peut également être consulté comme ceci:

Exemple
person["name"];

les données peuvent être modifiés comme ceci:

Exemple
[Link] = "Gilbert";

Il peut également être modifié comme suit:

Exemple
person["name"] = "Gilbert";

JavaScript tableaux JSON

De la même façon des objets JavaScript peuvent être utilisés comme JSON,
les tableaux JavaScript peuventt également être utilisés comme JSON.

JSON fichiers
 Le type de fichier pour les fichiers JSON est « .json »
 Le type MIME pour le texte JSON est "application / json"

JSON vs XML
JSON et XML peuvent être utilisés pour recevoir des données à partir d'un
serveur Web.

Dans les exemples de JSON et XML suivants, tout deux définissent un objet
employés, avec un tableau de 3 employés:

JSON Exemple
{"employees":[
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"Anna", "lastName":"Smith" },
{ "firstName":"Peter", "lastName":"Jones" }]
}

Exemple XML
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>

<firstName>Peter</firstName> <lastName>Jones</lastName>
 </employee>
</employees>

JSON est comme XML Parce que

 tout deux JSON et XML sont « auto décrivant » (lisible par l'homme)
 tout deux JSON et XML sont hiérarchiques (valeurs dans les valeurs)
 tout deux JSON et XML peuvent être analysés et utilisés par de nombreux
langages de programmation
 tout deux JSON et XML peuvent être récupérés avec un XMLHttpRequest

JSON est différent de XML Parce que

 JSON ne pas utiliser la balise de fin
 JSON est plus court
 JSON est plus rapide à lire et à écrire
 JSON peut utiliser des tableaux

La plus grande différence est:

XML doit être analysé avec un analyseur XML. JSON peut être analysé par
une fonction JavaScript standard.

Pourquoi JSON est meilleure que XML

XML est beaucoup plus difficile à analyser que JSON.
JSON est analysé dans un objet JavaScript prêt à l'emploi.

Pour les applications AJAX, JSON est plus rapide et plus facile que XML:

Utilisation de XML

 Fetch un document XML

 Utilisez le DOM XML en boucle dans le document
 extraire des valeurs et stocker dans des variables

En utilisant JSON

 Fetch une chaîne JSON

 [Link] la chaîne JSON
JSON Types de données
Types de données valides
En JSON, les valeurs doivent être l'un des types de données suivants:

 un string
 un nombre
 un objet (objet JSON)
 un tableau
 un booléen
 nul

Les valeurs JSON ne peuvent pas être l'un des types de données suivants:

 une fonction
 Une date
 indéfini

JSON String
Les chaînes en JSON doivent être écrites entre guillemets.

Exemple
{ "name":"John" }

JSON nombre
Les nombres en JSON doit être un nombre entier ou une virgule flottante.

Exemple
{ "age":30 }

Objets JSON
Les valeurs en JSON peuvent être des objets.
Exemple
{
"employee":{ "name":"John", "age":30, "city":"New York" }
}

Les objets en tant que valeurs dans JSON doivent suivre les mêmes règles
que les objets JSON.

JSON tableaux
Les valeurs en JSON peuvent être des tableaux.

Exemple
{
"employees":[ "John", "Anna", "Peter" ]
}

JSON booléens
Les valeurs en JSON peut être vrai / faux.

Exemple
{ "sale":true }

JSON null
Les valeurs en JSON peuvent être nulles.

Exemple
{ "middlename":null }

JSON objets
Syntaxe Object
Exemple
{ "name":"John", "age":30, "car":null }

objets JSON sont entourés par des accolades {}.

objets JSON sont écrits par paires clé / valeur.

Les clés doivent être des chaînes, et les valeurs doivent être un type de
données JSON valide (chaîne, nombre, objet, tableau, booléen ou nulle).

Les clés et les valeurs sont séparées par deux points.

Chaque paire clé / valeur est séparée par une virgule.

Accès aux valeurs d'objet

Vous pouvez accéder aux valeurs d'objet en utilisant la notation de point (.):

Exemple
myObj = { "name":"John", "age":30, "car":null };
x = [Link];

Vous pouvez également accéder aux valeurs d'objet en utilisant la notation

crochet ([]):

Exemple
myObj = { "name":"John", "age":30, "car":null };
x = myObj["name"];

Looping un objet
Vous pouvez parcourir les propriétés d'un objet en utilisant la boucle for-in:

Exemple
myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
[Link]("demo").innerHTML += x;
}

Pour accéder à la valeur de la propriété, utilisez la notation crochet ([]):

Exemple
myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
[Link]("demo").innerHTML += myObj[x];
}

Emboîtée objets JSON

Les valeurs dans un objet JSON peut être un autre objet JSON.

Exemple
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
}
}

Vous pouvez accéder à des objets JSON imbriqués en utilisant la notation de

points ou la notation de crochet:

Exemple
x = [Link].car2;
//or:
x = [Link]["car2"];

Modifier les valeurs

Vous pouvez utiliser la notation point pour modifier une valeur dans un objet
JSON:
Exemple
[Link].car2 = "Mercedes";

Vous pouvez également utiliser la notation de crochet pour modifier une

valeur dans un objet JSON:

Exemple
[Link]["car2"] = "Mercedes";

Supprimer des propriétés de l'objet

Utilisez le mot-clé de suppression pour supprimer des propriétés d'un objet
JSON:

Exemple
delete [Link].car2;

JSON tableaux
Des tableaux comme des objets JSON
Exemple
[ "Ford", "BMW", "Fiat" ]

Les tableaux en JSON sont presque les mêmes que les tableaux en JavaScript.

Dans JSON, les valeurs de tableau doit être de type chaîne, nombre, objet,
tableau booléen ou nulle .

En JavaScript, les valeurs du tableau peuvent être tout ce qui précède, ainsi
que toute autre expression JavaScript valide, y compris les fonctions,
les dates et non définie.

Tableaux dans des objets JSON

Les tableaux peuvent être des valeurs d'une propriété d'objet:
Exemple
{
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}

Accès aux valeurs d’un tableau

Vous accédez aux valeurs du tableau en utilisant le numéro d'index:

Exemple
x = [Link][0];

Boucler dans un tableau

Vous pouvez accéder à des valeurs de tableau en utilisant une boucle for-in:

Exemple
for (i in [Link]) {
x += [Link][i];
}

Ou vous pouvez utiliser une boucle:

Exemple
for (i = 0; i < [Link]; i++) {
x += [Link][i];
}

Les tableaux emboîtés dans des objets

JSON
Les valeurs dans un tableau peut aussi être un autre tableau, ou même un
autre objet JSON:

Exemple
myObj = {
"name":"John",
"age":30,
"cars": [
{ "name":"Ford", "models":
[ "Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
}

Pour accéder à des tableaux à l'intérieur des tableaux, en utilisant une boucle
for-in pour chaque matrice:

Exemple
for (i in [Link]) {
x += "<h1>" + [Link][i].name + "</h1>";
for (j in [Link][i].models) {
x += [Link][i].models[j];
}
}

Modifier les valeurs d’un tableau

Utiliser le numéro d'index pour modifier un tableau:

Exemple
[Link][1] = "Mercedes";

Supprimer les éléments d’un tableau

Utilisez le mot-clé de suppression pour supprimer des éléments d'un tableau:

Exemple
delete [Link][1];

JSON .parse ()
Une utilisation courante de JSON est d'échanger des données vers / depuis
un serveur web.

Lors de la réception des données à partir d'un serveur Web, les données
sont toujours une chaîne.

Analyser les données avec [Link] (), et les données devient un objet
JavaScript.

Exemple - analyse JSON

Imaginez que nous avons reçu ce texte à partir d'un serveur Web:

'{ "name":"John", "age":30, "city":"New York"}'

Utilisez la fonction JavaScript [Link] () pour convertir le texte en un objet

JavaScript:

var obj = [Link]('{ "name":"John", "age":30, "city":"New

York"}');

Assurez-vous que le texte est écrit au format JSON, ou bien vous obtiendrez
une erreur de syntaxe.

Utilisez l'objet JavaScript dans votre page:

Exemple
<p id="demo"></p>

<script>
[Link]("demo").innerHTML = [Link] + ", " +
[Link];
</script>
Essayez vous-même »

JSON à partir du serveur

Vous pouvez demander JSON à partir du serveur en utilisant une requête AJAX

Tant que la réponse du serveur est écrite au format JSON, vous pouvez
analyser la chaîne dans un objet JavaScript.
Exemple
Utilisez le XMLHttpRequest pour obtenir des données à partir du serveur:

var xmlhttp = new XMLHttpRequest();

[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
var myObj = [Link]([Link]);
[Link]("demo").innerHTML =
[Link];
}
};
[Link]("GET", "json_demo.txt", true);
[Link]();

json_demo.txt

{
"name":"John",
"age":31,
"pets":[
{ "animal":"dog", "name":"Fido" },
{ "animal":"cat", "name":"Felix" },
{ "animal":"hamster", "name":"Lightning" }
]
}

Tableau JSON
Lors de l'utilisation du [Link] () sur un JSON dérivé d'un tableau, le
procédé retourne un tableau JavaScript, au lieu d'un objet JavaScript.

Exemple
Le JSON renvoyé par le serveur est un tableau:

var xmlhttp = new XMLHttpRequest();

[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
var myArr = [Link]([Link]);
[Link]("demo").innerHTML = myArr[0];
}
};
[Link]("GET", "json_demo_array.txt", true);
[Link]();

json_demo_array.txt
[ "Ford", "BMW", "Audi", "Fiat" ]

Des exceptions
Dates Parsing
Les objets date ne sont pas autorisés dans JSON.

Si vous avez besoin d'inclure une date, l’écrire comme une chaîne.

Vous pouvez le convertir en objet date ultérieure:

Exemple
Convertir une chaîne en une date:

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New

York"}';
var obj = [Link](text);
[Link] = new Date([Link]);

[Link]("demo").innerHTML = [Link] + ", " +

[Link];

Ou bien , vous pouvez utiliser le second paramètre, de la fonction [Link]

(), appelée rénovateur .

Le paramètre rénovateur est une fonction qui vérifie chaque propriété, avant
de retourner la valeur.

Exemple
Convertir une chaîne en date, en utilisant la fonction rénovateur :

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New

York"}';
var obj = [Link](text, function (key, value) {
if (key == "birth") {
return new Date(value);
} else {
return value;
}});

[Link]("demo").innerHTML = [Link] + ", " +

[Link];
Fonctions d'analyse
Les fonctions ne sont pas autorisées dans JSON.

Si vous avez besoin d'inclure une fonction, écrire comme une chaîne.

Vous pouvez le reconvertir en fonction plus tard:

Exemple
Convertir une chaîne en fonction:

var text = '{ "name":"John", "age":"function () {return 30;}",

"city":"New York"}';
var obj = [Link](text);
[Link] = eval("(" + [Link] + ")");

[Link]("demo").innerHTML = [Link] + ",

" + [Link]();

Vous devriez éviter d'utiliser des fonctions JSON, les fonctions vont perdre
leur champ d'application, et vous devez utiliser eval () pour les convertir en
fonctions.

Support du navigateur
La fonction [Link] () est incluse dans tous les principaux navigateurs et dans la
dernière norme ECMAScript (JavaScript):

Web Browsers Support

 Firefox 3.5
 Internet Explorer 8
 Chrome
 Opera 10

 Safari 4

Pour les anciens navigateurs, une bibliothèque JavaScript est disponible

à [Link] .
JSON .stringify ()
Une utilisation courante de JSON est d'échanger des données vers / depuis
un serveur web.

Lors de l'envoi des données à un serveur Web, les données doivent être
une chaîne.

Convertir un objet JavaScript dans une chaîne avec [Link] ().

Stringify un objet JavaScript

Imaginez que nous avons cet objet en JavaScript:

var obj = { "name":"John", "age":30, "city":"New York"};

Utilisez la fonction JavaScript [Link] () pour le convertir en une chaîne.

var myJSON = [Link](obj);

Le résultat sera une chaîne de caractères suivant la notation JSON.

myJSON est désormais une chaîne, et prêt à être envoyé à un serveur:

Exemple
var obj = { "name":"John", "age":30, "city":"New York"};
var myJSON = [Link](obj);
[Link]("demo").innerHTML = myJSON;

Stringify un tableau JavaScript

Il est également possible de stringify un tableaux JavaScript:

Imaginez que nous avons ce tableau en JavaScript:

var arr = [ "John", "Peter", "Sally", "Jane" ];

Utilisez la fonction JavaScript [Link] () pour le convertir en une chaîne.

var myJSON = [Link](arr);

Le résultat sera une chaîne de caractères suivante la notation JSON.

myJSON est désormais une chaîne, et prêt à être envoyé à un serveur:

Exemple
var arr = [ "John", "Peter", "Sally", "Jane" ];
var myJSON = [Link](arr);
[Link]("demo").innerHTML = myJSON;

Des exceptions
Dates stringify
En JSON, les objets de date ne sont pas autorisés. La fonction [Link] ()
vous permet de convertir des dates en chaînes.

Exemple
var obj = { "name":"John", "today":new Date(), "city":"New
York"};
var myJSON = [Link](obj);

[Link]("demo").innerHTML = myJSON;

Fonctions stringify
En JSON, les fonctions ne sont pas autorisées en tant que valeurs d'objet.

La fonction [Link] () supprimera toutes les fonctions d'un objet

JavaScript, la clé et la valeur:

Exemple
var obj = { "name":"John", "age":function ()
{return 30;}, "city":"New York"};
var myJSON = [Link](obj);

[Link]("demo").innerHTML = myJSON;

Cela peut être omis si vous convertissez vos fonctions en chaînes avant
d'exécuter la fonction [Link] ().
Exemple
var obj = { "name":"John", "age":"function ()
{return 30;}", "city":"New York"};
[Link] = [Link]();
var myJSON = [Link](obj);

[Link]("demo").innerHTML = myJSON;

Vous devriez éviter d'utiliser des fonctions JSON, les fonctions vont perdre
leur champ d'application, et vous devez utiliser eval () pour les convertir en
fonctions.

Support du navigateur
La fonction [Link] () est inclus dans tous les principaux navigateurs et dans la
dernière norme ECMAScript (JavaScript):

Web Browsers Support

 Firefox 3.5
 Internet Explorer 8
 Chrome
 Opera 10

 Safari 4

JSON PHP
Une utilisation courante de JSON est de lire les données à partir d'un
serveur Web, et afficher les données dans une page Web.

Ce chapitre vous apprendra comment échanger des données JSON entre le

client et un serveur PHP.

Le fichier PHP
PHP a des fonctions intégrées pour gérer JSON.
Les objets en PHP peuvent être convertis en JSON en utilisant la fonction
PHP json_encode () :

fichier PHP
<?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";

$myJSON = json_encode($myObj);

echo $myJSON;
?>

Le code JavaScript client

Voici un script JavaScript sur le client, à l'aide d'un appel AJAX pour demander
le fichier PHP de l'exemple ci-dessus:

Exemple
Utilisez [Link] () pour convertir le résultat en un objet JavaScript:

var xmlhttp = new XMLHttpRequest();

[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
var myObj = [Link]([Link]);
[Link]("demo").innerHTML =
[Link];
}
};
[Link]("GET", "demo_file.php", true);
[Link]();

Tableau PHP
Les tableaux en PHP seront également convertis en JSON lorsque vous utilisez
la fonction PHP json_encode () :

fichier PHP
<?php
$myArr = array("John", "Mary", "Peter", "Sally");

$myJSON = json_encode($myArr);
echo $myJSON;
?>

Le code JavaScript client

Voici un script JavaScript sur le client, à l'aide d'un appel AJAX pour demander
le fichier PHP de l'exemple du tableau ci-dessus:

Exemple
Utilisez [Link] () pour convertir le résultat dans un tableau JavaScript:

var xmlhttp = new XMLHttpRequest();

[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
var myObj = [Link]([Link]);
[Link]("demo").innerHTML = myObj[2];
}
};
[Link]("GET", "demo_file_array.php", true);
[Link]();

Base de données PHP

PHP est un langage de programmation côté serveur, et doit être utilisé pour
les opérations qui ne peuvent être effectuées par un serveur, comme l'accès
à une base de données.

Imaginez que vous avez une base de données sur le serveur, contenant les
clients, les produits et les fournisseurs.

Vous souhaitez faire une demande au serveur sur lequel vous demandez les
10 premiers enregistrements de la table « clients »:

Exemple
Utilisez [Link] () pour convertir l'objet JavaScript en JSON:

obj = { "table":"customers", "limit":10 };

dbParam = [Link](obj);
xmlhttp = new XMLHttpRequest();
[Link] = function() {
if ([Link] == 4 && [Link] == 200) {

[Link]("demo").innerHTML = [Link];
 }
};
[Link]("GET", "json_demo_db.php?x=" + dbParam, true);
[Link]();

Exemple expliqué:
 Définir un objet contenant une propriété de table et une propriété
limite.
 Convertir l'objet en une chaîne JSON.
 Envoyez une demande au fichier PHP, avec la chaîne JSON en tant que
paramètre.
 Attendre jusqu'à ce que la requête retourne le résultat (comme JSON)
 Afficher le résultat reçu à partir du fichier PHP.

Jetez un coup d'oeil au fichier PHP:

fichier PHP
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn
= new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->table." LIMIT
".$obj->limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

Fichier PHP expliqué:

 convertie la demande en objet, en utilisant la fonction
PHP json_decode () .
 Accédez à la base de données, et remplir un tableau avec les données
demandées.
 Ajouter la matrice à un objet, et retourner l'objet comme JSON
en utilisant le json_encode () fonction.

Boucle à travers le résultat

Convertir le résultat reçu à partir du fichier PHP dans un objet JavaScript, ou
dans ce cas, un tableau JavaScript:

Exemple
Utilisez [Link] () pour convertir le JSON en un objet JavaScript:
...
[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
myObj = [Link]([Link]);
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
[Link]("demo").innerHTML = txt;
}
};
...

PHP Method = POST

Lors de l'envoi des données au serveur, il est souvent préférable d'utiliser la
méthode HTTP POST.

Pour envoyer des requêtes AJAX en utilisant la méthode POST, préciser la

méthode et l'en-tête correct.

Les données envoyées au serveur doivent maintenant être un argument à la

méthode send ():

Exemple
obj = { "table":"customers", "limit":10 };
dbParam = [Link](obj);
xmlhttp = new XMLHttpRequest();
[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
myObj = [Link]([Link]);
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
[Link]("demo").innerHTML = txt;
}
};
[Link]("POST", "json_demo_db_post.php", true);
[Link]("Content-type", "application/x-www-
form-urlencoded");
[Link]("x=" + dbParam);

La seule différence dans le fichier PHP est la méthode pour obtenir les
données transférées.

fichier PHP
Utilisez $ _POST au lieu de $ _GET:

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);

$conn
= new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->table." LIMIT
".$obj->limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

JSON HTML
JSON peut être traduit facilement en JavaScript.

JavaScript peut être utilisé pour produire de l’HTML dans vos pages web.

Tableau HTML
Faire un tableau HTML avec les données reçues comme JSON:

Exemple
obj = { "table":"customers", "limit":20 };
dbParam = [Link](obj);
xmlhttp = new XMLHttpRequest();
[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
myObj = [Link]([Link]);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].name + "</td></tr>";
}
txt += "</table>"
[Link]("demo").innerHTML = txt;
}
}
[Link]("POST", "json_demo_db_post.php", true);
[Link]("Content-type", "application/x-www-
form-urlencoded");
[Link]("x=" + dbParam);

Tableau HTML dynamique

Faire le tableau HTML basé sur la valeur d'un menu
déroulant:

Exemple
<select id="myselect" onchange="change_myselect([Link])">
<option value="">Choose an option:</option>
<option value="customers">Customers</option>
<option value="products">Products</option>
<option value="suppliers">Suppliers</option>
</select>

<script>
function change_myselect(sel) {
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "table":sel, "limit":20 };
dbParam = [Link](obj);
xmlhttp = new XMLHttpRequest();
[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
myObj = [Link]([Link]);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" +
myObj[x].name + "</td></tr>";
}
txt += "</table>"
[Link]("demo").innerHTML = txt;
}
};
[Link]("POST", "json_demo_db_post.php", true);
[Link]("Content-type", "application/x-
www-form-urlencoded");
[Link]("x=" + dbParam);
}
</script>
HTML liste déroulante
Faire une liste déroulante HTML avec les données reçues comme JSON:

Exemple
obj = { "table":"customers", "limit":20 };
dbParam = [Link](obj);
xmlhttp = new XMLHttpRequest();
[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
myObj = [Link]([Link]);
txt += "<select>"
for (x in myObj) {
txt += "<option>" + myObj[x].name;
}
txt += "</select>"
[Link]("demo").innerHTML = txt;
}
}
[Link]("POST", "json_demo_db_post.php", true);
[Link]("Content-type", "application/x-www-
form-urlencoded");
[Link]("x=" + dbParam);

JSONP
JSONP est une méthode pour envoyer des données JSON sans se soucier
des questions inter-domaines.

JSONP ne utilise pas l'objet XMLHttpRequest.

JSONP utilise la balise <script> à la place.

JSONP Intro
JSONP signifie JSON avec Rembourrage.

Demander un fichier à partir d'un autre domaine peut causer des problèmes,
en raison de la politique inter-domaines.

Demander un script externe d'un autre domaine n'a pas ce problème.

JSONP utilise cet avantage, et demande les fichiers utilisant la balise script au
lieu de l'objet XMLHttpRequest.

<script src="demo_jsonp.php">

Le serveur de fichiers
Le fichier sur le serveur encapsule le résultat dans un appel de fonction:

Exemple
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>

myFunc({ "name":"John", "age":30, "city":"New York" });

Le résultat retourne un appel à une fonction nommée « myFunc » avec les

données JSON en tant que paramètre.

Assurez-vous que la fonction existe sur le client.

La fonction JavaScript
La fonction nommée « myFunc » est situé sur le client, et prêt à traiter les
données JSON:

Exemple
function myFunc(myObj) {
[Link]("demo").innerHTML = [Link];
}

Création d'un Tag script dynamique

L'exemple ci-dessus exécutera la fonction « myFunc » lorsque la page se
charge, en fonction de l'endroit où vous mettez la balise de script, ce qui est
très satisfaisant.
La balise script ne doit être créé en cas de besoin:

Exemple
Créer et insérer la balise <script> quand un bouton est cliqué:

function clickButton() {
var s = [Link]("script");
[Link] = "demo_jsonp.php";
[Link](s);
}

Résultat dynamique JSONP

Les exemples ci-dessus sont encore très statiques.

Faites l'exemple dynamique en envoyant JSON au fichier php, et que le fichier

php retourner un objet JSON basé sur les informations qu'il obtient.

fichier PHP
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn
= new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table."
LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo "myFunc(".json_encode($outp).")";
?>

Fichier PHP expliqué:

 Autre la demande en objet, en utilisant la fonction PHP json_decode
() .
 Accédez à la base de données, et remplir un tableau avec les données
demandées.
 Ajouter le tableau à un objet.
 Convertir le tableau en utilisant le JSON json_encode () fonction.
 Enveloppez « myFunc () » autour de l'objet de retour.

Exemple JavaScript
La fonction « myFunc » sera appelé à partir du fichier php:

function clickButton() {
var obj, s
obj = { "table":"products", "limit":10 };
s = [Link]("script");
[Link] = "jsonp_demo_db.php?x=" + [Link](obj);
[Link](s);
}
function myFunc(myObj) {
var x, txt = "";
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
[Link]("demo").innerHTML = txt;
}
Essayez vous-même »

Fonction de rappel
Lorsque vous avez aucun contrôle sur le fichier du serveur, comment voulez-
vous obtenir le fichier du serveur pour appeler la fonction correcte?

Parfois, le fichier du serveur offre une fonction de rappel comme paramètre:

Exemple
Le fichier php appellera la fonction que vous passez comme paramètre de
rappel:

function clickButton() {
var s = [Link]("script");
[Link] = "jsonp_demo_db.php?callback=myDisplayFunction";
[Link](s);
}