Analyse des Beispiels

Das die Funktion, die beim beenden des Requests ausgeführt wird diesmal etwas grösser geworden ist wurde diese in handleTranslation ausgelagert und der Name der Funktion bei onreadystatechange übergeben.

Verarbeitung der Antwort mittels DOM in handleTranslation

Da die Antwort XML kodiert ist erfolgt die Auswertung mittels DOM:

//felder des formulars
german_field = document.getElementById("german");
french_field = document.getElementById("french");
                            
//antwort des servers
xml = req.responseXML;
german_resp = xml.getElementsByTagName("german")[0];
french_resp = xml.getElementsByTagName("french")[0];
                            
//schreiben des ergebnisses
german_field.value = german_resp.firstChild.nodeValue;
french_field.value = french_resp.firstChild.nodeValue;

In den ersten drei Zeilen wird lediglich das Formular Feld, in das später geschrieben werden soll in einer Variable gespeichert.

In den nächsten drei Zeilen wird mit "req.responseXML" die XML antwort gelesen. Es wird jeweiles der Knoten mit dem Tag german und french zwischengespeichert. In den danach folgenden drei Zeilen wird das Ergebnis innerhalb dieser Tags in die Formularfelder geschrieben.
So steht zum Schluss die Übersetzung in den dafür vorgesehenen Feldern.

Übermittlung via GET

In diesem Beispiel erfolgt die Übermittlung mit einem HTTP GET Request. Folgende stelle im Code ist dafür intressant:

//anfrage erstellen (GET, url ist localhost,
//request ist asynchron      
var url = 'http://localhost/ajax-tutorial/zwei/ajax.php?translate='+
           document.getElementById('myword').value;
req.open("GET", url, true);

In der Variable "url" wird zunächst die Url zusammengebaut in dem das zu übersetzende Wort aus dem entsprechenden Textfeld ausgelesen wird und an die Url angehängt wird. Für das Beispiel mit dem Auto hätte die Url also folgenden Wert:

"http://localhost/ajax-tutorial/zwei/ajax.php?translation=car"

Muss ich XML benutzen?

Wie man an diesem Beispiel sieht, hat XML einige Vor und Nachteile. Zunächst einmal die Vorteile:

• XML ist weit verbreitet eine Verarbeitung des XML Dokuments ist in allen Programmiersprachen meisst mit eingenen Parsern möglich.
• Wenn man DOM beherrscht ist eine Verarbeitung einfach möglich.
• XML liefert eine Möglichkeit der validiering eines Dokuments quasi mit.

XML bringt aber auch ein paar Nachteile mit sich:

• Die Dokumente die zurück geschickt haben, enthalten viel an Drumherum (Overhead) aber nur wenig Nutzbare Daten.
• Mit XML kommt zu JavaSkript und der serverseitigen Programmiersprache eine weitere Technologie hinzu die man beherrschen muss.
• Sich in DOM einzuarbeiten für ein paar kleine Projekte kann u.U zu aufwändig sein.

Aus den oben genannten Gründen gibt es JSON. JSON ermöglicht es auf dem Server Datenstrukturen wie z.B. einen Array in das JSON Format zu serialisieren. Im Client JavaScript kann diese serialisierte Struktur wieder zusammengebaut (deserialisiert) werden und genutzt werden.

Im nächsten Abschnitt schauen wir uns JSON genauer an.