XML und DOM am Beispiel

XML und DOM ein Beispiel mit GET

In einem zweiten einfachen Beispiel möchte ich kurz auf die Verwendung von DOM eingehen. In diesem Beispiel soll folgende Funktionaltät realisiert werden:

  • Der Benutzer kann einen EURO Betrag eingeben.

  • Der Browser übermittelt den Betrag asynchron über Ajax zum Webserver, nach der Eingabe. Diese übermittlung wird mit einem GET Request gelöst, weil es nur ein Betrag sein soll.

  • Der Webserver schaut bei einem Webservice per Soap nach dem Wechselkurs für USDollar und britische Pfund. Nachdem der Webserver eine Antwort erhalten hat übermittelt er ein XML Dokument mit den den umgerechneten Betrag an den Client.

  • Der Client wertet dieses XML Dokument mit DOM aus und schreibt die Werte in die passenden Formularfelder.

Um den Quelltext so einfach wie Möglich zu halten wird auf unnötige Designelemente verzichtet. Das JavaScript benutze ich als Inline Code im HTML Dokument. Bei einer ernsthaften Implementierung sollte hierfür natürlich eine externe Datei verwendet werden. Das gleiche gilt für den CSS code.

Die Realisierung auf der Serverseite erfolgt mit PHP5, da hier der SoapClient relativ einfach genutzt werden kann.

 

Es dauert etwas länger bist eine Antwort erscheint, dabei muss man aber auch beachten was hinter der Kulisse passiert:

  • Anfrage via Ajax.
  • Der Webserver läd eine WSDL Datei die den Webservice beschreibt.
  • Abfrage des Wechselkurses via Soap.
  • zurücksenden der Antwort.
  • parsen und schreiben der Ergebnisse.

Alle diese Vorgänge brauchen etwas Zeit und ist abhängig von der Netzanbinung der beteiligen Server. Ich denke aber das man hieran sehen kann was mit Ajax möglich ist.

Beispiel: Ajax Währungsrechner

<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
                        xml = req.responseXML;
                        dollar_resp = xml.getElementsByTagName("dollar")[0];
                        pound_resp = xml.getElementsByTagName("pound")[0];
 
                        //schreiben des ergebnisses
                        dollar_field.value = dollar_resp.firstChild.nodeValue;
                        pound_field.value = pound_resp.firstChild.nodeValue;
                    }
                    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>

Beispiel: Server, PHP basierter Zugriff auf Währungs Webservice

<?php
    header("Content-Type: text/xml");
    $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;
    }
    
    echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
?>
<convertion>
    <euro><?php echo $euro; ?></euro>
    <dollar><?php echo $dollar;  ?></dollar>
    <pound><?php echo $pound;  ?></pound>
</convertion>

Beispiel: Die in XML codierte Umrechnung als Antwort

Die Umrechunung von 10 Euro würde z.b. folgende Ausgabe generieren:

 

<?xml version="1.0" encoding="utf-8"?>
<convertion>
   <euro>10</euro>
   <dollar>13.75</dollar>
   <pound>8.56</pound>
</convertion>

Das Programm zur Übersetzung ist nun geschrieben. Im Vergleich zum ersten Beispiel hat sich garnicht so viel geändert. Im nächsten Abschnitt ist eine detailierte Analyse der Bereiche zu finden die sich geändert haben.

Navigation