JavaScript JSON
Lorsque vous effectuez une requête Ajax au serveur, vous pouvez récupérer les données de la réponse du serveur de deux manières différentes : l'une en utilisant XMLHttpRequest object L'attribut ResponseXML accède aux données au format XML ; l'un est l'attribut ResponseText de l'objet XMLHttpRequest qui accède aux données au format chaîne. Actuellement, XML est le langage standard pour le transfert de données, mais l'un des inconvénients de son utilisation est qu'il est difficile de l'analyser et d'extraire les données à ajouter à la page.
JSON (JavaScript Object Notation) est un format d'échange de données léger, que nous appelons JavaScript Object Notation. L'un des avantages de l'utilisation de JSON pour le transfert de données est que JSON est en fait du JavaScript. Il s'agit d'un format de texte basé sur le sous-ensemble de syntaxe littérale d'objet JavaScript d'ECMAScript version 3. Cela signifie que vous pouvez utiliser ResponseText pour récupérer les données JSON du serveur, puis utiliser la méthode eval() de JavaScript pour convertir la chaîne JSON en objet JavaScript. Ensuite, en utilisant du JavaScript supplémentaire, vous pouvez facilement extraire les données de l'objet sans traitement. .DOM.
De plus, il existe des bibliothèques JSON pour la plupart des langages de programmation (notamment C++, C#, ColdFusion, Java, Perl, PHP et Python). Ces bibliothèques peuvent convertir les données formatées dans les langages ci-dessus au format JSON.
Bien qu'il y ait beaucoup de publicité sur la façon dont XML présente des avantages multiplateformes et multilangages, cependant, à moins qu'il ne soit appliqué aux services Web, dans les applications Web ordinaires, le développement montre souvent son intelligence pour l'analyse XML, qu'il s'agisse est un serveur Que le client génère ou traite du XML, ou qu'il utilise JavaScript pour analyser XML, cela entraîne souvent un code complexe et une efficacité de développement extrêmement faible. En fait, pour la plupart des applications Web, il n'est pas nécessaire d'utiliser du XML complexe pour transmettre des données. L'extensibilité du XML présente rarement des avantages. De nombreuses applications Ajax renvoient même directement des fragments HTML pour créer des pages Web dynamiques. Comparé au renvoi de XML et à son analyse, le renvoi de fragments HTML réduit considérablement la complexité du système, mais il manque également d'un certain degré de flexibilité. XML utilise des éléments, des attributs, des entités et d'autres structures. JSON n'est pas un format de document, il ne nécessite donc pas ces structures supplémentaires. Étant donné que les données JSON incluent uniquement des paires nom-valeur (objets) ou des valeurs (tableaux), les données JSON occupent moins d'espace et s'exécutent plus rapidement que les données XML équivalentes.
(1) Syntaxe JSON
JSON est construit à partir de deux structures :
Objet - une collection de paires nom/valeur. Dans différentes langues, il est compris comme un objet, un enregistrement, une structure, un dictionnaire, une table de hachage, une liste de clés ou un tableau associatif. Un objet commence par "{" (crochet gauche) et se termine par "}" (crochet droit). Chaque "nom" est suivi d'un ":" (deux-points) ; les paires "nom/valeur" sont séparées par un "," (virgule).
Array - une liste ordonnée de valeurs. Dans la plupart des langues, il s'agit d'un tableau. Un tableau commence par "[" (crochet gauche) et se termine par "]" (crochet droit). Les valeurs sont séparées par "," (virgule).
JSON n'a pas de variables ou autres structures de contrôle. JSON n'est utilisé que pour le transfert de données.
La syntaxe JSON est basée sur la syntaxe JavaScript des littéraux de visage et des littéraux de tableau. Lors de l'utilisation de littéraux, les données elles-mêmes sont incluses, mais l'expression qui a généré les données n'est pas incluse.
1. Type de données
La structure de données JSON comprend les types de données suivants : caractères, nombres, valeurs booléennes (vrai/faux), null, objets et tableaux.
La chaîne JSON doit être placée entre guillemets doubles. Ils utilisent des séquences d'échappement JavaScript standard. Ajoutez donc une barre oblique inverse devant les caractères suivants :
JSON a les formes suivantes : "(guillemets), b (espace), n (nouvelle ligne), f (saut de page), r (retour chariot), t (positionnement horizontal), u (ajouter 4 chiffres aux caractères Unicode), (symbole barre oblique inverse), / (symbole barre oblique) 2. Littéral d'objet
.JSON utilise des littéraux pour représenter les objets. S'il existe plusieurs objets membres, il peut être représenté dans JSON comme un objet contenant un tableau de deux objets. Le code suivant affiche l'objet membre sous forme de texte JOSN :
{“memeber”:[
{
“name”:”Tom”,
“age”:22,
“country”:”USA”
},
{
“name”:”WangMing”,
“age”:25,
“country”:”China”
}
]
} 3. Utilisez l'analyseur JSON
Vous pouvez utiliser l'analyseur JSON pour créer du texte JSON à partir d'objets et de tableaux ou pour créer des objets et des tableaux à partir de texte JSON. Le site Web JSON www.json.rog/json.js fournit un analyseur JSON, qui peut être utilisé en ajoutant le code suivant en en-tête de la page. L'analyseur JSON fournit deux fonctions : toJSONString() et parseJSON().
La méthode toJSONString() est ajoutée aux définitions d'objet et de tableau JavaScript. Cette méthode peut convertir des objets ou des tableaux JavaScript en texte JSON. Vous n'avez pas besoin de convertir l'objet ou le tableau en littéral pour utiliser cette méthode.
La méthode parseJSON() peut créer des objets ou des tableaux à partir de texte JSON.
(2) Utilisez l'objet XMLHttpRequest pour créer une requête de données JSON
1. Créez une requête
Si vous demandez directement des données JSON dans un fichier JSON sur le serveur, vous pouvez utiliser le nom du fichier pour demander le Fichier JSON.
respone.open(“GET”,,”classes.txt”,true);
Dans ce cas, classes.txt est le nom du fichier de données JSON et request est la variable créée pour stocker l'objet XMLHttpRequest .
2. Analyser la réponse
Une fois que vous avez accepté les données JSON du serveur, vous pouvez analyser la réponse de deux manières différentes. Vous pouvez utiliser la fonction eval() intégrée de JavaScript ou, pour plus de sécurité, utiliser un analyseur JSON à la place.
La méthode eval() peut prendre une chaîne JavaScript comme paramètre, et peut également convertir la chaîne en objet ou en action de commande. Si vous demandez des données JSON à l'aide de la propriété ResponseText de l'objet XMLHttpRequest, utilisez eval() pour convertir la chaîne de texte JSON en objet JavaScript. Étant donné que les chaînes JSON contiennent souvent des accolades, utilisez des parenthèses pour entourer la chaîne JSON afin d'indiquer qu'il s'agit d'une expression évaluée plutôt que d'une commande à exécuter.
var jsonResp=request.responseText;
jsonResp=eval(“(”+jsonResp+”)”);
Si le serveur Web fournit à la fois des données JSON et des pages de requête, la méthode eval() convient. Si la sécurité est impliquée, un analyseur JSON est approprié. L'analyseur JSON ne fonctionne que sur le texte JSON et n'exécute pas d'autres JavaScript. Dans ce cas, vous pouvez utiliser ResponseText, mais utilisez la méthode parseJSON() pour convertir la chaîne de texte JSON en objet JavaScript. Pour accéder à la fonction parseJOSN, vous devez ajouter une référence au fichier json.js à la page.
var jsonResp=request.responseText;
jsonResp=jsonResp.parseJSON();
Voici un exemple pour illustrer l'utilisation simple de JSON en JavaScript :
<script type="text/javascript">
var user =[
{
"name":”shenmiweiyi”,
"QQ":306451129,
"email":”shenmiweiyi@163.com”
"address":
[
{"City":"ZhengZhou","ZipCode":"450000"},
{"City":"BeiJing","ZipCode":"100000"}
]
},
{
"name":”kehao”,
"QQ":254892313,
"email":”kehao@163.com”
"address":
[
{"City":"ShangHai","ZipCode":"200000"},
{"City":"GuangZhou","ZipCode":"510000"}
]
}
]
alert(user[0].name+”的Email是：”user[0].email); //outputs shenmiweiyi的Email是：shenmiweiyi@163.com
alert(user[1].name+”住在：”user[1].address[0].city) //outputs kehao住在：ShangHai
</script> JSON fait déjà partie du standard JavaScript. À l'heure actuelle, les navigateurs grand public prennent parfaitement en charge JSON. En utilisant JSON, nous pouvons nous débarrasser de l'analyse XML. Pour les sites Web Web2.0 qui utilisent Ajax, JSON est en effet la solution la plus flexible et la plus légère à l'heure actuelle.
JSON formaté en objet JavaScript
Le format JSON est syntaxiquement le même que le code qui crée l'objet JavaScript.
Parce qu'ils sont similaires, les programmes JavaScript peuvent facilement convertir les données JSON en objets JavaScript.
Règles de syntaxe JSON
Les données sont des paires clé/valeur.
Les données sont séparées par des virgules.
Les accolades enregistrent l'objet
Les crochets enregistrent le tableau
Données JSON - un nom correspond à une valeur
Le format des données JSON est une paire clé/valeur , tout comme les propriétés des objets JavaScript.
Une paire clé/valeur est constituée du nom du champ (entre guillemets doubles), suivi de deux points, puis de la valeur :
"firstName": "John"
Objet JSON
Les objets JSON sont stockés entre accolades.
Tout comme en JavaScript, les objets peuvent contenir plusieurs paires clé/valeur :
{"firstName":"John", "lastName":"Doe"}
JSON array
Le tableau JSON est stocké entre crochets.
Tout comme en JavaScript, les tableaux peuvent contenir des objets :
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName": "Anna", "lastName": "Smith"},
{"firstName": "Peter", "lastName": "Jones"}
]
Dans Dans l'exemple ci-dessus, l'objet « employés » est un tableau. Contient trois objets.
Chaque objet est un enregistrement d'un salarié (nom et prénom).
Convertir la chaîne JSON en objet JavaScript
Habituellement, nous lisons les données JSON du serveur et affichons les données dans la page Web.
Par souci de simplicité, nous définissons la chaîne JSON directement dans notre page web (vous pouvez également lire notre tutoriel JSON) :
Tout d'abord, créez une chaîne JavaScript, qui est une donnée en JSON format :
var text = '{ "employés" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ " firstName" :"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
Puis , utilisez la fonction intégrée JavaScript JSON.parse() convertit les chaînes en objets JavaScript :
var obj = JSON.parse(text);
section suivante