AJAX steht für Asynchronous JavaScript And Xml und setzt sich als Web-Technologie mehr und mehr durch. Mit AJAX wird es möglich, Teile einer Web-Seite zu ändern, ohne die gesamte Seite nochmals neu laden zu müssen.  In den vergangenen Ausgaben haben Sie zunächst ein einfaches Beispiel und anschließend das "aktive Formular" kennengelernt. Heute erfahren Sie, wie Sie mit AJAX und Application Express eine ganze Seitenregion einfach austauschen - und dies wiederum ohne die HTML-Seite als Ganzes neu laden zu müssen.

Abbildung 1 zeigt die Ausgangssituation. Zur gerade ausgewählten Abteilung soll ein Bericht mit den Mitarbeitern dieser Abteilung eingeblendet werden. Normalerweise löst man eine solche Anforderung durch erneutes Laden der gesamten Seite. Heute soll jedoch nur der Bericht geladen und in die Seite eingebaut werden - mit der AJAX-Technologie. Legen Sie also eine neue Seite an (Seite 5) und fügen Sie dieser eine einfache HTML-Region und eine Auswahlliste auf die allseits bekannte Tabelle DEPT (SQL: select DNAME D, DEPTNO R from DEPT) hinzu.

Legen Sie nun eine zweite Region an - Als Typ wählen Sie HTML Region. Als Regionsquelle hinterlegen Sie lediglich den in Abbildung 2 dargestellten Text. Das DIV-Tag mit dem ID-Attribut dient als Anker, an dieser Stelle wird der Bericht mit der AJAX-Technologie eingehangen.

Legen Sie als nächstes eine neue Seite in Ihrer Anwendung an. Diese Seite wird nicht direkt aufgerufen; sie enthält jedoch den Bericht, der über AJAX abgerufen und dargestellt wird. Empfehlenswert ist ein eigener Nummernkreis für diese Seiten (hier: 1000). Dieser Seite fügen Sie dann einen normalen SQL-Bericht auf die Tabelle EMP hinzu (Abbildung 3). Anschließend legen Sie das in der SQL-Abfrage verwendete Element P1000_DEPTNO hinzu. Verwenden Sie als Elementtyp Ausgeblendet (Hidden).

Wechseln Sie nun wieder zurück zu Seite 5. Als nächstes hinterlegen SIe den JavaScript-Code, der den Bericht abrufen und in die Seite integrieren wird. Glücklicherweise nehmen die JavaScript-Bibliotheken von Application Express Ihnen fast die ganze Arbeit ab. Tragen Sie den folgenden Code als Regionsquelle in die Region mit der Auswahlliste ein.

<script language="JavaScript1.1" type="text/javascript">
<!--
 function getReport(p_deptno){ 
 var l_Return = null;
 var l_deptno = html_GetElement(p_deptno).value;
 
 var get = new htmldb_Get(
 'REPORTHOLDER'
 ,html_GetElement('pFlowId').value
 ,null
 ,'1000'
 );
 get.add('P1000_DEPTNO', l_deptno);
 get.get();
 }
//-->
</script>

Die Funktion htmldb_Get() übernimmt die ganze Arbeit. Die übergebenen Parameter haben folgende Bedeutung:

• Der erste Parameter ist die ID des HTML DB-Elements, in welches der Bericht eingehangen werden soll. Beim Anlegen der Region haben Sie REPORTHOLDER verwendet (Abbildung 2)
• Der zweite Parameter enthält die Anwendungs-ID.
• Der dritte Parameter kann einen REQUEST enthalten - in den vergangenen beiden Ausgaben wurde dieser Parameter verwendet, um einen der vorher erstellten Anwendungsprozesse aufzurufen. In diesem Beispiel bleibt er leer ...
• Der vierte Parameter enthält die Seite, die per AJAX aufgerufen werden soll. Dies ist die soeben angelegte Seite 1000.

Im nächsten Schritt wird die DEPTNO der in der Auswahlliste ausgewählten Abteilung als Parameter (P1000_DEPTNO) übergeben, danach wird die JavaScript-Funktion aufgerufen. Hinterlegen Sie diesen JavaScript-Code nun entweder in der Seiten- oder in der Regionsdefinition. In diesem Beispiel wird der Regions-Header verwendet. Wenn Sie mit Cut & Paste arbeiten, achten Sie darauf, dass alle Zeilenumbrüche richtig übernommen werden. JavaScript ist recht empfindlich; wenn manche Zeilenumbrüche nicht vorhanden sind. 

Zum Schluß müssen Sie dafür sorgen, dass der JavaScript-Code ausgeführt wird, sobald in der Auswahlliste eine Änderung stattfindet (onChange). Navigieren Sie also zur Definition der Auswahlliste (P5_DEPTNO) und tragen Sie unter HTML-Form-Elementoptionen folgendes ein:

onChange="javascript:getReport('P5_DEPTNO');"

Nun können Sie sich das Ergebnis ansehen. Starten Sie die Seite und wählen Sie eine Abteilung aus ...

Abb.5: Das aktive Formular: Einfügen eines neuen Mitarbeiters (Fehler)

Dieses Ergebnis stellt noch nicht so recht zufrieden ... Zwar wird der Bericht richtig dargestellt, der ganze Rest der Seite jedoch auch. Benötigt wird jedoch nur der Bericht, der Rest sollte gar nicht dargestellt werden. Dies lässt sich jedoch sehr einfach erreichen. Navigieren Sie wieder zur Seite 1000 und dort zur Regionsdefinition Ihres Berichts.

Abb.5: Das aktive Formular: Einfügen eines neuen Mitarbeiters (Fehler)

Tragen Sie die in Abbildung 5 gezeigten HTML-Kommentare in den Regions-Header bzw. den Regions-Footer ein. Wenn Seite per AJAX abgerufen und in die Seite 5 integriert wird, berücksichtigt die JavaScript-Funktion htmldb_Get() nur die Inhalte zwischen <!--START--> und <!--END-->. Starten Sie die Seite 5 anschließend nochmals neu ...

Abb.5: Das aktive Formular: Einfügen eines neuen Mitarbeiters (Fehler)

Nun wird der Bericht richtig in die HTML-Seite integriert. Sobald Sie in der Auswahlliste ein Änderung vornehmen, wird der Bericht aktualisiert, wobei nur die Region mit dem Bericht wirklich neu geladen wird. Das Blättern im Bericht sollten Sie abschalten; ein Klick darauf würde auf die Seite 1000 verweisen, was sicherlich nicht gewünscht ist. Diese Technik lässt sich auf alle Application Express-Regionen anwenden, also auch auf Formulare, Diagramme oder Kalender.

AJAX bietet Ihnen vor allem dann Vorteile, wenn Ihre Anwendungsseiten sehr viele Komponenten enthalten (Formulare, Berichte, etc). In diesen Fällen kann es durchaus Sinn machen, nur die wirklich benötigten Teile neu laden zu müssen. Wenn die Seite (wie in diesem Beispiel) nur einen einzigen Bericht enthält, ist es durchaus legitim, den herkömmlichen Weg (erneutes Laden der ganzen Seite) zu verwenden.

Zurück zur Community-Seite