JavaScript Code mit Ajax On Demand

Es gibt zum Einbinden von JavaScript mehrere Möglichkeiten, diese sind (ohne Anspruch auf Vollständigkeit):

Hier geht es um Letztere, um die Voraussetzungen dazu und um beachtenswerte Dinge in dieser Hinsicht. Sicher hat so manche Variante ihre Vor- und Nachteile. Dieser kleine Artikel ist daher kein Dogma, sondern vielmehr ein Vorschlag zum Organisieren von JS-Bibliotheken.

Die Minimalbibliothek

Auf dieser Site als alibCore bezeichnet, wird diese in einem Scriptbereich im Kopf einer jeden HTML-Datei eingebunden und beinhaltet eine Funktion zum Erstellen eines XHR- bzw. ActiveXObjects sowie eine etwas umfangreichere Funktion für Ajax-Requests. Diese beiden Funktionen decken die Grundanforderungen ab, beispielsweise das Einbinden einer ajaxbasierten Erfassung der Seitenaufrufe. Insbesondere jedoch, ermöglicht alibCore das nun im Folgenden beschriebene Nachladen weiterer JS-Libraries (auf dieser Site ist das die sogenannte alib).

Speicherort auf dem Server

Der Code meiner alib ist in einem Perl-Modul Basic.pm abgelegt, welches bei jedem Seitenaufruf geladen wird. Innerhalb des Basic-Moduls gibt es eine Funktion alib(), welche im Export-Array notiert ist. Basic.pm selbst wird per Mod_Rewrite bei jedem Request über ein weiteres Script geladen, das Script show.cgi ist parametergesteuert und gibt mit dem entsprechenden Parameter die alib aus:

# Funktion im Script show.cgi
use Basic;
sub alib_load{
	print "Content-type: text/javascript\n\n";
	print alib(); # Funktion in Basic.pm zur Ausgabe der alib
}

Es gäbe jetzt schonmal die Möglichkeit, den externen JS-Code per src-Attribut einzubinden, das zeigt die alib als Text und funktioniert so:

	<script type="text/javascript" src="/cgi-bin/show.cgi?q=alib"> </script>

Betrachten wir nun jedoch die eigentliche Sache des Nachladen der alib, siehe untenstehenden Code:

<p id='test'></p>

<script type="text/javascript" id='alib'>/*kill me*/</script>

<script type="text/javascript">

	// Funktion verwendet eine Funktion der alib
	function main(){
		// Zeige Image in id='test'
		setImgNode('test', 128, 38, '/red2.gif', 'alt');
	}

	// alib anfordern und in obenstehenden Bereich einbinden
	var alib = {
		method: 'GET',
		url: "/cgi-bin/show.cgi",
		params: 'q=alib',
		callback: function(response){
			document.getElementById('alib').innerHTML = response;
			main();
		},
		load: function(){ ajaxRequest(this) },
	}
	alib.load();

</script>

Funktionsweise: Die erste Notiz für den Scriptbereich hat kein scr-Attribut sondern lediglich eine id='alib', das ist der Ort, wo die alib nach dem Laden hinkommt. Dieser Bereich dient einzig und allein der Bereitstellung einer Library (alib), wichtig ist, dass hierin nichts weiter notiert ist, denn das wird mit der Ajax-Response überschrieben.

Das Objekt alib{} erledigt den Request und den Einbau der Response, wobei die Grundfunktionen der bereits im Kopf der HTML-Datei geladenen alibCore verwendet werden. Dazu werden die erforderlichen Eigenschaften method, url, params festgelegt sowie die callback-Funktion und eine Funktion load(), welche den Request sendet. Mit den Eigenschaften params und url ergibt sich mit Methode GET der bereits weiter oben gezeigte Aufruf "/cgi-bin/show.cgi?q=alib".

Wesentlich und bemerkenswert ist, dass alle weiteren Funktionen bzw. JS-Code erst verwendet werden können, nachdem die Response im Browser angekommen ist. Zum Verdeutlichen dieses Sachverhalts gibt es die Funktion main(), die noch innerhalb der callback-Funktion notiert ist und auch nur von dort aus aufgerufen werden kann! Aus diesem Grund können auch alle weiteren Funktionen und JS-Code nur innerhalb der hier genannten main()-Funktion notiert werden, sofern diese Funktionen die alib verwenden.

Last-Modified: Tue, 22 Jun 2010 19:50:17 GMT