Das Beispiel auf Prototype portiert

Das Ajax Beispiel portiert auf Prototype

Zu Anfang muss ich sagen, dass am Ende der Implementierung immernoch manchmal kleiner Fehler auftraten, die wohl an SOAP lagen.

In diesem Beispiel soll der Umgang mit dem Prototype Framework gezeigt werden. Dazu habe ich den Ajax Client zur Wührungsumrechung portiert. Ingesammt brauchen wir folgende Dateien:

  • index.htm - Für das Formular
  • /js/prototype.js - Die aktuelle Verison des Prototype Frameworks
  • /js/my.js - Eingene Aufrufe
  • ajax.php - Implementierung des Ajax Servers

Aufbau des HTML Formulars

 <html>
    <head>
        <title>Ajax Tutorial Seite 4</title>
        <script type="text/javascript" src="js/prototype.js"></script>
        <script type="text/javascript" src="js/my.js"></script>
    </head>
    <body onload="init();">
        <div id="eins" style="width: 300px; height: 100px; border: dashed 1px;">
            Euro: <input type="text" id="euro" /><br />
            Dollar: <input type="text" id="dollar" /><br />
            Pound: <input type="text" id="pound" /><br />
        </div>
        <div id="loading" style="position:absolute; left:50px; top:50px; 
             z-index:2; background-color: red;"> 
            Loading results...
        </div>
    </body>
</html>

Der HTML Client bindet die JavaScript Dateien ein. Wichtig ist ausserdem das bei body onload die Funktion "init()" ausgeführt wird. Diese Funktion befindet sich in /js/my.js

Die eigene JavaScript implementierung in /js/my.js

function init() {
	$('loading').hide();
	new Event.observe(
			'euro',
			'blur',
			function(event) {
				$('loading').show();

				new Ajax.Request('ajax.php',
						{
							method:'get',
							parameters: {eur: $('euro').value},
							onSuccess: function(nom, json) {
								//nom ist der nomale response text
								//json der automatische jsoin text
								$('dollar').value = json.dollar;
								$('pound').value = json.pound;
								$('loading').hide();
							},
							onFailure: function() {
								alert('Fehler bei Ajax Request')
							}
						});
			},
			false
	);
}

In dieser Funktion wird ein Observer für das Event "blur" des Elements "myword" registriert. Der Blur Event tritt dann auf wenn das Formularfeld mit dem Euro Betrag verlassen wird.

Der Loading Container wird am Anfang ausgeblendet, beim Start der Ajax Funktion eingeblendet und bei Erfolg wieder ausgeblendet.

Die Funktion, die bei Erfolg des Ajax Request ausgeführt wird (onSuccess) ist eine anonyme JavaScript Funktion it 2 Parametern. Der zweite Paramter ist das dekodierte JSON Objekt. Damit die Dekodierung funktionieren kann muss der Server einen speziellen Header produzieren.

Ajax Server mit X-JSON Header

<?php
    $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);
      
     header('X-JSON: '.trim(json_encode($result)));
?>

Der Ajax Server funktioniert im Vergleich zur vorherigen Funktion genauso. Nur die Ausgabe erfolgt nicht mit Print, sondern wird in das Headerfeld X-JSON geschrieben.

Navigation