Anzeige
Anzeige
UX & Design
Artikel merken

Perl-Webanwendungen mit Ajax: Ajax bringt Glanz auf Perlen

Auf einer dynamischen Website darf Ajax nicht fehlen. Auch in Perl, dem Urgestein der Websprachen, gibt es Webanwendungen mit Ajax-Funktionalitäten. Auf CPAN, dem Online-Archiv für Perl-Module, Anwendungen und Dokumentationen, findet sich unter Tausenden von Modulen auch einiges für den Webentwickler.

5 Min. Lesezeit
Anzeige
Anzeige

Seit ein paar altbekannte Technologien zusammengefasst und unter dem Schlagwort „Ajax“ verbreitet werden, ist ein wahrer Hype entstanden. Spätestens mit Google Maps ist der Durchbruch vollends gelungen. Kaum eine große Website, egal ob Flickr oder Xing, verzichtet auf die Möglichkeit, Daten vom Server nachzuladen, ohne die komplette Seite neu laden zu müssen.

Anzeige
Anzeige

Viele dynamische Websites werden mit Perl realisiert – vom einfachen Formmailer bis hin zu del.icio.us oder imdb.com. Auch auf diesen Seiten kommen Ajax-Technologien zum Einsatz. Auf CPAN [1] finden Perl-Programmierer Unterstützung für die Implementierung von Ajax-Funktionen.

CGI::Ajax

Das Modul CGI::Ajax übernimmt wichtige Aufgaben: Es sorgt dafür, dass JavaScript-Funktionen auf Funktionen im Perl-Skript gemappt werden.

Anzeige
Anzeige
PERL
my $ajax = CGI::Ajax->new( JSFunktion => \&perl_function);

Listing 1

Der Programmierer muss dazu keine Zeile JavaScript schreiben und sich auch nicht um die Ausgabe des HTML-Codes kümmern. Die HTML-Ausgabe wird wie gewohnt generiert und dann einem Objekt von CGI::Ajax übergeben.

Anzeige
Anzeige

Nur für den Auslöser der JS-Funktionen muss ein JavaScript erstellt werden. Im Template sollte ein Link etwa so aussehen:

HTML
<a xhref="..." onclick="JSFunktion(['action__delete_task','id__1'],['task1']);">...</a>

Listing 2

Ein Klick auf diesen Link ruft die JavaScript-Funktion „JSFunktion“ auf. Der Funktion wird eine Liste mit Parametern übergeben, die als Parameter des GET-Requests an den Server weitergegeben werden. Das „__“ trennt den Parameter-Namen von seinem Wert. In diesem Fall wird zum Beispiel „action=delete_task&id=1“ an den Server übermittelt. So können beliebige Parameter übergeben werden. Die zweite Liste enthält die IDs von Elementen, die durch die Antwort des Servers modifiziert werden sollen. In diesem Fall gibt es ein <div> mit dem Namen „task1“, das die Antwort des Servers enthalten soll.

Anzeige
Anzeige

Einige Dinge gilt es zu beachten: Eingebaute JavaScript-Funktionen dürfen beispielsweise nicht verwendet werden. Das ist auch der Grund, warum im Beispiel die Funktion „delete_task“ anstatt „delete“ heißt. Darüber hinaus sollte man sich unter Windows nicht wundern, wenn in den URLs, die für den Request benutzt werden, bei längeren Skriptnamen so etwas wie „INDEX_~1.CGI“ als URL in der JavaScript-Funktion steht. Das liegt daran, dass Windows intern die Länge von Dateinamen auf 8 Zeichen kürzt.

Leicht irreführend ist auch die Meldung eines „Internal Server Error“ – in den Log-Dateien findet sich eine Meldung „POSSIBLE SECURITY INCIDENT!“ – nach dem Aufruf einer nicht-existenten Funktion des CGI-Skript durch den GET-Request des XMLHttpRequest-Objekts.

Auch bei der Verwendung von CGI::Application muss man aufpassen. Da die Perl-Subroutinen direkt ausgeführt werden, steht das Objekt von CGI::Application nicht zur Verfügung. Deshalb muss man auf Codereferenzen verzichten und stattdessen eine „externe“ URL angeben.

Anzeige
Anzeige
CGI::Ajax – Beispiel
#!/usr/bin/perl
use CGI;
use CGI::Ajax;
my $cgi = CGI->new();
my $ajax = CGI::Ajax->new(jsecho => \&perlecho);
print $ajax->build_html( $cgi, html() );  
sub perlecho{
	return @_;
}
sub html{
	return q~<html><body>
	<input type="text" id="echofield" onkeyup="jsecho(['echofield'],['test'])">
	<div id="test"></div>
	</body></html> ~;
}

Listing 3

