XML und DOM ein Beispiel mit GET
  Ajax Übersetzung in Action |
- Der Benutzer kann ein englisches Wort eingeben.
- Der Browser übermittelt das Wort asynchron über Ajax zum Webserver, nach der Eingabe. Diese übermittlung wird mit einem GET Request gelöst, weil es nur ein Wort sein soll.
- Der Webserver schaut beim Babelfish Webservice per Soap nach Übersetzungen für dieses Wort in deutsch und französisch. Nachdem der Webserver eine Antwort erhalten hat übermittelt er ein XML Dokument mit den Übersetzungen 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.
- Auf dem Webserver abfrage eines Webservice 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 Client zur Übersetzung
Hier zunächst der Quelltext des Ajax Clients:<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
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;
}
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/zwei/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>
Beispiel: Server, Zugriff auf Babelfish via Soap
Der in PHP geschriebene Server halt folgenden einfachen Aufbau:<?php
header("Content-Type: text/xml");
$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";
}
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
?>
<translation>
<english><?php echo $english; ?></english>
<german> <?php echo $german; ?></german>
<french> <?php echo $french; ?></french>
</translation>
Beispiel: Die in XML codierte Übersetzung als Antwort
Die Übersetzung des Strings "car" würde zum Beispiel folgendes XML Dokument als Antwort generieren:<translation>
<english>car</english>
<german> Auto </german>
<french> voiture </french>
</translation>
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.
