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

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

Beispiel: Die in XML codierte Umrechnung als Antwort

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

 

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