javascript lire et écrire json example_javascript compétences

JSON (JavaScript Object Notation) est un format de données simple, plus léger que XML. JSON est un format JavaScript natif, ce qui signifie que le traitement des données JSON en JavaScript ne nécessite aucune API ou boîte à outils spéciale.

Les règles de JSON sont simples : un objet est une collection non ordonnée de paires "nom/valeur". 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). Pour des détails spécifiques, veuillez vous référer à http://www.json.org/json-zh.html

Un exemple simple :

code js

Copier le code Le code est le suivant :

function showJSON() {

var user =

{

"username":"andy",

"age":20,

"info": { "tel": "123456", "cellphone" : "98765"} ,

"adresse":

[

{"city":"pékin","postcode":"222333"},

{" city":"newyork","postcode":"555666"}

]

}

alerte(user.username);
alerte(user.age);

alerte(user.info.cellphone);

alerte(user.address[0].city); (user.address[ 0].postcode);

}


Cela représente un objet utilisateur avec des attributs tels que le nom d'utilisateur, l'âge, les informations, l'adresse, etc.

Vous pouvez également utiliser JSON pour modifier simplement les données, modifiez l'exemple ci-dessus

Code js

Copier le code Le code est le suivant : function showJSON() {

var user =

{

"username" :"andy",

"age":20,

"info": { "tel": "123456", "cellphone": "98765"},

"adresse":

[

{"ville": "beijing", "postcode": "222333"},

{"ville": "newyork" ,"code postal ":"555666"}

]

}

alerte(utilisateur.nom d'utilisateur);

alerte(utilisateur.age); 🎜>
alerte(user.info.cellphone);

alerte(user.address[0].city

alerte(user.address[0].postcode);

user.username = "Tom";

alert(user.username);

}


JSON fournit le package json.js, téléchargez http ://www.json.org/json.js Après l'avoir importé, vous pouvez simplement utiliser object.toJSONString() pour le convertir en données JSON.

Code js

Copier le code

Le code est le suivant : fonction showCar() {

var carr = new Car("Dodge", "Coronet R/T", 1968, "jaune");

alert(carr.toJSONString()); 🎜>
}

function Car(marque, modèle, année, couleur) {

this.make = make

this.model = model; >
this.year = year;

this.color = color;

}


Vous pouvez utiliser eval pour convertir les caractères JSON en objet

Code js

Copier le code

Le code est le suivant : fonction myEval( ) { var str = '{ "name": "Violet", "occupation": "personnage" }'

var obj = eval('(' str ')') ;

alert(obj.toJSONString());

}


ou utilisez la méthode parseJSON()

code js

Copier le code

Le code est le suivant : function myEval() { var str = '{ "nom": "Violet" , "occupation": "personnage" }';

var obj = str.parseJSON(); ;

}


Ce qui suit utilise un prototype pour écrire un exemple ajax de JSON.

Écrivez d'abord un servlet (le mien est servlet.ajax.JSONTest1.java) et écrivez une phrase

code java

Copier le code


Le code est le suivant :

response.getWriter().print("{ /"name/": /"Violet/", /"occupation/ ": /"personnage/" }"); Écrivez une requête ajax sur la pagecode js

Copiez le code


Le code est le suivant :

function sendRequest() {

var url = "/MyWebApp/JSONTest1"

var mailAjax = new Ajax.Request(

url,

{

méthode : 'get',

onComplete : jsonResponse

}



}

function jsonResponse(originalRequest) {

alert(originalRequest.responseText);

var myobj = originalRequest.responseText.parseJSON();

alert(myobj); .name);

}

prototype-1.5.1.js fournit une méthode JSON, String.evalJSON(), vous pouvez modifier ce qui précède sans utiliser la méthode json.js

Code js

Copier le code Le code est le suivant :

fonction jsonResponse ( originalRequest) {

alert(originalRequest.responseText);

var myobj = originalRequest.responseText.evalJSON(true); >
}


JSON fournit également le package java jar http://www.json.org/java/index.html L'API est également très simple, voici un exemple

Ajouter des paramètres de requête en javascript

code js

Copier le code Le code est le suivant : function sendRequest() {

var carr = new Car("Dodge", "Coronet R/T", 1968, "jaune");

var pars = "car =" carr.toJSONString();

var url = "/MyWebApp/JSONTest1";

var mailAjax = new Ajax.Request(

url,

{

méthode : 'get',

paramètres : pars,

onComplete : jsonResponse

}

) ;

}


En utilisant la chaîne de requête JSON, vous pouvez simplement générer JSONObject et l'analyser, modifier le servlet pour ajouter le traitement JSON (vous devez utiliser json.jar)

Code Java

Copier le code Le code est le suivant : private void doService (Requête HttpServletRequest, réponse HttpServletResponse) lance IOException {

String s3 = request.getParameter("car");

try {

JSONObject jsonObj = new JSONObject(s3) ;

System .out.println(jsonObj.getString("model"));

System.out.println(jsonObj.getInt("année")); >} catch (JSONException e) {

e.printStackTrace();

}

response.getWriter().print("{ /"name/": / "Violet/", /"occupation /": /"character/" }");

}


Vous pouvez également utiliser JSONObject pour générer une chaîne JSON et modifier le servlet

code java

Copier le code

Le code est le suivant : privé void doService (requête HttpServletRequest, réponse HttpServletResponse) lance IOException { String s3 = request.getParameter("car");

try {

JSONObject jsonObj = new JSONObject( s3);

System.out.println (jsonObj.getString("model"));

System.out.println(jsonObj.getInt("année"));
} catch (JSONException e) {

e.printStackTrace();

}

JSONObject resultJSON = new JSONObject(); {

resultJSON.append("name", "Violet")

.append("occupation", "developer")

.append("age", new Integer(22));

System.out.println(resultJSON.toString());

} catch (JSONException e) {

e.printStackTrace();

}

réponse .getWriter().print(resultJSON.toString());

}


code js




Copier le code

Le code est le suivant :

function jsonResponse(originalRequest) { alerte (originalRequest.responseText); var myobj = originalRequest.evalJSON(true);

alert(myobj.name);

}


Référence

http://www.json.org/js.html

http://www.blogjava.net/Jkallen/archive/2006/03/28/37905 .html

http://www.json.org/

http://www.prototypejs.org/learn/json

http://www.json .org/java/index.html

http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/index.html

Utilisez JSON
JSON également Il s'agit de JavaScript Object Notation, qui est une syntaxe légère pour décrire les données. JSON est élégant car il s’agit d’un sous-ensemble du langage JavaScript. Vous verrez ensuite pourquoi c'est si important. Commençons par comparer les syntaxes JSON et XML.

JSON et XML utilisent des méthodes structurées pour décrire les données. Par exemple, une application de carnet d'adresses peut fournir un service web permettant de générer des cartes d'adresses au format XML :

Copier le code Le code est comme suit :

SK Consulting

kelly@seankelly.biz

'home' pref='1'>kelly@seankelly.tv
> 1 214 555 1212
type d'adresse='work' format='us'>1234 Main St
Springfield, TX 78080-1216

5678 Main St
Springfield, TX 78080-1316

;/adresse>
http://seankelly.tv/
🎜>
Utilisez JSON, le formulaire est le suivant :




Copier le code


Le code est le suivant :

{
"fullname": "Sean Kelly",
"org": "SK Consulting",

"emailaddrs": [ {"type": "travail", "value": "kelly@seankelly.biz"}, {"type": "home", "pref": 1, "value": "kelly @seankelly.tv"} ], "téléphones": [ {"type": "work", "pref": 1, "value": " 1 214 555 1212"}, {"type": "fax", "value ": " 1 214 555 1213"},

{"type": "mobile", "value": " 1 214 555 1214"}

] ,
"adresses": [
{ "type": "work", "format": "us",
"value": "1234 Main StnSpringfield, TX 78080-1216"},
{"type": "home", "format" : "nous",
"value": "5678 Main StnSpringfield, TX 78080-1316"}
],
"urls": [
{"type": "work", "value ": "http://seankelly.biz/"},
{"type": "home", "value": "http://seankelly. tv/"}
]
}


Comme vous pouvez le constater, JSON comporte des éléments de données imbriqués structurés, similaires au XML. JSON est également basé sur du texte, tout comme XML. Les deux utilisent Unicode. JSON et XML sont faciles à lire. Subjectivement, JSON est plus propre et moins redondant. Le site WEB JSON décrit strictement la syntaxe JSON, et c'est ainsi qu'elle est actuellement. C'est vraiment un petit langage simple ! XML convient en effet au balisage de documents, mais JSON est le format idéal pour l'interaction des données. Chaque document JSON décrit un objet qui contient : des objets imbriqués, des tableaux, des chaînes, des nombres, des valeurs booléennes ou des valeurs nulles.

Dans ces exemples de codes de carte d'adresse, la version JSON est plus légère, occupant seulement 682 octets d'espace, tandis que la version XML nécessite 744 octets d'espace. Bien que ce ne soit pas une économie substantielle. Le véritable avantage vient du processus d’analyse.

XML vs JSON : perte de statut
Les fichiers XML et JSON peuvent être obtenus à partir de votre application basée sur AJAX en utilisant l'objet XMLHttpRequest. Généralement, le code d'interaction est le suivant :




Copier le code

Le code est le suivant :


var req = new XMLHttpRequest ();
req.open("GET", "http://localhost/addr?cardID=32", /*async*/true);
req.onreadystatechange = myHandler;

req. send(/*no params*/null Au fur et à mesure que le serveur WEB répond, la fonction de gestionnaire (fonction myHandler) que vous avez fournie est appelée plusieurs fois, vous offrant la possibilité de terminer la transaction plus tôt, de mettre à jour la barre de progression, etc. Normalement, cela ne fonctionne qu'une fois la requête Web terminée : à ce stade, vous pouvez utiliser les données renvoyées.

Afin de traiter la version XML des données de la carte d'adresse, le code de myHandler est le suivant :

Copiez le code Le code est le suivant :

function myHandler() {
if (req.readyState == 4 /*complete*/) {
// Mettre à jour le champ d'adresse dans un formulaire avec la première adresse postale
var addrField = document.getElementById('addr');
var root = req.responseXML;
var addrsElem = root.getElementsByTagName('addresses')[0];
var firstAddr = addrsElem.getElementsByTagName('adresse')[0];
var addrText = fistAddr.firstChild;
var addrValue = addrText.nodeValue;
addrField.value = addrValue; }
}

Il est à noter que vous n'avez pas besoin d'analyser le document XML : l'objet XMLHttpRequest est analysé automatiquement et rend l'arborescence DOM disponible dans ResponseXML. En utilisant l'attribut ResponseXML, vous pouvez appeler la méthode getElementsByTagName pour trouver la partie adresse du document. Vous pouvez également utiliser la première pour la trouver. Ensuite, vous pouvez appeler à nouveau getElementsByTagName pour rechercher le premier élément d'adresse dans la partie adresse. Cela obtient le premier nœud enfant DOM du document, qui est un nœud de texte, et obtient la valeur du nœud, qui est l'adresse postale souhaitée. Enfin, les résultats peuvent être affichés dans un champ de formulaire.

Ce n'est en effet pas un travail simple. Maintenant, réessayez en utilisant JSON :

Copiez le code Le code. est la suivante :

function myHandler() {
if (req.readyState == 4 /*complete*/) {
var addrField = document.getElementById('addr') ;
var card = eval('(' req.responseText ')');
addrField.value = card.addresses[0].value;
La première chose à faire est d'analyser la réponse JSON. Cependant, comme JSON est un sous-ensemble de JavaScript, vous pouvez utiliser le propre compilateur de JavaScript pour l'analyser, en appelant la fonction eval. L'analyse de JSON ne prend qu'une seule ligne ! De plus, manipuler des objets dans JSON revient à manipuler d'autres objets JavaScript. C'est évidemment plus simple que de manipuler via l'arborescence DOM, par exemple :
card.addresses[0].value est la première adresse postale, "1234 Main Stb &"
card.addresses[0].type est la Type d'adresse, "travail"
card.addresses[1] est l'objet adresse du domicile
card.fullname est le nom de la carte, "Sean Kelly"
Si vous regardez de plus près, vous constaterez peut-être que le document au format XML est au minimum Il y a un élément suiveur, card. Cela n'existe pas en JSON, pourquoi ? Vraisemblablement, si vous développez du JavaScript pour accéder à un service Web, vous savez déjà ce que vous voulez. Cependant, vous pouvez l'utiliser en JSON :
{"card": {"fullname": ...}}

En utilisant cette technique, votre fichier JSON commencera toujours par un seul nom L'objet démarre avec une propriété qui identifie le type d'objet.

JSON est-il rapide et fiable ?

JSON fournit de petits documents légers et JSON est plus facile à utiliser en JavaScript. XMLHttpRequest analyse automatiquement le document XML pour vous et vous devez analyser le fichier JSON manuellement. Mais l'analyse de JSON est-elle plus lente que l'analyse de XML ? L'auteur a utilisé XMLHttpRequest pour analyser XML et JSON à travers des milliers de tests répétés. Le résultat est que l'analyse de JSON est 10 fois plus rapide que XML ! Lorsque l'on considère AJAX en tant qu'application de bureau, où la vitesse est le facteur le plus important, il est clair que JSON est supérieur.

Bien sûr, vous ne pouvez pas toujours contrôler le côté serveur pour générer des données pour un programme AJAX. Vous pouvez également utiliser un serveur tiers pour fournir une sortie au format XML à la place du serveur. Et, si le serveur diffuse du JSON, êtes-vous sûr de vouloir réellement l'utiliser ?

Ce qu'il convient de noter dans votre code, c'est que vous transmettez le texte de la réponse directement dans eval ? Vous pouvez le faire si vous contrôlez le serveur. Sinon, un serveur malveillant peut amener votre navigateur à effectuer des actions dangereuses. Dans des cas comme celui-ci, il est préférable d'utiliser du code écrit en JavaScript pour analyser le JSON. Heureusement, cela existe déjà.

En parlant d'analyse, les passionnés de Python remarqueront peut-être que JSON n'est pas seulement un sous-ensemble de JavaScript, c'est aussi un sous-ensemble de Python. Vous pouvez exécuter JSON directement dans Python ou utiliser l'analyse JSON sécurisée à la place. Le site Web JSON.org répertorie de nombreux analyseurs JSON couramment utilisés.

JSON côté serveur

À présent, vous vous êtes peut-être concentré sur l'utilisation de JSON dans les applications Web basées sur AJAX exécutées dans les navigateurs clients. Bien entendu, il faut d’abord que les données au format JSON soient générées côté serveur. Heureusement, créer du JSON ou convertir d'autres données existantes en JSON est assez simple. Certains frameworks d'applications WEB, tels que TurboGears, incluent automatiquement la prise en charge de la sortie JSON.

De plus, les fournisseurs de services WEB commerciaux ont également remarqué JSON. Yahoo a récemment créé de nombreux services Web basés sur JSON. Les divers services de recherche, plans d'exécution, del.icio.us et services de trafic routier de Yahoo prennent également en charge la sortie JSON. Il ne fait aucun doute que d’autres grands fournisseurs de services Web ajouteront également la prise en charge de JSON.

Résumé

L'intelligence de JSON réside dans le fait qu'il s'agit d'un sous-ensemble de JavaScript et de Python, ce qui le rend plus facile à utiliser et permet une interaction efficace des données avec AJAX. Il analyse plus rapidement et est plus facile à utiliser que XML. JSON est désormais en train de devenir la voix la plus forte du « Web 2.0 ». Chaque développeur, qu'il s'agisse d'une application de bureau standard ou d'une application Web, remarque de plus en plus sa simplicité et sa commodité. J'espère que vous pourrez découvrir la joie d'appliquer JSON dans un développement agile, conforme aux mots à la mode, basé sur le Web 2.0 et compatible AJAX.