Javascript-Lese- und Schreib-JSON-Beispiel_Javascript-Kenntnisse

JSON (JavaScript Object Notation) ist ein einfaches Datenformat, das leichter als XML ist. JSON ist ein natives JavaScript-Format, was bedeutet, dass für die Verarbeitung von JSON-Daten in JavaScript keine spezielle API oder ein spezielles Toolkit erforderlich ist.

Die Regeln von JSON sind einfach: Ein Objekt ist eine ungeordnete Sammlung von „Name/Wert“-Paaren. Ein Objekt beginnt mit „{“ (linke Klammer) und endet mit „}“ (rechte Klammer). Auf jeden „Namen“ folgt ein „:“ (Doppelpunkt); „Name/Wert“-Paare werden durch ein „“, (Komma) getrennt. Spezifische Details finden Sie unter http://www.json.org/json-zh.html

Ein einfaches Beispiel:

js-Code

Code kopieren Der Code lautet wie folgt:

function showJSON() {

var user =

{

"username":"andy",

"age":20,

"info": { "tel": "123456", "cellphone" : 98765
{" city": "newyork", "postcode": "555666"}

]

}

alert(user.username);
alert(user.age);

alert(user.info.cellphone);

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

}


Dies stellt ein Benutzerobjekt mit Attributen wie Benutzername, Alter, Informationen, Adresse usw. dar.

Sie können JSON auch verwenden, um einfach die Daten zu ändern. Ändern Sie das obige Beispiel.

js-Code

Code kopieren


Der Code lautet wie folgt:


