AJAX setzt sich als Web-Technologie mehr und mehr durch. AJAX macht es möglich, Teile einer Web-Seite zu ändern, ohne die gesamte Seite nochmals neu laden zu müssen. Es steht für Asynchronous JavaScript And Xml und beschreibt insofern, welche Technologien zu diesem Zweck eingesetzt werden: Mit Hilfe von JavaScript werden die neuen Daten asynchron (also im Hintergrund) geladen und mittels DHTML-Technologie in die HTML-Seite eingebaut. Zum Laden der Daten wird das JavaScript-Objekt XMLHttpRequest verwendet.

In dieser und den folgenden Ausgaben lernen Sie den Einsatz von AJAX kennen. Die Komplexität der Beispiele wird dabei Schritt für Schritt erhöht. Wir beginnen mit einer ganz einfachen Variante: Eine HTML DB-Seite enthält eine Auswahlliste mit den Namen der Mitarbeiter aus der bekannten EMP-Tabelle. Nach Auswahl eines Eintrags wird das Gehalt mit AJAX abgerufen:

Beachten Sie bitte, dass das Abrufen des Gehalts hier ohne das erneute Laden der gesamten HTML-Seite durchgeführt wird. Aus diesem Grund wird eine einfache Auswahlliste (ohne Um- oder Weiterleitung) verwendet. Zunächst passiert bei Auswahl eines Namens natürlich noch nichts.

Erstellen Sie nun zunächst einen Anwendungsprozeß. Navigieren Sie dazu zu den Gemeinsamen Komponenten und dort zu den Anwendungsprozessen.  Der neue Prozeß arbeitet Bedarfsgesteuert - er wird also nur auf Anfrage ausgeführt. Nennen Sie ihn getSalary.

Abb.2: Neuer, "bedarfsgesteuerter" Anwendungsprozeß

Hinterlegen Sie den folgenden PL/SQL-Code für den Prozeß:

declare
  l_SAL varchar2(100);
begin
  select SAL into l_SAL from EMP where EMPNO=:P1_EMPNO;
  htp.prn(l_SAL);
end;

Im nächsten Schritt sorgen Sie dafür, dass Ihr Anwendungsprozeß von JavaScript aus aufgerufen werden kann. Dazu müssen Sie das XmlHttpRequest-Objekt nicht direkt verwenden - die HTML DB liefert Ihnen eine fertige JavaScript-Funktion mit.

<script language="JavaScript1.1" type="text/javascript">
<!--
function f_getSalary ()
{ 
  var get = new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=getSalary',0);
  get.add('P1_EMPNO',html_GetElement('P1_EMPNO').value)
  gReturn = get.get();
  if(gReturn)
    {  html_GetElement('P1_SAL').value = gReturn  }
    else
    {  html_GetElement('P1_SAL').value = 'null'  }
  get = null; 
}
//-->
</script>

Hinterlegen Sie diesen JavaScript-Code nun entweder in der Seiten- oder in der Regionsdefinition. In diesem Beispiel wird der Regions-Header verwendet. Wie Sie Code erkennen können, wird die JavaScript-Funktion htmldb_Get verwendet. Wenn Sie Interesse haben, können Sie sich die Implementierung dieser Funktion selbst ansehen. Geben Sie dazu einfach die folgende URL in Ihren Browser ein: http://[host]:[port]/i/javascript/htmldb_get.js. Die Verwendung der fertigen htmldb_Get-Funktion erspart Ihnen die aufwändige Programmierung mit XmlHttpRequest.

Zum Abschluß sorgen Sie dafür, dass der soeben hinterlegte JavaScript-Code (und damit Ihr Anwendungsprozeß) jedesmal aufgerufen wird, wenn ein Eintrag in der Auswahlliste selektiert wird. Hinterlegen Sie dazu in der Auswahlliste den folgenden JavaScript-Event-Handler:

onChange="javascript:f_getSalary()";

Abb.3: Event-Handler (onChange-Attribut) für die Auswahlliste

Starten Sie die Seite nun neu und wählen Sie einen Eintrag aus der Auswahlliste aus. Daraufhin füllt sich sofort das Gehaltsfeld - ohne dass die Seite neu aufgebaut wird. In den nächsten Ausgaben der Community-Seite werden Sie mehr über AJAX erfahren und auch sehen, wie komplexere Anforderungen umgesetzt werden können.

Zurück zur Community-Seite