Was ist JSON?
Die Abkürzung JSON steht für JavaScript Object Notation. Mit JSON kann man Datenstrukturen in einer Programmiersprache, die eine JSON Bibliothek anbietet serialisieren und in JavaScript mit Eval() wieder deserialisieren. Dabei muss das dekodierende Programm aber nicht zwingend JavaScript sein, die Nutzung zum Datenaustausch in einer JavaScriptlosen Umgebung ist ebenfalls möglich.Dadurch ist es z.b. in unserem Beispiel möglich auf der Serverseite ein assoziatives Array in PHP zu erstellen. Dieses Array kann man dann mit einer Bibliothek in das JSON Format konvertieren und an den Client übermitteln.
Der Client kann diesen JSON String dann mit Eval oder der Funktion von json.org wieder in ein Array konvertieren. Anderstrum ist es natürlich ebenfalls möglich ein Array am Client in die JSON Notation zu konvertieren und am Server wieder zu dekodieren.
Wie bereits weiter oben erwähnt erfolgt die Auswertung mittels der JavaScript Funktion eval. Es gibt ausserdem aber auch eine Bibliothek von json.org die diese Aufgabe übernimmt. Mit dieser Bibliothek ist über die Methode toJSONString ebenfalls der Umgekehrte Weg möglich. Zu bekommen ist dieses Skript unter http://www.json.org/json.js
Die Verwendung dieser Library führt jedoch auch zu einem längeren JavaScript Code.
Weitere Informationen zu JSON sind unter der Website www.json.org oder im Wikipedia zu finden http://de.wikipedia.org/wiki/JSON
Für PHP gibt es ein PEAR Paket dass es erlaubt PHP Datenstrukturen mit der Methode "encode" in das JSON Format zu konvertieren. Angewendet auf unser Beispiel zur Überstzung würde eine Implementierung mit JSON folgendermaßen aussehen:
Verarbeitung der Ajax Antwort mittels JSON / Eval
Die JSON Variante des Übersetzungsclients würde folgendermaßen aussehen:<html>
<head>
<title>Meine ersten Ajax Erfahrungen</title>
<script type="text/javascript">
<!--
var req = null;
function handleTranslation(){
switch(req.readyState) {
case 4:
if(req.status!=200) {
alert("Fehler:"+req.status);
}else{
//felder des formulars
german_field = document.getElementById("german");
french_field = document.getElementById("french");
//antwort des servers
var translation = eval('(' + req.responseText + ')');
//schreiben des ergebnisses
german_field.value = translation.german;
french_field.value = translation.french;
}
break;
default:
return false;
break;
}
}
function translate(){
//erstellen des requests
try{
req = new XMLHttpRequest();
}
catch (e){
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed){
req = null;
}
}
}
if (req == null)
alert("Error creating request object!");
//anfrage erstellen (GET, url ist localhost,
//request ist asynchron
var url = 'http://localhost/ajax-tutorial/drei/ajax.php?translate='+
document.getElementById('myword').value;
req.open("GET", url, true);
//Beim abschliessen des request wird diese Funktion ausgeführt
req.onreadystatechange = handleTranslation;
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
req.send(null);
}
//-->
</script>
</head>
<body>
<div id="eins" style="width: 80%; height: 80%; border: dashed 1px;">
englisch: <input type="text" id="myword" onchange="translate();" /><br />
deutsch: <input type="text" id="german" /><br />
französisch: <input type="text" id="french" /><br />
</div>
</body>
</html>
Implementierung des Servers mit der Nutzung von PEAR JSON
Die Implementierung des Servers in PHP mit der Nutzung der pear JSON Bibliothek sieht wie folgt aus:<?php
require_once("json.php");
$english = mysql_escape_string($_REQUEST['translate']);
$trans = new SoapClient("http://www.xmethods.net/sd/2001/".
"BabelFishService.wsdl");
try{
$german = $trans->BabelFish("en_de",$english);
$french = $trans->BabelFish("en_fr",$english);
}
catch(SoapFault $e){
$english = "not found";
$german = "not found";
$french = "not found";
}
$result = array("english" => $english,
"german" => $german,
"french" => $french);
$myjson = new Services_JSON();
print(trim($myjson->encode($result)));
?>
Der codierte JSON String
Der von JSON codierte String für die Überstzung von car hätte folgenden Aufbau:{"english":"car","german":"Auto ","french":"voiture "}
