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

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

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

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