MaisonUtileFormats de stockage de données XML et JSON. Format JSON : qu'est-ce que c'est, comment créer et ouvrir un fichier. Développement et application
Formats de stockage de données XML et JSON. Format JSON : qu'est-ce que c'est, comment créer et ouvrir un fichier. Développement et application
JSON est un format de texte pour l'enregistrement de données. Il vous permet de représenter sous forme de texte à la fois un nombre ou une chaîne unique et des structures complexes, par exemple des tableaux contenant des données. L'utilisation de ce format d'enregistrement est pratique car il est lisible et intuitif, tout en permettant de stocker des structures de données très complexes. De plus, il est plus compact que XML, donc à mon avis il est plus préférable pour échanger des données entre un navigateur web et un serveur.
Syntaxe JSON avec exemples
Le format json est généralement écrit en 2 variantes :
1. Séquence de valeurs. Par exemple, la séquence 10, 15 et « test » au format JSON ressemblerait à ceci :
2. Enregistrement sous forme de paires clé : valeur. Par exemple:
(« Nom complet » : « Ivanov Sergey », « Date de naissance » : « 03/09/1975 »)
En langage PHP depuis la version 5.2. il n'y a que 4 fonctions :
json_decode - Décode une chaîne JSON (obtient les données d'une chaîne au format json)
json_encode - Renvoie une représentation JSON des données (convertit les données en chaîne json)
json_last_error_msg - Renvoie une chaîne indiquant le message d'erreur du dernier appel à json_encode() ou json_decode()
json_last_error - Renvoie la dernière erreur
En gros, pour la plupart, seules deux fonctions sont utilisées : json_encode et json_decode. Je n'entrerai pas dans les détails de leur syntaxe, vous pouvez consulter php.net pour plus de détails. Exemple d'utilisation :
Attention : lors de l'encodage de données en russe au format JSON, la fonction json_encode convertit les caractères russes en Unicode, c'est-à-dire les remplace par \uXXXX et ainsi la chaîne json devient illisible pour les humains (mais compréhensible pour le navigateur). Si vous souhaitez éviter la conversion en Unicode (par exemple, lors du débogage du code), vous pouvez simplement utiliser l'option JSON_UNESCAPED_UNICODE.
De plus, pour que les barres obliques d'échappement ne soient pas ajoutées lors du codage et pour que les chaînes contenant des nombres soient codées sous forme de nombres, vous pouvez utiliser JSON_UNESCAPED_SLASHES et JSON_NUMERIC_CHECK. De ce fait, pour rendre la chaîne json lisible par un humain, nous ferons par exemple ceci :
Encore un point : si vous souhaitez que la fonction json_decode renvoie un tableau lors du décodage d'une chaîne json, ajoutez simplement un deuxième paramètre à la fonction égal à true.
Fonctions JavaScript pour travailler avec le format JSON
Commençons par le fait que le format JSON a été inventé à l'origine pour le langage JavaScript et est ensuite devenu simplement un format de texte distinct utilisé dans différents langages. Apparemment, c'est pourquoi la syntaxe JSON est très similaire à la syntaxe d'écriture d'objets et de tableaux ordinaires.
// Exemple de tableau en JavaScript arr = ; alerte(arr); // affichera 1 // Exemple d'objet en JavaScript obj = ( "name": "Vasya", "age": 35, "isAdmin": false ) alert(obj.name); // affichera "Vasya"
Fonctions JavaScript utilisées pour convertir vers et depuis le format JSON :
JSON.parse - décodage d'une chaîne JSON (conversion d'une chaîne en objets et/ou tableaux)
JSON.stringify - renvoie une représentation JSON des données (conversion d'objets et/ou de tableaux en chaîne json)
Un exemple simple de décodage d'une chaîne json en un tableau avec des nombres :
Lors de la sérialisation (conversion) d'un objet en chaîne JSON, la méthode toJSON de cet objet est appelée, si elle existe. S'il n'y a pas de méthode, alors toutes les propriétés de l'objet sont répertoriées. Un exemple de conversion d'un objet avec la méthode toJSON :
En fait, j'utilise personnellement le format JSON dans 2 situations principales :
1. Transfert de données entre le navigateur et le serveur à l'aide de requêtes Ajax.
Par exemple, nous avons une page sur laquelle nous devons mettre à jour les données sans recharger la page. Disons que vous avez besoin d'informations avec une liste d'employés et leurs données à « télécharger » depuis le serveur.
En JavaScript, à l'aide de jQuery, nous faisons simple et affichons les données sous forme de tableau dans le navigateur :
$.getJSON("get-info.php").success(function(data) ( // requête ajax, les données du serveur seront écrites dans la variable de données htmlstr = "
Je n'ai délibérément pas montré la ligne en forme d'« arbre », car il est transmis exactement sous cette forme. Et comme vous pouvez le constater, l'enregistrement des données au format JSON s'est avéré très compact, ce qui signifie que le transfert de ces données du serveur vers le navigateur sera quasi instantané.
2. Écriture de structures de données complexes dans la base de données.
Parfois, il existe des situations où il n'est pas conseillé de créer une autre table dans la base de données afin de stocker diverses données. Disons qu'un utilisateur inscrit sur le site a la possibilité de personnaliser la couleur de fond et la couleur du texte.
Au lieu de créer un autre tableau pour 2 paramètres, vous pouvez simplement créer une colonne de texte dans le tableau avec la liste des utilisateurs dans laquelle placer les données des paramètres utilisateur. La demande de mise à jour des paramètres pourrait alors, par exemple, ressembler à ceci :
MISE À JOUR des utilisateurs SET settings = "("background-color": "#FFFFFF", "text-color": "#000000")" OÙ user_id = 10
À l'avenir, après avoir reçu des informations de la table des utilisateurs, le script php pourra facilement les reconvertir en un tableau avec des paramètres. Par exemple, si la variable $user_info contient des données obtenues pour un utilisateur à partir de la table users, obtenir un tableau avec des paramètres est très simple :
Ainsi, comme le montrent les exemples, presque toutes les informations peuvent être stockées et transmises au format JSON.
Vous avez sûrement déjà entendu parler de JSON. Qu'est-ce que c'est? Que peut-il faire et comment l'utiliser ?
Dans ce tutoriel, nous aborderons les bases de JSON et aborderons les points suivants :
Qu’est-ce que JSON ?
A quoi sert JSON ?
Comment créer une chaîne JSON ?
Un exemple simple de chaîne JSON.
Comparons JSON et XML.
Comment travailler avec JSON en JavaScript et PHP ?
Qu’est-ce que JSON ?
JSON est un moyen simple, basé sur du texte, de stocker et de transmettre des données structurées. Avec une syntaxe simple, vous pouvez facilement stocker n'importe quoi, depuis un simple nombre jusqu'aux chaînes, tableaux et objets, en texte brut. Vous pouvez également lier des tableaux et des objets pour créer des structures de données complexes.
Une fois la chaîne JSON créée, il est facile de l'envoyer vers une autre application ou vers un autre emplacement du réseau car il s'agit de texte brut.
JSON présente les avantages suivants :
C'est compact.
Ses phrases sont faciles à lire et à composer aussi bien par les humains que par les ordinateurs.
Il peut être facilement converti en structure de données pour la plupart des langages de programmation (nombres, chaînes, booléens, tableaux, etc.)
De nombreux langages de programmation disposent de fonctions et de bibliothèques pour lire et créer des structures JSON.
Le nom JSON signifie JavaScript Object Notation. Comme son nom l'indique, il est basé sur une manière de définir des objets (un peu comme la création de tableaux associatifs dans d'autres langages) et des tableaux.
A quoi sert JSON ?
L'utilisation la plus courante de JSON consiste à envoyer des données du serveur au navigateur. Généralement, les données JSON sont fournies via AJAX, ce qui permet au navigateur et au serveur de communiquer sans avoir à recharger la page.
L'utilisateur clique sur une vignette de produit dans une boutique en ligne.
JavaScript exécuté sur le navigateur génère une requête AJAX au script PHP exécuté sur le serveur, transmettant l'ID du produit sélectionné.
Le script PHP obtient le nom du produit, la description, le prix et d'autres informations de la base de données. Ensuite, il compose une chaîne JSON à partir des données et l'envoie au navigateur.
JavaScript exécuté sur le navigateur reçoit la chaîne JSON, la décode et affiche les informations sur le produit sur la page pour l'utilisateur.
Vous pouvez également utiliser JSON pour envoyer des données du navigateur au serveur en passant une chaîne JSON comme paramètre aux requêtes GET ou POST. Mais cette méthode est moins courante, car le transfert de données via des requêtes AJAX peut être simplifié. Par exemple, l'ID du produit peut être inclus dans l'URL dans le cadre d'une requête GET.
La bibliothèque jQuery dispose de plusieurs méthodes, telles que getJSON() et parseJSON(), qui facilitent la récupération de données à l'aide de JSON via des requêtes AJAX.
Comment créer une chaîne JSON ?
Il existe quelques règles de base pour créer une chaîne JSON :
La chaîne JSON contient soit un tableau de valeurs, soit un objet (un tableau associatif de paires nom/valeur).
Tableau est placé entre crochets ([ et ]) et contient une liste de valeurs séparées par des virgules.
Un objet est entouré d'accolades (( et )) et contient une liste de paires nom/valeur séparées par des virgules.
paire nom/valeur se compose du nom du champ entre guillemets doubles, suivi de deux points (:) et de la valeur du champ.
Signification dans un tableau ou un objet, il peut y avoir :
Nombre (entier ou virgule flottante)
Chaîne (entre guillemets doubles)
Valeur booléenne (vrai ou faux)
Un autre tableau (mis entre crochets)
Un autre objet (entouré d'accolades)
valeur nulle
Pour inclure des guillemets doubles dans une chaîne, vous devez utiliser une barre oblique inverse : \" . Comme avec de nombreux langages de programmation, vous pouvez placer des caractères de contrôle et des codes hexadécimaux dans une chaîne en les faisant précéder d'une barre oblique inverse. Consultez le site Web JSON pour plus de détails.
Exemple de chaîne JSON simple
Ci-dessous un exemple de commande au format JSON :
Nous créons un objet en utilisant des accolades (( et )).
L'objet a plusieurs paires nom/valeur : "orderID": 12345 Une propriété avec le nom "orderId" et une valeur entière 12345 "shopperName": "Vanya Ivanov" une propriété avec le nom "shopperName" et la valeur de chaîne "Vanya Ivanov " "e-mail de l'acheteur": " [email protégé]" Une propriété nommée "shopperEmail" avec une valeur de chaîne " [email protégé]" "contents": [ ... ] Une propriété nommée "contents" dont la valeur est un tableau "orderCompleted": true Une propriété nommée "orderCompleted" et la valeur booléenne true
Il y a 2 objets dans le tableau « contenu » représentant des éléments individuels dans la commande. Chaque objet contient 3 propriétés : productID , productName etQuantity .
À propos, puisque JSON est basé sur la déclaration d'objets JavaScript, vous pouvez rapidement et facilement faire de la chaîne JSON ci-dessus un objet JavaScript :
À bien des égards, vous pouvez considérer JSON comme une alternative au XML, du moins dans le domaine des applications Web. Le concept d'AJAX reposait à l'origine sur l'utilisation de XML pour transférer des données entre le serveur et le navigateur. Mais ces dernières années, JSON est devenu de plus en plus populaire pour le transport de données AJAX.
Si XML est une technologie éprouvée utilisée dans un bon nombre d’applications, JSON présente l’avantage d’être un format de données plus compact et plus facile à reconnaître.
Voici à quoi ressemblerait l’exemple d’objet XML ci-dessus :
N° de commande 12345 Nom du client Vanya Ivanov E-mail du client [email protégé] contenu productID 34 productName Super quantité de produit 1 productID 56 productName Produit miracle quantité 3 orderCompleted true
La version XML est nettement plus grande. En réalité, il comporte 1 128 caractères, alors que la version JSON ne comporte que 323 caractères. La version XML est également assez difficile à comprendre.
Bien sûr, c’est un exemple radical. Et il est possible de créer un enregistrement XML plus compact. Mais même cela sera nettement plus long que l’équivalent JSON.
Travailler avec une chaîne JSON en JavaScript
JSON a un format simple, mais créer manuellement une chaîne JSON est assez fastidieux. De plus, vous devez souvent prendre une chaîne JSON et convertir son contenu en une variable pouvant être utilisée dans le code.
La plupart des langages de programmation disposent d'outils permettant de convertir facilement des variables en chaînes JSON et vice versa.
Créer une chaîne JSON à partir d'une variable
JavaScript possède une méthode JSON.stringify() intégrée qui prend une variable et renvoie une chaîne JSON représentant son contenu. Par exemple, créons un objet JavaScript contenant les informations de commande de notre exemple, puis créons une chaîne JSON à partir de celui-ci :
Notez que la méthode JSON.stringify() renvoie une chaîne JSON sans espaces. Il est plus difficile à lire, mais il est plus compact pour la transmission sur le réseau.
Il existe plusieurs façons d'analyser une chaîne JSON en JavaScript, mais la plus sûre et la plus fiable consiste à utiliser la méthode JSON.parse() intégrée. Il reçoit une chaîne JSON et renvoie un objet ou un tableau JavaScript contenant les données. Par exemple:
Nous avons créé une variable jsonString qui contient la chaîne JSON de notre exemple de commande. Nous transmettons ensuite cette chaîne à la méthode JSON.parse(), qui crée un objet contenant les données JSON et le stocke dans la variable cart. Il ne reste plus qu'à vérifier en affichant les propriétés de l'objet shopperEmail et productName du tableau contents.
En conséquence, nous obtiendrons le résultat suivant :
Dans une application réelle, votre code JavaScript recevrait la commande sous forme de chaîne JSON dans une réponse AJAX du script serveur, transmettrait la chaîne à la méthode JSON.parse(), puis utiliserait les données pour l'afficher sur la page de l'utilisateur.
JSON.stringify() et JSON.parse() ont d'autres fonctionnalités, telles que l'utilisation de fonctions de rappel pour convertir certaines données de manière personnalisée. De telles options sont très utiles pour convertir diverses données en objets JavaScript appropriés.
Travailler avec une chaîne JSON en PHP
PHP, comme JavaScript, possède des fonctions intégrées pour travailler avec des chaînes JSON.
Créer une chaîne JSON à partir d'une variable PHP
La fonction json_encode() prend une variable PHP et renvoie une chaîne JSON représentant le contenu de la variable. Voici notre exemple de commande, écrit en PHP :
Ce code renvoie exactement la même chaîne JSON que dans l'exemple JavaScript :
Dans une application réelle, votre script PHP enverra cette chaîne JSON dans le cadre d'une réponse AJAX au navigateur, où le code JavaScript, à l'aide de la méthode JSON.parse(), l'analysera dans une variable pour l'afficher sur la page de l'utilisateur. .
Vous pouvez transmettre divers indicateurs comme deuxième argument à la fonction json_encode(). Avec leur aide, vous pouvez modifier les principes d'encodage du contenu des variables dans une chaîne JSON.
Créer une variable à partir d'une chaîne JSON
Pour convertir une chaîne JSON en variable PHP, utilisez la méthode json_decode(). Remplaçons notre exemple pour JavaScript par la méthode JSON.parse() par du code PHP :
Par défaut, la fonction json_decode() renvoie les objets JSON sous forme d'objets PHP. Il existe des objets PHP génériques de la classe stdClass. C'est pourquoi nous utilisons -> pour accéder aux propriétés de l'objet dans l'exemple ci-dessus.
Si vous avez besoin d'un objet JSON comme tableau PHP associé, vous devez transmettre true comme deuxième argument à la fonction json_decode(). Par exemple:
Vous pouvez également transmettre d'autres arguments à la fonction json_decode() pour spécifier la profondeur de récursion et comment gérer les grands entiers.
Conclusion
Bien que JSON soit facile à comprendre et à utiliser, il s’agit d’un outil très utile et flexible pour transférer des données entre applications et ordinateurs, notamment lors de l’utilisation d’AJAX. Si vous envisagez de développer une application AJAX, alors nul doute que JSON deviendra un outil indispensable dans votre atelier.
JavaScript Object Notation (JSON) est un format de texte standard permettant de représenter des données structurées basées sur la syntaxe d'objet JavaScript. Il est couramment utilisé pour le transfert de données dans les applications Web (par exemple, pour envoyer certaines données du serveur au client afin qu'elles puissent être affichées sur une page Web ou vice versa). Vous rencontrerez ce problème assez souvent, c'est pourquoi dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec JSON à l'aide de JavaScript, y compris l'analyse de JSON afin que vous puissiez accéder aux données qu'il contient et créer du JSON.
Non, vraiment, qu'est-ce que JSON ?
Nous allons le charger dans notre page et utiliser une manipulation DOM soignée pour le restituer, comme ceci :
Réception de JSON
Pour recevoir le JSON, nous utiliserons une API appelée XMLHttpRequest (souvent appelée XHR). Il s'agit d'un objet JavaScript très utile qui nous permet d'effectuer des requêtes réseau pour récupérer des ressources du serveur via JavaScript (par exemple des images, du texte, du JSON et même des extraits HTML), ce qui signifie que nous pouvons mettre à jour de petites sections de contenu sans avoir à recharger la page entière. . Cela a abouti à des pages Web plus réactives et semble passionnant, mais cela dépasse malheureusement le cadre de cet article pour l'enseigner beaucoup plus en détail.
Commençons par le fait que nous allons stocker l'URL JSON que nous souhaitons recevoir dans une variable. Ajoutez le code JavaScript suivant : var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json" ;
Pour créer une requête, nous devons créer une nouvelle instance d'objet de requête à partir du constructeur XMLHttpRequest à l'aide du nouveau mot-clé. Ajoutez ce qui suit ci-dessous comme dernière ligne : var request = new XMLHttpRequest();
Nous devons maintenant ouvrir une nouvelle requête en utilisant le . Ajoutez la ligne suivante : request.open("GET", requestURL);
Cela nécessite au moins deux paramètres – d’autres paramètres sont disponibles. Nous n’en avons besoin que de deux pour cet exemple simple :
La méthode HTTP à utiliser lors d'une requête réseau. Ce cas est correct puisque nous récupérons simplement quelques données simples.
L'URL de la demande est l'URL du fichier JSON que nous avons enregistré précédemment.
Ajoutez ensuite les deux lignes suivantes : Ici, nous définissons sur JSON afin que XHR sache que le serveur renverra JSON et que celui-ci doit être converti en arrière-plan en un objet JavaScript. Ensuite, nous envoyons la requête en utilisant la méthode : request.responseType = "json"; demande envoyée();
La dernière partie de cette section consiste à attendre une réponse de retour du serveur, puis à la gérer. Ajoutez le code suivant sous votre code précédent : request.onload = function() ( var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); )
Ici nous stockons la réponse à notre requête (disponible dans la propriété) dans la variable superHeroes ; cette variable contiendra désormais un objet JavaScript basé sur JSON ! Nous transmettons ensuite cet objet à deux appels de fonction : le premier le remplira avec les données correctes, et le second créera une carte d'information pour chaque héros de l'équipe et l'insérera dans .
Nous avons encapsulé le code dans un gestionnaire d'événements qui se déclenche lorsque l'événement de chargement est déclenché sur l'objet de requête (voir) - en effet, l'événement de chargement se déclenche lorsque la réponse est renvoyée avec succès ; procéder de cette façon garantit que request.response sera certainement disponible lorsque nous essaierons de faire quelque chose à ce sujet.
Remplissage d'en-tête
Maintenant que nous avons extrait les données JSON et les avons transformées en objet JavaScript, utilisons-les en écrivant les deux fonctions que nous avons liées ci-dessus. Tout d’abord, ajoutez la définition de fonction suivante sous le code précédent :
Nous avons nommé le paramètre jsonObj pour rappeler que cet objet JavaScript provenait de JSON. Ici, nous créons d'abord un élément avec , le définissons comme égal à la propriété squadName de l'objet, puis l'ajoutons à l'en-tête avec . On effectue ensuite une opération très similaire avec un paragraphe : on le crée, on définit son contenu textuel et on l'ajoute au titre. La seule différence est que son texte est spécifié sous forme de chaîne concaténée contenant à la fois les propriétés homeTown et formées de l'objet.
Création de cartes d'informations sur les héros
Ajoutez ensuite la fonction suivante en bas du code qui crée et affiche les cartes de super-héros :
Fonction showHeroes(jsonObj) ( var heros = jsonObj["members"]; for (var i = 0; i< heroes.length; i++) {
var myArticle = document.createElement("article");
var myH2 = document.createElement("h2");
var myPara1 = document.createElement("p");
var myPara2 = document.createElement("p");
var myPara3 = document.createElement("p");
var myList = document.createElement("ul");
myH2.textContent = heroes[i].name;
myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity;
myPara2.textContent = "Age: " + heroes[i].age;
myPara3.textContent = "Superpowers:";
var superPowers = heroes[i].powers;
for (var j = 0; j < superPowers.length; j++) {
var listItem = document.createElement("li");
listItem.textContent = superPowers[j];
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
Tout d’abord, stockons la propriété Members de l’objet JavaScript dans une nouvelle variable. Ce tableau contient plusieurs objets contenant des informations sur chaque héros.
Nous utilisons ensuite pour parcourir chaque objet du tableau. Pour chacun d’eux nous :
Nous créons plusieurs nouveaux éléments : , , trois
ET
.
Défini pour contenir le nom du héros actuel.
Remplissez trois paragraphes avec votre secretIdentity , age et une ligne indiquant « Superpuissances : » pour saisir les informations dans la liste.
Nous stockons la propriété powers dans une autre nouvelle variable appelée superPowers - elle contient un tableau qui répertorie les super pouvoirs du héros actuel.
Nous utilisons une autre boucle for pour parcourir les super pouvoirs du héros actuel - pour chacun d'eux, nous créons un élément
, mettez-y les super pouvoirs, puis placez le listItem à l'intérieur de l'élément
(maListe) en utilisant appendChild() .
La dernière chose que nous faisons est d'ajouter ,
ET
à l'intérieur (myArticle), puis ajoutez-le au . L'ordre dans lequel les éléments sont ajoutés est important, car c'est l'ordre dans lequel ils apparaîtront dans le code HTML.
Note: Si vous rencontrez des difficultés pour suivre la notation point/crochet que nous utilisons pour accéder à un objet JavaScript, il peut être utile d'ouvrir le fichier superheroes.json dans un autre onglet ou éditeur de texte et de vous y référer lorsque vous consultez notre JavaScript. Vous pouvez également vous référer à notre article pour plus d’informations sur la notation par points et parenthèses.
Convertir entre objets et texte
L'exemple ci-dessus était simple en termes d'accès à un objet JavaScript car nous avons spécifié une requête XHR pour convertir directement la réponse JSON en objet JavaScript à l'aide de .
), et entre les serveurs eux-mêmes (interfaces logicielles HTTP). Le format JSON est également bien adapté au stockage de structures dynamiques complexes dans des bases de données relationnelles ou des caches de fichiers.
Étant donné que JSON est un sous-ensemble de la syntaxe JavaScript, il peut être rapidement désérialisé à l'aide de la fonction eval() intégrée. De plus, il est possible d'insérer des fonctions JavaScript entièrement fonctionnelles. En PHP, à partir de la version 5.2.0, la prise en charge de JSON est incluse dans le noyau sous la forme des fonctions json_decode() et json_encode(), qui convertissent elles-mêmes les types de données JSON en types PHP correspondants et vice versa.
Syntaxe
JSON est construit sur deux structures :
Un ensemble de paires clé/valeur. Dans diverses langues, cela est implémenté comme un objet, enregistrement , structure , dictionnaire , table de hachage , liste à clés ou tableau associatif . La clé ne peut être qu'une chaîne, la valeur ne peut être que n'importe quelle forme.
Un ensemble numéroté de valeurs. Dans de nombreuses langues, cela est implémenté comme tableau, vecteur, liste ou séquence.
Ce sont des structures de données universelles. En théorie, tous les langages de programmation modernes les prennent en charge sous une forme ou une autre. Puisque JSON est utilisé pour échanger des données entre différents langages de programmation, il est logique de le construire sur ces structures.
Les formulaires suivants sont utilisés en JSON :
Un objet est un ensemble non ordonné de paires nom/valeur entourées d'accolades ( ). Il y a un symbole entre le nom et la valeur ": "
, et les paires nom/valeur sont séparées par des virgules.
Un tableau (unidimensionnel) est un ensemble de valeurs qui ont des numéros de série (indices). Le tableau est entouré de crochets. Les valeurs sont séparées par des virgules.
La valeur peut être doubler entre guillemets doubles, nombre, valeur vrai ou FAUX, objet, tableau, ou valeur nul. Ces structures peuvent être imbriquées les unes dans les autres.
Une chaîne est un ensemble ordonné de zéro ou plusieurs caractères Unicode, entourés de guillemets doubles, utilisant des séquences d'échappement de barre oblique inverse. Les caractères sont représentés sous la forme d'une simple chaîne.
Le nom est une chaîne.
Doubler très similaire à une chaîne dans les langages Java et. Nombreégalement très similaire à un nombre C ou Java, sauf que seul le format décimal est utilisé. Des espaces peuvent être insérés entre deux caractères quelconques.
L'exemple suivant montre une représentation JSON d'un objet décrivant une personne. L'objet a chaîne des champs de prénom et de nom, un objet décrivant l'adresse et un tableau contenant une liste de numéros de téléphone.
Tant sur le plan fonctionnel que syntaxique, JSON est un sous-ensemble du langage YAML. Plus précisément, la spécification YAML 1.2 indique que « tout fichier JSON est un fichier YAML valide ». L'analyseur YAML le plus courant peut également traiter JSON. La spécification YAML antérieure à la version 1.2 ne couvrait pas entièrement JSON, principalement en raison du manque de prise en charge native de UTF-32 dans YAML, ainsi que de l'exigence d'un espace après le délimiteur virgule. De plus, la spécification JSON incluait des commentaires de style /* */.
La différence la plus importante dans YAML réside dans l'ensemble des extensions de syntaxe qui n'ont pas d'analogues dans JSON :
Relationnel : YAML prend en charge les données relationnelles : dans un document YAML, vous pouvez faire référence à une ancre survenue plus tôt dans un fichier/flux. Les structures récursives peuvent être exprimées de cette manière. Extensible : YAML prend en charge les types de données extensibles au-delà des primitives (c'est-à-dire les chaînes, les nombres, les booléens). Blocs : YAML propose une syntaxe de bloc indentée ; il permet de décrire des données structurées sans utiliser de symboles inutiles (toutes sortes de parenthèses, guillemets, etc.).
Schéma JSON
JSON Schema est l'un des langages permettant de décrire la structure d'un document JSON. Utilise la syntaxe JSON. Basé sur les concepts de XML Schema, RelaxNG, Kwalify. JSON Schema est un langage auto-descriptif : lorsqu'il est utilisé, les mêmes outils de sérialisation/désérialisation peuvent être utilisés pour traiter les données et décrire leur validité.
Utiliser JSON en Ajax
L'exemple de code Javascript suivant montre comment un navigateur peut utiliser XMLHttpRequest pour demander un objet au format JSON au serveur (le côté serveur du programme est omis ; il doit contenir le code qui envoie les données sous forme de chaîne JSON en réponse aux requêtes de URL).
Var l'objet_; var http_request = new XMLHttpRequest() ; http_request.open("GET", url, true); http_request.send(null); http_request.onreadystatechange = function () ( if ( http_request.readyState == 4 ) ( if ( http_request.status == 200 ) ( the_object = JSON.parse ( http_request.responseText ) ; ) else ( alert( "Il y a eu un problème avec l'URL." ) ; ) http_request = null ; ) ) ;
Notez que cet exemple d'utilisation de XMLHttpRequest n'est pas universel pour tous les navigateurs (pour les navigateurs basés sur Internet Explorer, Opera, Safari et Mozilla, il devrait y avoir quelques différences dans le code). L'utilisation de XMLHttpRequest est limitée du fait de la même politique d'origine : l'URL de la réponse à la requête doit être dans le même domaine DNS que le serveur sur lequel se trouve la page demandant la réponse. Une alternative est l'approche JSONP, qui implique l'utilisation d'un appel de fonction codé transmis entre le client et le serveur afin que le client puisse charger des données codées JSON à partir de domaines tiers et informer l'appelant de l'achèvement, bien que cela introduit certains risques de sécurité et exigences supplémentaires en matière de serveur.
Alternativement, le code de la page peut utiliser des éléments pour demander des données JSON de manière asynchrone, ou simplement . Ces approches étaient courantes avant la prise en charge généralisée de XMLHttpRequest.
Vous pouvez également utiliser la même stratégie d'origine pour transférer des données JSON à l'aide de balises dynamiques, mais cela entraîne un code vulnérable. Comme alternative plus sûre, il a été suggéré d'utiliser JSONRequête.
Questions de sécurité
Bien que JSON soit conçu pour transmettre des données sous forme sérialisée, sa syntaxe suit celle de JavaScript, ce qui crée un certain nombre de problèmes de sécurité. Souvent, pour traiter des données reçues d'une source externe au format JSON, la fonction eval() leur est appliquée sans aucune validation préalable.
Évaluation JavaScript()
Étant donné que JSON semble être un morceau de code JavaScript syntaxiquement correct, le moyen le plus simple d'analyser les données JSON dans un programme JavaScript consiste à utiliser la fonction JavaScript eval() intégrée, conçue pour exécuter des expressions JavaScript. Avec cette approche, il n’est pas nécessaire d’utiliser des analyseurs supplémentaires.
La technique eval() rend le système vulnérable si la source des données JSON utilisées n'est pas fiable ( Anglais). Ces données peuvent être du code JavaScript malveillant pour les attaques par injection de code ( Anglais). Grâce à cette vulnérabilité, il est possible de voler des données et de forger une authentification. Cependant, la vulnérabilité peut être éliminée en utilisant des outils supplémentaires de validation des données. Par exemple, avant d'exécuter eval(), les données reçues d'une source externe peuvent être validées à l'aide d'expressions régulières. La RFC qui définit JSON suggère d'utiliser le code suivant pour vérifier s'il est conforme au format JSON
Comme alternative plus sûre à eval(), une nouvelle fonction, parseJSON(), a été proposée et ne peut traiter que les données JSON. Il a été introduit dans la version 4 du standard ECMAScript et est décrit dans l'article « JSON : A Low-Fat Alternative to XML ». Il est actuellement disponible sous forme de bibliothèque JavaScript et sera inclus dans la cinquième édition d'ECMAScript.
JSON intégré
Les versions récentes des navigateurs Web prennent en charge JSON et sont capables de le traiter sans appeler la fonction eval(), ce qui conduit au problème décrit. Le traitement JSON est généralement plus rapide dans ce cas. Ainsi, en juin 2009, les navigateurs suivants avaient un support JSON intégré :
Au moins cinq bibliothèques JavaScript populaires utilisent JSON en ligne lorsqu'elles sont disponibles :
Falsification de requêtes inter-domaines
Une mauvaise utilisation de JSON rend les sites vulnérables à la falsification de requêtes intersites (CSRF ou XSRF). Parce que la balise permet d'utiliser une source qui n'appartient pas au même domaine que la ressource qui l'utilise, elle permet d'exécuter du code sous couvert de données JSON dans le contexte d'une page arbitraire, permettant de compromettre des mots de passe ou d'autres informations sensibles des utilisateurs authentifiés sur la page d'un autre site.
Cela ne semble poser problème que si les données JSON contiennent des informations sensibles qui pourraient être compromises par un tiers et si le serveur s'appuie sur une politique d'origine unique ( Anglais), bloquant l'accès aux données lorsqu'une requête externe est détectée. Ce n'est pas un problème si le serveur détermine la validité de la demande, en fournissant les données uniquement si elles sont correctes. Les cookies HTTP ne peuvent pas être utilisés pour déterminer cela. L'utilisation exclusive des cookies HTTP est utilisée par la falsification de requêtes intersites.
JSONP et JSONPP
JSONP (JSON Padding) ou « JSON with padding » est une extension de JSON lorsque le nom d'une fonction de rappel est spécifié comme argument d'entrée.
La technologie repose sur le fait que la politique de sécurité du navigateur permet d'utiliser la balise pour accéder à des serveurs autres que celui à partir duquel la page a été chargée.
Sans utiliser la technologie JSONP (c'est-à-dire en utilisant uniquement le codage des données JSON), le serveur ne peut renvoyer que des données. Par exemple comme ceci :
("papier": "A4", "count": 5)
Cependant, il ne s’agit que de données et ne peuvent pas affecter le navigateur.
Grâce à la technique JSONP, le nom de la fonction de rappel est transmis au serveur tiers dans la ligne d'appel (GET) :
Ici, le paramètre jsonp contient le nom de la fonction de rappel parseResponse.
Le serveur étranger example.com peut désormais renvoyer le code suivant :
ParseResponse(( "papier" : "A4" , "count" : 5 ) )
Le code appelle désormais la fonction javascript du premier domaine.
L'idée a été initialement proposée sur le blog MacPython en 2005 et est actuellement utilisée par de nombreuses applications Web 2.0 telles que les applications Dojo Toolkit, Google Toolkit Applications et les services Web zanox. D'autres extensions de ce protocole ont été proposées pour inclure des arguments supplémentaires, tels que la prise en charge par JSONPP des services Web S3DB.
Parce que JSONP utilise des balises de script, les appels sont essentiellement ouverts sur le monde. Pour cette raison, JSONP peut être inapproprié pour stocker des données sensibles.
L'activation des balises de script à partir de sites distants leur permet de transmettre n'importe quel contenu sur le site. Si le site distant présente des vulnérabilités permettant l’injection de Javascript, le site d’origine peut également en être affecté.
JSONPP (JSON paramétré avec padding) JSON paramétré avec padding - développement de l'idée JSONP
JSONPP inclut l'URL source, le nom de la fonction qui traitera les données JSON, une ligne pour eval après réception des données et une ligne pour eval après avoir terminé le traitement des données :
En général, le nombre de paramètres n'est pas important pour l'idée JSONPP elle-même. SRC, JSONP, JSONPP (et leurs traitements côté serveur puis côté client) suffisent pour que ce soit JSONPP.
Regardons l'exemple de travail avec le service S3DB.
Fonction s3db_jsonpp_call(src, next_eval) ( var call = "call_" + Math .random () .toString () .replace (/\./g, "" ) ; var headID = document.getElementsByTagName ("head" ) [ 0 ] ; var script = document.createElement ("script" ) ; script.id = call; script.type = "text/javascript" ; // utilisation de json rembourré et paramétré src = src+ "&format=json&jsonp=s3db_jsonpp&jsonpp=" + next_eval+ "&onload=remove_element_by_id("" + script.id + "")" ; script.src = src; headID.appendChild (script) ; // récupérer la réponse) fonction s3db_jsonpp(ans, jsonpp) ( eval(jsonpp) ; return ans ; ) fonction remove_element_by_id(id) ( var e = document.getElementById (id) ; e.parentNode .removeChild (e) ; return false ; )
Dans l'exemple, la fonction s3db_jsonpp_call() crée un élément de script dans le DOM dans la partie head dont le src correspond à l'appel JSONPP.
Après avoir reçu une réponse du serveur, s3db_jsonpp() sera appelé - il est transmis dans les paramètres d'appel, comme il se doit selon les règles JSONP.
À l'intérieur de s3db_jsonpp() eval(jsonpp) se déclenchera et renverra la valeur ans.
L'appel de eval(onload) conduit à l'exécution de remove_element_by_id() avec l'identifiant du script créé dans l'en-tête et finalement à sa suppression, car il ne sera de toute façon pas utilisé puisque l'identifiant dans l'exemple a été généré aléatoirement au tout début de la fonction s3db_jsonpp_call(). Cet appel est dans la réponse du serveur.
Références d'objet
La norme JSON ne prend pas en charge les références d'objets, mais Dojo Toolkit montre comment la norme JSON peut prendre en charge de telles références à l'aide de conventions supplémentaires. En particulier, le module dojox.json.ref prend en charge plusieurs formes de liens, notamment les liens circulaires, multiples, inter-documents et paresseux.
Voir aussi Remarques
YAML Ain't Markup Language (YAML™) version 1.2 (anglais) . - Draft 2008-05-11. (lien inaccessible - histoire) Récupéré le 24 septembre 2009.
. RedHanded (7 avril 2005). Récupéré le 25 septembre 2012. .
Json.Com Proposition de schéma JSON (lien inaccessible - histoire)
RFC4627
JSON : l'alternative gratuite au XML. Archivé
json2.js (anglais) . Archivé de l'original le 12 février 2012. Récupéré le 24 septembre 2009.
Utilisation de JSON intégré.
JSON intégré dans IE8. Archivé de l'original le 12 février 2012.
Spécifications Web prises en charge dans Opera Presto 2.5 (anglais) (10 mars 2010). Archivé de l'original le 12 février 2012. Récupéré le 29 mars 2010.
Implémentation ES 3.1 de l'objet JSON.
Billet n°4429lang=fr . Archivé de l'original le 12 février 2012.
Billet n° 4429 (22 mai 2009). Archivé de l'original le 12 février 2012. Récupéré le 3 juillet 2009.
Billet n°8111lang=fr . Archivé de l'original le 12 février 2012.
MooTools Core et plus 1.3.1. Archivé de l'original le 12 février 2012.
YUI 2 : utilitaire JSON (1er septembre 2009). Archivé de l'original le 12 février 2012. Récupéré le 22 octobre 2009.
Apprenez JSON (7 avril 2010). Archivé de l'original le 12 février 2012. Récupéré le 7 avril 2010.
Jérémie Grossman Techniques d'attaque avancées contre les applications Web utilisant GMail. Sécurité WhiteHat. Archivé de l'original le 12 février 2012. Récupéré le 23 septembre 2009.
à partir de __future__ import * » JSON distant - JSONP . Bob.pythonmac.org. Archivé de l'original le 12 février 2012. Récupéré le 8 septembre 2008.
Almeida, Jonas (11 juin 2008). " JSON, JSONP, JSONPP ? "(S3DB). Récupéré le 26/04/2009.
RIAspot JSON P pour Cross Site XHR. (lien inaccessible - histoire)
Référencement JSON dans Dojo. Archivé de l'original le 12 février 2012.
Liens
Page d'accueil au format officiel en russe
json.js, json2.js est une bibliothèque développée par Douglas Crockford pour travailler avec des données JSON en JavaScript. Étend un objet avec la méthode toJSONString, qui est ensuite présente dans n'importe quel objet, et le convertit en chaîne au format JSON.
json-rpc.org (anglais)
Langages de balisage de documents
Documents de bureau
Format de document composé OOXML (SpreadsheetML, PresentationML, WordprocessingML)
Vous avez sûrement déjà entendu parler de JSON. Qu'est-ce que c'est? Que peut-il faire et comment l'utiliser ?
Dans ce tutoriel, nous aborderons les bases de JSON et aborderons les points suivants :
Qu’est-ce que JSON ?
A quoi sert JSON ?
Comment créer une chaîne JSON ?
Un exemple simple de chaîne JSON.
Comparons JSON et XML.
Comment travailler avec JSON en JavaScript et PHP ?
Qu’est-ce que JSON ?
JSON est un moyen simple, basé sur du texte, de stocker et de transmettre des données structurées. Avec une syntaxe simple, vous pouvez facilement stocker n'importe quoi, depuis un simple nombre jusqu'aux chaînes, tableaux et objets, en texte brut. Vous pouvez également lier des tableaux et des objets pour créer des structures de données complexes.
Une fois la chaîne JSON créée, il est facile de l'envoyer vers une autre application ou vers un autre emplacement du réseau car il s'agit de texte brut.
JSON présente les avantages suivants :
C'est compact.
Ses phrases sont faciles à lire et à composer aussi bien par les humains que par les ordinateurs.
Il peut être facilement converti en structure de données pour la plupart des langages de programmation (nombres, chaînes, booléens, tableaux, etc.)
De nombreux langages de programmation disposent de fonctions et de bibliothèques pour lire et créer des structures JSON.
Le nom JSON signifie JavaScript Object Notation. Comme son nom l'indique, il est basé sur une manière de définir des objets (un peu comme la création de tableaux associatifs dans d'autres langages) et des tableaux.
A quoi sert JSON ?
L'utilisation la plus courante de JSON consiste à envoyer des données du serveur au navigateur. Généralement, les données JSON sont fournies via AJAX, ce qui permet au navigateur et au serveur de communiquer sans avoir à recharger la page.
L'utilisateur clique sur une vignette de produit dans une boutique en ligne.
JavaScript exécuté sur le navigateur génère une requête AJAX au script PHP exécuté sur le serveur, transmettant l'ID du produit sélectionné.
Le script PHP obtient le nom du produit, la description, le prix et d'autres informations de la base de données. Ensuite, il compose une chaîne JSON à partir des données et l'envoie au navigateur.
JavaScript exécuté sur le navigateur reçoit la chaîne JSON, la décode et affiche les informations sur le produit sur la page pour l'utilisateur.
Vous pouvez également utiliser JSON pour envoyer des données du navigateur au serveur en passant une chaîne JSON comme paramètre aux requêtes GET ou POST. Mais cette méthode est moins courante, car le transfert de données via des requêtes AJAX peut être simplifié. Par exemple, l'ID du produit peut être inclus dans l'URL dans le cadre d'une requête GET.
La bibliothèque jQuery dispose de plusieurs méthodes, telles que getJSON() et parseJSON(), qui facilitent la récupération de données à l'aide de JSON via des requêtes AJAX.
Comment créer une chaîne JSON ?
Il existe quelques règles de base pour créer une chaîne JSON :
La chaîne JSON contient soit un tableau de valeurs, soit un objet (un tableau associatif de paires nom/valeur).
Tableau est placé entre crochets ([ et ]) et contient une liste de valeurs séparées par des virgules.
Un objet est entouré d'accolades (( et )) et contient une liste de paires nom/valeur séparées par des virgules.
paire nom/valeur se compose du nom du champ entre guillemets doubles, suivi de deux points (:) et de la valeur du champ.
Signification dans un tableau ou un objet, il peut y avoir :
Nombre (entier ou virgule flottante)
Chaîne (entre guillemets doubles)
Valeur booléenne (vrai ou faux)
Un autre tableau (mis entre crochets)
Un autre objet (entouré d'accolades)
valeur nulle
Pour inclure des guillemets doubles dans une chaîne, vous devez utiliser une barre oblique inverse : \" . Comme avec de nombreux langages de programmation, vous pouvez placer des caractères de contrôle et des codes hexadécimaux dans une chaîne en les faisant précéder d'une barre oblique inverse. Consultez le site Web JSON pour plus de détails.
Exemple de chaîne JSON simple
Ci-dessous un exemple de commande au format JSON :
Nous créons un objet en utilisant des accolades (( et )).
L'objet a plusieurs paires nom/valeur : "orderID": 12345 Une propriété avec le nom "orderId" et une valeur entière 12345 "shopperName": "Vanya Ivanov" une propriété avec le nom "shopperName" et la valeur de chaîne "Vanya Ivanov " "e-mail de l'acheteur": " [email protégé]" Une propriété nommée "shopperEmail" avec une valeur de chaîne " [email protégé]" "contents": [ ... ] Une propriété nommée "contents" dont la valeur est un tableau "orderCompleted": true Une propriété nommée "orderCompleted" et la valeur booléenne true
Il y a 2 objets dans le tableau « contenu » représentant des éléments individuels dans la commande. Chaque objet contient 3 propriétés : productID , productName etQuantity .
À propos, puisque JSON est basé sur la déclaration d'objets JavaScript, vous pouvez rapidement et facilement faire de la chaîne JSON ci-dessus un objet JavaScript :
À bien des égards, vous pouvez considérer JSON comme une alternative au XML, du moins dans le domaine des applications Web. Le concept d'AJAX reposait à l'origine sur l'utilisation de XML pour transférer des données entre le serveur et le navigateur. Mais ces dernières années, JSON est devenu de plus en plus populaire pour le transport de données AJAX.
Si XML est une technologie éprouvée utilisée dans un bon nombre d’applications, JSON présente l’avantage d’être un format de données plus compact et plus facile à reconnaître.
Voici à quoi ressemblerait l’exemple d’objet XML ci-dessus :
N° de commande 12345 Nom du client Vanya Ivanov E-mail du client [email protégé] contenu productID 34 productName Super quantité de produit 1 productID 56 productName Produit miracle quantité 3 orderCompleted true
La version XML est nettement plus grande. En réalité, il comporte 1 128 caractères, alors que la version JSON ne comporte que 323 caractères. La version XML est également assez difficile à comprendre.
Bien sûr, c’est un exemple radical. Et il est possible de créer un enregistrement XML plus compact. Mais même cela sera nettement plus long que l’équivalent JSON.
Travailler avec une chaîne JSON en JavaScript
JSON a un format simple, mais créer manuellement une chaîne JSON est assez fastidieux. De plus, vous devez souvent prendre une chaîne JSON et convertir son contenu en une variable pouvant être utilisée dans le code.
La plupart des langages de programmation disposent d'outils permettant de convertir facilement des variables en chaînes JSON et vice versa.
Créer une chaîne JSON à partir d'une variable
JavaScript possède une méthode JSON.stringify() intégrée qui prend une variable et renvoie une chaîne JSON représentant son contenu. Par exemple, créons un objet JavaScript contenant les informations de commande de notre exemple, puis créons une chaîne JSON à partir de celui-ci :
Notez que la méthode JSON.stringify() renvoie une chaîne JSON sans espaces. Il est plus difficile à lire, mais il est plus compact pour la transmission sur le réseau.
Il existe plusieurs façons d'analyser une chaîne JSON en JavaScript, mais la plus sûre et la plus fiable consiste à utiliser la méthode JSON.parse() intégrée. Il reçoit une chaîne JSON et renvoie un objet ou un tableau JavaScript contenant les données. Par exemple:
Nous avons créé une variable jsonString qui contient la chaîne JSON de notre exemple de commande. Nous transmettons ensuite cette chaîne à la méthode JSON.parse(), qui crée un objet contenant les données JSON et le stocke dans la variable cart. Il ne reste plus qu'à vérifier en affichant les propriétés de l'objet shopperEmail et productName du tableau contents.
En conséquence, nous obtiendrons le résultat suivant :
Dans une application réelle, votre code JavaScript recevrait la commande sous forme de chaîne JSON dans une réponse AJAX du script serveur, transmettrait la chaîne à la méthode JSON.parse(), puis utiliserait les données pour l'afficher sur la page de l'utilisateur.
JSON.stringify() et JSON.parse() ont d'autres fonctionnalités, telles que l'utilisation de fonctions de rappel pour convertir certaines données de manière personnalisée. De telles options sont très utiles pour convertir diverses données en objets JavaScript appropriés.
Travailler avec une chaîne JSON en PHP
PHP, comme JavaScript, possède des fonctions intégrées pour travailler avec des chaînes JSON.
Créer une chaîne JSON à partir d'une variable PHP
La fonction json_encode() prend une variable PHP et renvoie une chaîne JSON représentant le contenu de la variable. Voici notre exemple de commande, écrit en PHP :
Ce code renvoie exactement la même chaîne JSON que dans l'exemple JavaScript :
Dans une application réelle, votre script PHP enverra cette chaîne JSON dans le cadre d'une réponse AJAX au navigateur, où le code JavaScript, à l'aide de la méthode JSON.parse(), l'analysera dans une variable pour l'afficher sur la page de l'utilisateur. .
Vous pouvez transmettre divers indicateurs comme deuxième argument à la fonction json_encode(). Avec leur aide, vous pouvez modifier les principes d'encodage du contenu des variables dans une chaîne JSON.
Créer une variable à partir d'une chaîne JSON
Pour convertir une chaîne JSON en variable PHP, utilisez la méthode json_decode(). Remplaçons notre exemple pour JavaScript par la méthode JSON.parse() par du code PHP :
Par défaut, la fonction json_decode() renvoie les objets JSON sous forme d'objets PHP. Il existe des objets PHP génériques de la classe stdClass. C'est pourquoi nous utilisons -> pour accéder aux propriétés de l'objet dans l'exemple ci-dessus.
Si vous avez besoin d'un objet JSON comme tableau PHP associé, vous devez transmettre true comme deuxième argument à la fonction json_decode(). Par exemple:
Vous pouvez également transmettre d'autres arguments à la fonction json_decode() pour spécifier la profondeur de récursion et comment gérer les grands entiers.
Conclusion
Bien que JSON soit facile à comprendre et à utiliser, il s’agit d’un outil très utile et flexible pour transférer des données entre applications et ordinateurs, notamment lors de l’utilisation d’AJAX. Si vous envisagez de développer une application AJAX, alors nul doute que JSON deviendra un outil indispensable dans votre atelier.
