Cross-Browser JSON-Serialisierung in JavaScript

In diesem Artikel werden wir die Vorteile der Objektserialisierung, die aktuellen Browser-Implementierungen, untersuchen und einen Code entwickeln, der Ihren AJAX-basierten Projekten helfen könnte. Angenommen, wir haben ein ziemlich komplexes JavaScript -Objekt, das mit wörtlicher Notation definiert ist:

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 ]
		}
	}
};

Wir können auf verschiedene Weise auf eine der Objekteigenschaften zugreifen:

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

Dieses Objekt kann auch an JavaScript -Funktionen und -Methoden übergeben werden, anstatt einzelne Argumente anzugeben. Nützliches Zeug. Was ist jedoch, wenn wir dieses Objekt in einem Keks speichern müssen? Was ist, wenn wir das Objekt über eine AJAX -Anfrage an einen Webdienste übergeben müssen? Was ist, wenn dieser Webdienst eine geänderte Version des Objekts zurückgeben möchte? Die Antwort ist die Serialisierung:

• Serialisierung ist der Prozess, jedes Objekt in eine Zeichenfolge zu verwandeln.
• De-Serialisierung verwandelt diese Zeichenfolge wieder in ein nationales Objekt.

Die beste String -Notation, die wir in JavaScript verwenden können, ist JSON - JavaScript -Objektnotation. JSON ist ein leichtes Datenabschnitt-Format, das von JavaScript-Objekt-Literalnotation inspiriert ist, wie oben gezeigt. JSON wird von PHP und vielen anderen serverseitigen Sprachen unterstützt (siehe json.org). In JavaScript gibt es zwei JSON -Methoden:

1. json.Stringify ( obj ) - konvertiert ein JavaScript -Objekt in eine JSON -String
2. json.parse ( str ) - konvertiert eine JSON -String in ein JavaScript -Objekt

Leider liefern nur sehr wenige Browser diese Methoden. Bisher bieten nur Firefox 3.5, Internet Explorer 8.0 und Chrome 3 Beta native Unterstützung. Einige JavaScript -Bibliotheken bieten ihre eigenen JSON -Tools an (wie Yui ) Aber viele nicht (einschließlich jQuery). Alles ist jedoch nicht verloren - JavaScript ist flexibel und wir können die JSON -Stringify- und Parse -Methoden implementieren, wenn ein Browser sie benötigt. Oben in unserem Code erstellen wir eine JSON -Variable, die auf das native JSON -Objekt oder ein leeres Objekt verweist, wenn es nicht verfügbar ist:

var JSON = JSON || {};

Der json.Stringify -Code ist etwas komplexer:

// 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 ? "]" : "}");
	}
};

Wenn JSON.Stringify nicht verfügbar ist, definieren wir eine neue Funktion, die einen einzelnen OBJ -Parameter akzeptiert. Der Parameter kann ein einzelner Wert, ein Array oder ein komplexes Objekt wie OBJ1 sein. Der Code untersucht den Objekttyp. Einzelne Werte werden sofort zurückgegeben und nur Zeichenfolgen werden geändert, um Zitate um den Wert zu legen. Wenn ein Array oder ein Objekt übergeben wird, iteriert der Code jede Eigenschaft:

1. Zeichenfolgen Werte haben Zitate hinzugefügt.
2. untergeordnete Arrays oder Objekte werden rekursiv an die JSON.Stringify -Funktion übergeben.
3. Die resultierenden Werte werden zum Ende eines JSON [] -Array als "Name: Wert" oder nur als einzelner Wert für Array -Elemente hinzugefügt.
.
4. Schließlich wird das JSON-Array in eine mit Komma-delimitierte Liste umgewandelt und in Array [] oder Object {} zurückgegebenKlammern nach Bedarf.

Wenn der Schmerz Ihres Gehirns, werden Sie sich freuen zu wissen, dass der json.Parse -Code viel einfacher ist:

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 ]
		}
	}
};

Dadurch konvertiert ein JSON -String mit eval () in ein Objekt. Bevor Sie sich in all Ihren Projekten zur Implementierung von JSON -Serialisierungsfunktionen beeilen, gibt es einige Gotchas:

