Mittwoch, Juli 13, 2005

Beispiel der Faktorenzerlegung

Das erste Beispiel in den Dateien CalcFactorsAJAX.htm (Client) und CalcService.asmx (Server) zeigt auf, wie die AJAX genutzt werden kann. Damit kann die prinzipielle Vorgehensweise einer AJAX Aktion leicht nachvollzogen werden.

Die Kopplung an den bereits bekannten WebService erfolgt mit der Hilfe des Proxy Generators:

<script type="text/javascript" src="GetJavaScriptProxy.aspx?service=CalcService.asmx"></script>

Im HTML Code gibt es 2 INPUT Felder mit deren Hilfe die die Kommunikation mit dem Anwender stattfindet.

Das Feld mit der id inputField ist editierbar und wird für die Eingabe einer der Zahl verwendet, die zerlegt werden soll. Als Event, mit dem die Aktion gestartet wird, wurde onkeyup gewählt, um möglichst alle Änderungen zeitnah mitzubekommen.

Dieses Event wird bei der Eingaben von Zahlen als auch die Eingabe von Editiertasten wie Backspace, Entfernen oder auch Strg-C für das Einfügen eines Wertes aus der Zwischenablage geworfen.

Im IE gäbe es noch das Event onpropertychange, das etwas besser geeignet wäre, aber der Firefox Browser kennt dieses Event nicht.

Das Feld outputField ist deaktiviert und wird zur Ausgabe der Faktoren verwendet.

...
  <td><input id="inputField" onkeyup="ajax.Start(action1)"></td>
...
  <td><input id="outputField" size="60" disabled="disabled"></td>
...

Die AJAX Aktion wird im JavaScript Block deklariert und es ist außer dieser Deklaration keine weitere Programmierung notwendig.

In den beiden Methoden prepare und finish ist zu sehen, wie auf die Felder zugegriffen wird um den Wert zu bekommen und zu setzen.

Als Methode ist der Verweis auf den Proxy in der Eigenschaft call hinterlegt. Exceptions werden einfach mit der Hilfe der Standard-Methode alertException in einer alert Box angezeigt.

Der delay Parameter ist auf 200 msec. gesetzt. Diese Zeitangabe hat sich bei meinen empirischen Messungen (mit mir selbst) als günstig erwiesen. Wenn die Kandidaten ;-) eine längere Zahl eingegeben haben wurde selten mehr als diese Zeit zwischen zwei Tastaturanschlägen benötigt so dass erst bei einer Pause bzw. beim Ende der Eingabe die Aktion tatsächlich ausgeführt wird.

Falls die erste Tasteneingabe bereits die Aktion gestartet hatte und wegen der Eingabe einer weiteren Ziffer eine weitere Aktion während dieser Zeit gestartet werden sollte, dann wird im Ergebnis die Wartezeit neu gestartet.

// declare an AJAX action
var action1 = {
  delay: 200,
  prepare: function() { return (document.getElementById("inputField").value); },
  call: proxies.CalcService.CalcPrimeFactors,
  finish: function (p) { document.getElementById("outputField").value = p; },
  onException: proxies.alertException
} // action1

Bei dieser Art der Implementierung kann man den tatsächlichen Ablauf der Aktion noch erkennen. Das ist ein großer Vorteil für jeden, der eine Aktion analysieren, erweitern oder reparieren muss, da die Implementierung der Aktion nicht über weite Bereiche des Sourcecodes in verschiedenen Methoden, CallBack Funktionen und Timer events verteilt ist sondern in diesem JavaScript Objekt zusammengefasst wird.

Keine Kommentare: