JSON statt XML

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 Währungsclients würde folgendermaßen aussehen:

<html>
<head>
    <title>Meine ersten Ajax Erfahrungen</title>
    <script type="text/javascript">
        <!--
        var req = null;

        function handleCalculation() {
            switch (req.readyState) {
                case 4:
                    if (req.status != 200) {
                        alert("Fehler:" + req.status);
                    } else {
                        //felder des formulars
                        dollar_field = document.getElementById("dollar");
                        pound_field = document.getElementById("pound");

                        //antwort des servers
                        var caluclationResult = eval('('+req.responseText+')');

                        //schreiben des ergebnisses
                        dollar_field.value = caluclationResult.dollar;
                        pound_field.value = caluclationResult.pound;
                    }
                    break;
                default:
                    return false;
                    break;
            }
        }

        function calculate() {
            //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 base = 'http://localhost/ajax-tutorial/zwei/ajax.php?eur=';
            var currentEuro = document.getElementById('euro').value;
            var url = base + currentEuro;

            req.open("GET", url, true);

            //Beim abschliessen des request wird diese Funktion ausgeführt
            req.onreadystatechange = handleCalculation;

            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;">
            Euro: <input type="text" id="euro" onchange="calculate();"/>
            <br/>
            Dollar: <input type="text" id="dollar"/>
            <br/>
            British Pound: <input type="text" id="pound"/>
            <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
    header("Content-Type: text/json");
    $euro = (float) $_REQUEST['eur'];
    $wsdl = "http://www.webservicex.net/CurrencyConvertor.asmx?WSDL";
    $converter = new SoapClient($wsdl);
 
    try {
        $in = new stdClass();
        $in->FromCurrency = 'EUR';
        $in->ToCurrency = 'USD';
 
        $out = $converter->ConversionRate($in);
        $dollar = (float) $out->ConversionRateResult * $euro;
 
        $in = new stdClass();
        $in->FromCurrency = 'EUR';
        $in->ToCurrency = 'GBP';
 
        $out = $converter->ConversionRate($in);
        $pound = (float) $out->ConversionRateResult * $euro;
    } catch (SoapFault $e) {
        $euro = 0;
        $dollar = 0;
        $pound = 0;
    }
     
    $result = array(    "euro" => $euro,
                        "dollar" => $dollar,
                        "pound" => $pound);
     
    print(trim(json_encode($result)));
?>

Der codierte JSON String

Der von JSON codierte String für die Umrechnung von 10 Euro hätte folgenden Aufbau:

{"euro":10,"dollar":13.75,"pound":8.56}

Navigation