• Dieser Code wurde absichtlich kurz gehalten. Es wird in den meisten Situationen funktionieren, aber es gibt subtile Unterschiede zu den nativen JSON.Stringify- und JSON.Parse -Methoden.
• Nicht jedes JavaScript -Objekt wird unterstützt. Beispielsweise gibt ein Datum () ein leeres Objekt zurück, während native JSON -Methoden es in eine Datums-/Uhrzeit -Zeichenfolge codieren.
• Der Code serialisiert Funktionen, z. var obj1 = {myfunc: function (x) {}}; während native JSON -Methoden nicht.
• Sehr große Objekte werfen Rekursionsfehler aus.
• Die Verwendung von Eval () in JSON.Parse ist von Natur aus riskant. Es wird kein Problem sein, wenn Sie Ihre eigenen Webdienste anrufen, aber Anrufe bei Anträgen von Drittanbietern möglicherweise versehentlich oder absichtlich Ihre Seite brechen und Sicherheitsprobleme verursachen. Bei Bedarf ist ein sichererer (aber längerer und langsamerer) JavaScript -Parser von json.org verfügbar.

Ich hoffe, Sie finden den Code nützlich. Nutzen Sie es in Ihren eigenen Projekten. Ressourcendateien:

• JSON Serialisierungsdemonstrationsseite
• Voller JavaScript-Code (json-serialization.js)
• Der vollständige Code in einer ZIP -Datei herunterladen

Verwandte Lesung:
So entwickeln Sie ein JQuery -Plugin
So erstellen Sie ein automatisch expandierendes Textbereich JQuery Plugin

bald kommt: Eine nützliche Anwendung der JSON -Serialisierung…

häufig gestellte Fragen zu JavaScript JSON Serialisierung

Was ist die JSON -Serialisierung in JavaScript? Dies erfolgt mit der Methode jSON.Stringify (). Die resultierende JSON -Zeichenfolge kann gespeichert oder an einen Server gesendet werden. Es ist ein entscheidender Prozess in der Webentwicklung, da Daten leicht zwischen Client und Server übertragen werden können. Hier ist ein einfaches Beispiel:

lass obj = {name: "John", Alter: 30, Stadt: "New York"}; "Myjson".

Kann ich Arrays in JavaScript serialisieren? Diese Methode funktioniert nicht nur mit einfachen Arrays, sondern auch mit Arrays von Objekten. Hier ist ein Beispiel:

Sei arr = [1, 2, 3, 4];
lass myjson = json.Stringify (arr);

Wie kann ich eine JSON -String in JavaScript deserialisieren? Dies erfolgt mit der Methode json.Parse (). Hier ist ein Beispiel:

lass myjson = '{"name": "John", "Alter": 30, "Stadt": "New York"}'; Json.parse ().

Was passiert, wenn ich versuche, eine Funktion in JavaScript zu serialisieren? Dies liegt daran, dass JSON ein Datenformat ist und die Ausführungsfähigkeiten von JavaScript nicht unterstützt.

Kann ich den Serialisierungsprozess in JavaScript anpassen? Auf diese Weise können Sie Werte filtern oder während des Serialisierungsprozesses ändern. Dies geschieht durch die Bereitstellung einer Zahl als drittes Argument für JSON.Stringify (), das die Anzahl der für die Einklebung zu verwendenden Räume darstellt. Wenn Sie ein Datumsobjekt in JavaScript serialisieren, wird dies standardmäßig in eine Zeichenfolge im ISO -Format konvertiert. Wenn Sie es deserialisieren, wird es nicht automatisch in ein Datumsobjekt umgewandelt. Sie müssen es mit dem neuen Date () -Konstruktor (🎜>
) manuell zurück konvertieren. Wenn ein Objekt eine tojson () -Methode hat, nennt JSON.Stringify () es und serialisiert den Wert, den es zurückgibt, anstelle des ursprünglichen Objekts. JavaScript kann die Zahlen bis zu 2^53 - 1 genau darstellen. Wenn Sie größere Zahlen serialisieren müssen, müssen Sie sie möglicherweise zuerst in Zeichenfolgen konvertieren, um einen Präzisionsverlust zu vermeiden.

Das obige ist der detaillierte Inhalt vonCross-Browser JSON-Serialisierung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!