function showJSON() {

var user = { "username" :"andy",

"age":20,

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

"Adresse":

[

{"Stadt":Peking,Postleitzahl:222333"},

{"Stadt":New York ,"postcode ":"555666"}

]

}

alert(user.username);

alert(user.age); 🎜>
alert(user.info.cellphone);

alert(user.address[0].city);

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

user.username = "Tom";

alert(user.username);

}


JSON stellt das json.js-Paket bereit, Laden Sie http://www.json.org/json.js herunter. Nach dem Import können Sie es einfach mit object.toJSONString() in JSON-Daten konvertieren.

js-Code




Code kopieren

Der Code lautet wie folgt:


Funktion showCar() {

var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow"); alert(carr.toJSONString()); 🎜>} Funktion Auto(Marke, Modell, Jahr, Farbe) {

this.make = make;

this.model = model

this.year = Jahr;

this.color = color;

}


Sie können eval verwenden, um JSON-Zeichen in Object zu konvertieren

js-Code




Code kopieren


Der Code lautet wie folgt:

function myEval( ) {

var str = '{ "name": "Violet", "occupation": "character" }';

var obj = eval('(' str ')') ; Alert(obj.toJSONString()); }

oder verwenden Sie die parseJSON()-Methode

js-Code




Code kopieren


Der Code lautet wie folgt:

function myEval() {

var str = '{ "name": "Violet", "occupation": "character" }';

var obj = str.parseJSON(); ; } Im Folgenden wird ein Prototyp verwendet, um ein Ajax-Beispiel von JSON zu schreiben.

Schreiben Sie zuerst ein Servlet (meins ist servlet.ajax.JSONTest1.java) und schreiben Sie einen Satz

Java-Code




Code kopieren


Der Code lautet wie folgt:

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


Schreiben Sie eine Ajax-Anfrage auf der Seite

JS-Code Kopieren Sie den Code

Der Code lautet wie folgt:

function sendRequest() {

var url = "/MyWebApp/JSONTest1";

var mailAjax = new Ajax.Request(

url,

{

Methode: 'get',

onComplete: jsonResponse

}

}

function jsonResponse(originalRequest) {

alert(originalRequest.responseText);

var myobj = originalRequest.responseText.parseJSON();

alert(myobj .name);

}


prototype-1.5.1.js bietet eine JSON-Methode, String.evalJSON(), Sie können das Obige ändern, ohne die json.js-Methode zu verwenden

JS-Code

Code kopieren Der Code lautet wie folgt:

Funktion jsonResponse ( originalRequest) {

alert(originalRequest.responseText);

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

alert(myobj.name); >
}


JSON bietet auch ein Java-JAR-Paket http://www.json.org/java/index.html Die API ist ebenfalls sehr einfach, hier ist ein Beispiel

Anforderungsparameter in Javascript hinzufügen

js-Code

Code kopieren Der Code lautet wie folgt: function sendRequest() {

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

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

var url = "/MyWebApp/JSONTest1";

var mailAjax = new Ajax.Request(

url,

{

Methode: 'get',

Parameter: pars,

onComplete: jsonResponse

}

) ;

}


Mithilfe der JSON-Anforderungszeichenfolge können Sie einfach JSONObject generieren und analysieren und das Servlet ändern, um JSON-Verarbeitung hinzuzufügen (Sie müssen json.jar verwenden)

Java-Code

Code kopieren Der Code lautet wie folgt: private void doService (HttpServletRequest-Anfrage, HttpServletResponse-Antwort) löst eine IOException aus {

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

try {

JSONObject jsonObj = new JSONObject(s3) ;

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

System.out.println(jsonObj.getInt("year")); >} Catch (JSONException e) {

e.printStackTrace();

}

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

}


Sie können JSONObject auch verwenden, um eine JSON-Zeichenfolge zu generieren und das Servlet zu ändern

Java-Code

Code kopieren

Der Code lautet wie folgt: privat void doService(HttpServletRequest-Anfrage, HttpServletResponse-Antwort) löst eine IOException aus { String s3 = request.getParameter("car");

try {

JSONObject jsonObj = new JSONObject( s3);

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

System.out.println(jsonObj.getInt("year"));
} Catch (JSONException e) {

e.printStackTrace();

}

JSONObject resultJSON = new JSONObject();

try {

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

.append("occupation", "developer")

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

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

}

response .getWriter().print(resultJSON.toString());

}


js-Code




Code kopieren


Der Code lautet wie folgt:

function jsonResponse(originalRequest) {

alert (originalRequest.responseText); var myobj = originalRequest.evalJSON(true); alert(myobj.age);

}

Referenz

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

Verwenden Sie JSON
JSON auch Es handelt sich um die JavaScript-Objektnotation, eine einfache Syntax zur Beschreibung von Daten. JSON ist elegant, weil es eine Teilmenge der JavaScript-Sprache ist. Als Nächstes erfahren Sie, warum dies so wichtig ist. Vergleichen wir zunächst die JSON- und XML-Syntax.

Sowohl JSON als auch XML verwenden strukturierte Methoden zur Beschreibung von Daten. Beispielsweise kann eine Adressbuchanwendung einen Webdienst zum Generieren von Adresskarten im XML-Format bereitstellen:

Code kopieren Der Code lautet wie folgt folgt:

SK Consulting

kelly@seankelly.biz

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

;/address>

http://seankelly.tv/

🎜>
Verwenden Sie JSON, das Formular lautet wie folgt:




Code kopieren


Der Code lautet wie folgt:


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

{"type": "work", „value“: „kelly@seankelly.biz“},
{“type“: „home“, „pref“: 1, „value“: „kelly @seankelly.tv“}
],

"Telefone": [ {"Typ": "Arbeit", "Pref": 1, "Wert": " 1 214 555 1212"}, {"Typ": "Fax", "Wert ": " 1 214 555 1213"}, {"type": "mobile", "value": " 1 214 555 1214"} ] , "addresses": [ { „type“: „work“, „format“: „us“,

“value“: „1234 Main StnSpringfield, TX 78080-1216“},

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


Wie Sie sehen, verfügt JSON über strukturierte verschachtelte Datenelemente, ähnlich wie XML. JSON ist ebenso textbasiert wie XML. Beide verwenden Unicode. Sowohl JSON als auch XML sind leicht zu lesen. Subjektiv ist JSON sauberer und weniger redundant. Die JSON-WEB-Site beschreibt strikt die JSON-Syntax, und das ist auch derzeit so. Es ist wirklich eine einfache kleine Sprache! XML eignet sich zwar zum Markieren von Dokumenten, JSON ist jedoch das ideale Format für die Dateninteraktion. Jedes JSON-Dokument beschreibt ein Objekt, das Folgendes enthält: verschachtelte Objekte, Arrays, Zeichenfolgen, Zahlen, boolesche Werte oder Nullwerte.

In diesen Beispielcodes für Adresskarten ist die JSON-Version kompakter und benötigt nur 682 Byte Speicherplatz, während die XML-Version 744 Byte Speicherplatz benötigt. Obwohl dies keine wesentliche Ersparnis ist. Der eigentliche Nutzen ergibt sich aus dem Parsing-Prozess.

XML vs. JSON: Statusverlust
XML- und JSON-Dateien können von Ihrer AJAX-basierten Anwendung mithilfe des XMLHttpRequest-Objekts abgerufen werden. Typischerweise lautet der Interaktionscode wie folgt:




Code kopieren


Der Code lautet wie folgt:

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


Während der WEB-Server antwortet, wird die von Ihnen bereitgestellte Handler-Funktion (myHandler-Funktion) mehrmals aufgerufen und bietet Ihnen die Möglichkeit, die Transaktion vorzeitig zu beenden, den Fortschrittsbalken zu aktualisieren usw. Normalerweise funktioniert dies erst, nachdem die Webanforderung abgeschlossen ist: Zu diesem Zeitpunkt können Sie die zurückgegebenen Daten verwenden.

Um die XML-Version der Adresskartendaten zu verarbeiten, lautet der Code von myHandler wie folgt:

Kopieren Sie den Code Der Code lautet wie folgt:

function myHandler() {
if (req.readyState == 4 /*complete*/) {
// Adressfeld aktualisieren in einem Formular mit erster Straßenadresse
var addrField = document.getElementById('addr');
var root = req.responseXML;
var addrsElem = root.getElementsByTagName('addresses')[0];
var firstAddr = addrsElem.getElementsByTagName('address')[0];
var addrText = addrText.nodeValue;
addrField.value = addrValue; }
}


Es ist erwähnenswert, dass Sie das XML-Dokument nicht analysieren müssen: Das XMLHttpRequest-Objekt wird automatisch analysiert und stellt den DOM-Baum in ResponseXML zur Verfügung. Mithilfe des Attributs „responseXML“ können Sie die Methode „getElementsByTagName“ aufrufen, um den Adressteil des Dokuments zu finden. Sie können auch den ersten verwenden, um ihn zu finden. Anschließend können Sie getElementsByTagName erneut aufrufen, um das erste Adresselement im Adressteil zu finden. Dies ruft den ersten untergeordneten DOM-Knoten des Dokuments ab, bei dem es sich um einen Textknoten handelt, und ruft den Wert des Knotens ab, bei dem es sich um die gewünschte Straßenadresse handelt. Abschließend können die Ergebnisse in einem Formularfeld angezeigt werden.

Es ist in der Tat keine einfache Aufgabe. Versuchen Sie es jetzt noch einmal mit JSON:

Kopieren Sie den Code Den Code lautet wie folgt:

function myHandler() {

if (req.readyState == 4 /*complete*/) {
var addrField = document.getElementById('addr') ;
var card = eval('(' req.responseText ')');
addrField.value = card.addresses[0].value;
Als Erstes analysieren Sie die JSON-Antwort. Da es sich bei JSON jedoch um eine Teilmenge von JavaScript handelt, können Sie zum Parsen den JavaScript-eigenen Compiler verwenden, indem Sie die Funktion „eval“ aufrufen. Das Parsen von JSON erfordert nur eine Zeile! Darüber hinaus ähnelt die Bearbeitung von Objekten in JSON der Bearbeitung anderer JavaScript-Objekte. Dies ist offensichtlich einfacher als die Manipulation durch den DOM-Baum, zum Beispiel:
card.addresses[0].value ist die erste Straßenadresse, „1234 Main Stb &“
card.addresses[0].type ist die Adresstyp „Arbeit“
card.addresses[1] ist das Heimatadressobjekt
card.fullname ist der Name der Karte, „Sean Kelly“
Wenn Sie genauer hinschauen, werden Sie das vielleicht finden Das Dokument im XML-Format ist mindestens vorhanden. Es gibt ein Follower-Element, die Karte. Das gibt es in JSON nicht, warum? Wenn Sie JavaScript für den Zugriff auf einen Webdienst entwickeln, wissen Sie vermutlich bereits, was Sie wollen. Sie können dies jedoch in JSON verwenden:
{"card": {"fullname": ...}}

Mit dieser Technik beginnt Ihre JSON-Datei immer mit einem einzelnen Namen. Das Objekt beginnt mit einer Eigenschaft, die die Art des Objekts identifiziert.

Ist JSON schnell und zuverlässig?

JSON bietet kompakte kleine Dokumente und JSON ist in JavaScript einfacher zu verwenden. XMLHttpRequest analysiert das XML-Dokument automatisch für Sie und Sie müssen die JSON-Datei manuell analysieren. Aber ist das Parsen von JSON langsamer als das Parsen von XML? Der Autor hat XMLHttpRequest verwendet, um XML zu analysieren und JSON durch Tausende von wiederholten Tests zu analysieren. Das Ergebnis ist, dass das Parsen von JSON zehnmal schneller ist als das von XML! Wenn man AJAX als Desktop-Anwendung betrachtet, bei der Geschwindigkeit der wichtigste Faktor ist, ist klar, dass JSON überlegen ist.

Natürlich können Sie die Serverseite nicht immer steuern, um Daten für ein AJAX-Programm zu generieren. Sie können anstelle des Servers auch einen Server eines Drittanbieters verwenden, um XML-formatierte Ausgaben bereitzustellen. Und wenn der Server JSON bereitstellt, sind Sie sicher, dass Sie es tatsächlich verwenden möchten?

Was in Ihrem Code erwähnenswert ist, ist, dass Sie den Antworttext direkt an eval übergeben. Sie können dies tun, wenn Sie den Server steuern. Wenn nicht, kann ein bösartiger Server dazu führen, dass Ihr Browser gefährliche Aktionen ausführt. In solchen Fällen ist es besser, in JavaScript geschriebenen Code zum Parsen des JSON zu verwenden. Zum Glück gibt es das bereits.

Apropos Parsen: Python-Enthusiasten bemerken möglicherweise, dass JSON nicht nur eine Teilmenge von JavaScript, sondern auch eine Teilmenge von Python ist. Sie können JSON direkt in Python ausführen oder stattdessen sicheres JSON-Parsing verwenden. Die Website JSON.org listet viele häufig verwendete JSON-Parser auf.

Serverseitiges JSON

Möglicherweise haben Sie sich inzwischen auf die Verwendung von JSON in AJAX-basierten Webanwendungen konzentriert, die in Client-Browsern ausgeführt werden. Natürlich müssen zunächst serverseitig die Daten im JSON-Format generiert werden. Glücklicherweise ist die Erstellung von JSON oder die Konvertierung anderer vorhandener Daten in JSON recht einfach. Einige WEB-Anwendungs-Frameworks wie TurboGears unterstützen automatisch die JSON-Ausgabe.

Darüber hinaus sind auch kommerzielle WEB-Dienstleister auf JSON aufmerksam geworden. Yahoo hat kürzlich viele JSON-basierte Webdienste erstellt. Die verschiedenen Suchdienste, Fulfillment-Pläne, del.icio.us und Autobahnverkehrsdienste von Yahoo unterstützen ebenfalls die JSON-Ausgabe. Zweifellos werden auch andere große Webdienstanbieter JSON unterstützen.

Zusammenfassung

Das Schöne an JSON ist, dass es eine Teilmenge von JavaScript und Python ist, was die Verwendung erleichtert und eine effiziente Dateninteraktion mit AJAX ermöglicht. Es lässt sich schneller analysieren und ist einfacher zu verwenden als XML. JSON wird jetzt zur stärksten Stimme von „Web 2.0“. Jeder Entwickler, egal ob es sich um eine Standard-Desktopanwendung oder eine Webanwendung handelt, erkennt zunehmend die Einfachheit und Bequemlichkeit. Ich hoffe, Sie können die Freude an der Anwendung von JSON in einer Buzzword-konformen, Web-2.0-basierten, AJAX-fähigen, agilen Entwicklung erleben.