Was geschieht hier? In den ersten drei Zeilen werden die benötigten Module geladen. Dann wird das Mapping realisiert: CGI::Ajax erzeugt eine JavaScript-Funktion „jsecho“, in der mit einem XMLHttpRequest-Objekt ein GET-Request aufgerufen wird. Die Funktion, die im CGI-Skript ausgeführt werden soll, heißt „perlecho“. Zeile sechs löst die Header und die HTML-Ausgabe aus. build_html erzeugt den JavaScript-Code, der in den Head-Bereich des HTML-Codes eingefügt wird. Im Input-Feld wird festgelegt, dass auf Tastendruck die Funktion „jsecho“ aufgerufen werden soll. Dabei wird der Wert des HTML-Elements mit der ID ‚echofield‘ an den Server übergeben. Das Ergebnis wird dann im HTML-Element mit der ID ‚test‘ dargestellt.

Das Modul ist sehr gut für relativ einfache Ajax-Anwendungen geeignet. Sobald es in andere Frameworks integriert werden soll, ist der „Spieltrieb“ des Entwicklers gefordert. Oft sind Lösungen im Internet zu finden, da andere sich schon mit den selben Problemen auseinandersetzen mussten.

HTML::Prototype

Prototype [2] ist ein sehr bekanntes Framework für Ajax. Auch hierfür gibt es auf CPAN ein entsprechendes Modul, das den Programmierer bei seiner Arbeit unterstützt. Mit HTML::Prototype kann das Schreiben von JavaScript komplett vermieden werden, was für JavaScript-Einsteiger sicherlich von Vorteil ist. Mit den folgenden Codezeilen wird die Prototype-Bibliothek ausgegeben:

Anzeige
Anzeige
PERL
print $prototype->define_javascript_functions;

Listing 4

Die meisten Methoden von HTML::Prototype liefern den JavaScript-Bereich für die Ajax-Funktionalität, während die HTML-Elemente im Template definiert werden müssen. Es gibt allerdings einige Ausnahmen: Funktionen, die einen JavaScript-Event-Handler verwenden (zum Beispiel link_to_remote), liefern das komplette HTML-Element mit dem zugehörigen JavaScript.

HTML::Prototype Beispiel
#!/usr/bin/perl -w
use CGI;
use HTML::Prototype;
my $cgi = CGI->new();
print $cgi->header();
my %params = $cgi->Vars;
if( $params{action} ){
	print $params{test};
}
else{
	my $field = $pt->observe_field('testid',{
		update => 'view',
		url    => 'html_prototype_test.cgi',
		with   => "'action=echo;test='+value",
		frequency => 1,
	});
	my $proto = $pt->define_javascript_functions;
	print qq~<html><head>$proto</head>
		<body><input type="text" id="testid">
		<div id="view"></div>
		$field</body></html>~;
}

Listing 5

Zunächst werden ein neues CGI-Objekt erzeugt, der Header ausgelesen und die Parameter geparst. Gibt es einen ‚action‘-Parameter, wird der Wert des Parameters ‚test‘ zurückgeliefert.

Nun folgt die Aktion, welche die Ajax-Funktionalität abfängt und auf der Seite darstellt. Dies geschieht über ein so genanntes „observe_field“ – ein Textfeld, das in gewissen Abständen (über „frequency“ einstellbar) die mit dem Parameter „url“ festgelegte URL aufruft. Der erste Parameter für das observe_field ist die ID des Textfeldes, dessen Inhalt überwacht werden soll. Was an die URL übergeben werden soll, wird über den Parameter „with“ festgelegt,

Anzeige
Anzeige

Die Prototype-Bibliothek wird in der Variable „$proto“ gespeichert. Für die HTML-Ausgabe wird das gesamte JavaScript in den head-Bereich des HTML geschrieben und die JavaScript-Funktion, die das Textfeld überwacht, in den <div>-Container unterhalb des Feldes eingesetzt.

Genauso übersichtlich und einfach sind alle weiteren Funktionen des Moduls nutzbar. Mittlerweile ist ein Großteil der Prototype-Funktionen im Modul umgesetzt.

Fallen von HTML::Prototype

Wenn Parameter an eine URL übergeben werden sollen (zum Beispiel http://localhost/script.cgi?action=test), muss bei den Optionen der Parameter „with“ eingestellt werden. Dabei ist darauf zu achten, dass der String, der im JavaScript ankommt, mit Quotes versehen ist. Deshalb sieht es zum Beispiel so aus:

Anzeige
Anzeige
PERL
with   => "'action=show_detail;id=$id'",

Listing 6

Mit diesem Modul kann man die Arbeit mit JavaScript auf ein absolutes Minimum reduzieren. Allerdings ist die Dokumentation an einigen Stellen sehr dürftig. Gerade für Anfänger ist es schwierig, alle Funktionalitäten zu nutzen – da hilft nur ausprobieren.

Fazit

Mit CGI::Ajax gibt es ein Modul, das für Ajax-Einsteiger sehr gut geeignet ist. Die Einbindung in Frameworks ist nicht optimal, aber mit ein paar kleinen Tricks gut machbar. Wer sich mit Ajax und der Prototype-Bibliothek auskennt, der wird sich mit HTML::Prototype anfreunden können. Die dürftige Dokumentation wird durch die umfangreiche Funktionalität wieder wettgemacht.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige