Cross-Browser JSON Serialization en JavaScript

Dans cet article, nous examinerons les avantages de la sérialisation des objets, les implémentations actuelles du navigateur et développerons un code qui pourrait aider vos projets basés sur l'AJAX. Supposons que nous ayons un objet JavaScript assez complexe défini en utilisant la notation littérale:

var obj1 = {
	b1: true,
	s1: "text string",
	n1: 12345,
	n2: null,
	n3: undefined,
	a1: [ 1,1,2,3,5,8, [13, 21, 34] ],
	o1: {
		a: [3, 2, 1],
		b: {
			c: 42,
			d: [ 3.14, 1.618 ]
		}
	}
};

Nous pouvons accéder à toutes les propriétés de l'objet de diverses manières:

obj1.s1;				// returns "text string"
obj1["n1"];				// returns 12345
obj1.a1[6][1];			// returns 21
obj1["o1"]["b"]["c"];	// returns 42

Cet objet peut également être transmis aux fonctions et méthodes JavaScript plutôt que de spécifier des arguments individuels. Des trucs utiles. Cependant, que se passe-t-il si nous devons stocker cet objet dans un cookie? Et si nous devons transmettre l'objet à un service Web via une demande AJAX? Et si ce service Web souhaite renvoyer une version modifiée de l'objet? La réponse est la sérialisation:

• La sérialisation est le processus de transformation de n'importe quel objet en une chaîne.
• La désérialisation transforme cette chaîne en un objet natif.

Peut-être que la meilleure notation de chaîne que nous pouvons utiliser dans JavaScript est JSON - notation d'objet JavaScript. JSON est un format d'interchange de données léger inspiré de la notation littérale de l'objet JavaScript comme indiqué ci-dessus. JSON est pris en charge par PHP et de nombreux autres langages côté serveur (reportez-vous à json.org). Il existe deux méthodes JSON en JavaScript:

1. json.stringify ( obj ) - convertit un objet JavaScript en une chaîne JSON
2. JSON.Parse ( str ) - convertit une chaîne JSON à un objet JavaScript

Malheureusement, très peu de navigateurs fournissent ces méthodes. À ce jour, seuls Firefox 3.5, Internet Explorer 8.0 et Chrome 3 Beta offrent un support natif. Certaines bibliothèques JavaScript proposent leurs propres outils JSON (comme YUI ) mais beaucoup ne le font pas (y compris jQuery). Cependant, tout n'est pas perdu - JavaScript est flexible et nous pouvons implémenter les méthodes JSON Strifify and Parse chaque fois qu'un navigateur les nécessite. En haut de notre code, nous créerons une variable JSON qui pointe vers l'objet JSON natif ou un objet vide s'il n'est pas disponible:

var JSON = JSON || {};

Le code JSON.Stringify est un peu plus complexe:

// implement JSON.stringify serialization
JSON.stringify = JSON.stringify || function (obj) {

	var t = typeof (obj);
	if (t != "object" || obj === null) {

		// simple data type
		if (t == "string") obj = '"'+obj+'"';
		return String(obj);

	}
	else {

		// recurse array or object
		var n, v, json = [], arr = (obj && obj.constructor == Array);

		for (n in obj) {
			v = obj[n]; t = typeof(v);

			if (t == "string") v = '"'+v+'"';
			else if (t == "object" && v !== null) v = JSON.stringify(v);

			json.push((arr ? "" : '"' + n + '":') + String(v));
		}

		return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
	}
};

Si JSON.Stringify n'est pas disponible, nous définissons une nouvelle fonction qui accepte un seul paramètre OBJ. Le paramètre peut être une valeur unique, un tableau ou un objet complexe tel que Obj1 ci-dessus. Le code examine le type d'objet. Les valeurs uniques sont renvoyées immédiatement et seules les chaînes sont modifiées pour mettre des devis autour de la valeur. Si un tableau ou un objet est passé, le code itère via chaque propriété:

1. Les valeurs des chaînes ont des devis ajoutés.
2. Les tableaux ou objets d'enfants sont transmis récursivement à la fonction JSON.Stringify.
3. Les valeurs résultantes sont ajoutées à la fin d'un tableau JSON [] en tant que chaîne «nom: valeur», ou simplement une seule valeur pour les éléments du tableau.
4. Enfin, le tableau JSON est converti en une liste dédiée à des virgules et renvoyé dans le tableau [] ou objet {}supports si nécessaire.

Si votre cerveau est douloureux, vous serez heureux de savoir que le code JSON.Parse est beaucoup plus simple:

var obj1 = {
	b1: true,
	s1: "text string",
	n1: 12345,
	n2: null,
	n3: undefined,
	a1: [ 1,1,2,3,5,8, [13, 21, 34] ],
	o1: {
		a: [3, 2, 1],
		b: {
			c: 42,
			d: [ 3.14, 1.618 ]
		}
	}
};

Cela convertit une chaîne JSON en un objet utilisant EVAL (). Avant de vous précipiter pour implémenter les fonctions de sérialisation JSON dans tous vos projets, il y a quelques gatchas:

• Ce code a été intentionnellement gardé court. Cela fonctionnera dans la plupart des situations, mais il existe des différences subtiles avec les méthodes natives JSON.Strification et JSON.Parse.
• Tous les objets JavaScript ne sont pas pris en charge. Par exemple, une date () renverra un objet vide, tandis que les méthodes JSON natives le codent sur une chaîne de date / heure.
• Le code sérialisera les fonctions, par exemple var obj1 = {myfunc: function (x) {}}; tandis que les méthodes JSON natives ne le feront pas.
• Les très grands objets vont lancer des erreurs de récursivité.
• L'utilisation d'Eval () dans JSON.Parse est intrinsèquement risquée. Ce ne sera pas un problème si vous appelez vos propres services Web, mais que les appels vers des applications tiers pourraient casser accidentellement ou intentionnellement votre page et causer des problèmes de sécurité. Si nécessaire, un analyseur JavaScript plus sûr (mais plus long et plus lent) est disponible sur json.org.

J'espère que vous trouverez le code utile. N'hésitez pas à l'utiliser dans vos propres projets. Fichiers de ressources:

• JSON Sérialisation Page de démonstration
• Code JavaScript complet (json-serialization.js)
• Télécharger le code complet dans un fichier zip

Lecture connexe:

• Comment développer un plugin jQuery
• Comment construire un plugin JQuery en expansion automatique en expansion

à venir bientôt: une application utile de la sérialisation JSON…

Des questions fréquemment posées sur la série JavaScript JSON

Qu'est-ce que la sérialisation JSON dans JavaScript?

La sérialisation JSON dans JavaScript est le processus de conversion des objets JavaScript en un format de chaîne JSON. Cela se fait à l'aide de la méthode json.stringify (). La chaîne JSON résultante peut être stockée ou envoyée à un serveur. Il s'agit d'un processus crucial dans le développement Web car il permet de transférer facilement les données entre le client et le serveur.

Comment utiliser JSON.StriFify () dans JavaScript?

JSON.Stringify () est une méthode en javascript qui convertit un objet JavaScript en une chaîne JSON. Voici un exemple simple:

Laissez obj = {nom: "John", Âge: 30, ville: "New York"};
Laissez myjson = json.stringify (obj);
console.log (myjson);
Dans cet exemple, l'objet Javascript "est converti dans une json json en utilisant json.striffify. «Myjson».

Puis-je sérialiser les tableaux en javascript?

Oui, vous pouvez sérialiser les tableaux en javascript à l'aide de la méthode json.stringify (). Cette méthode fonctionne non seulement avec des tableaux simples, mais aussi avec des tableaux d'objets. Voici un exemple:

Soit arr = [1, 2, 3, 4];
que Myjson = json.Strifify (arr);
console.log (myjson);
dans cet exemple, le Array "arr" est converti en une chaîne JSON.

Comment désérialiser une chaîne JSON en javascript?

La désérialisation est le processus de conversion d'une chaîne JSON en un objet JavaScript. Cela se fait à l'aide de la méthode JSON.Parse (). Voici un exemple:

LET MYJSON = '{"Name": "John", "Age": 30, "City": "New York"}';
LET OBJ = JSON.Parse (Myjson);
Console.Log (obj);
Dans cet exemple, la chaîne JSON ‘Myjson’ est converti dans le retour dans un javascrip JSON.Parse ().

Que se passe-t-il si j'essaie de sérialiser une fonction dans JavaScript?

Si vous essayez de sérialiser une fonction en javascript à l'aide de JSON.StriNify (), la fonction sera ignorée et n'apparaîtra pas dans la chaîne JSON résultant. En effet, JSON est un format de données et ne prend pas en charge les capacités d'exécution de JavaScript.

Puis-je personnaliser le processus de sérialisation en JavaScript?

Oui, vous pouvez personnaliser le processus de sérialisation dans JavaScript en utilisant une fonction de remplacement ou un tableau de remplacement comme deuxième argument à JSON.Strinify (). Cela vous permet de filtrer les valeurs ou de les modifier pendant le processus de sérialisation.

Qu'est-ce qui est assez imprimé dans la série JavaScript JSON?

La jolie imprimée est un moyen de formater la chaîne JSON résultante de manière plus lisible. Cela se fait en fournissant un nombre comme troisième argument à json.stringify (), qui représente le nombre d'espaces à utiliser pour l'indentation.

Puis-je sérialiser et désérialiser les dates en javascript?

Oui, mais cela nécessite des étapes supplémentaires. Par défaut, lorsque vous sérialisez un objet date dans JavaScript, il sera converti en une chaîne au format ISO. Lorsque vous le désérialisez, il ne sera pas automatiquement converti en un objet de date. Vous devrez le convertir manuellement à l'aide du nouveau constructeur Date ().

Quelle est la méthode Tojson () en JavaScript?

La méthode Tojson () en javascript est utilisée pour modifier le comportement de JSON.Strifify (). Lorsqu'un objet a une méthode TOJSON (), JSON.StRINGIFY () l'appelle et sérialise la valeur qu'il renvoie, au lieu de l'objet d'origine.

Puis-je gérer de grands nombres pendant la sérialisation JSON dans JavaScript?

Oui, mais avec certaines limites. JavaScript peut représenter avec précision les nombres jusqu'à 2 ^ 53 - 1. Si vous avez besoin de sérialiser les plus grands nombres, vous devrez peut-être les convertir d'abord en chaînes pour éviter la perte de précision.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!