AJAX - einfaches Framework Prototype - Tutorial
Ajax. Ein Wort, welches durch die Medien geistert, doch sind viele noch nicht klar darüber informiert, was es genau ist. Mal wieder ein Buzzword: AJAX.
Hier ein ganz einfach Tutorial, wie das AJAX Framework prototype gebraucht werden kann.
Folgende Datei wird gebraucht: http://prototype.conio.net/dist/prototype-1.4.0.js
In unserer Index Datei importieren wir im header zuerst die prototype.js Datei:
<script type="text/javascript" src="prototype.js"></script>
Als nächstes fügen wir die folgende Funktion ein:
<script type="text/javascript">
function ajax(str){
var url = 'ajax.php';
var pars = 'msg='+str;
var target = 'zwei';
var myAjax = new Ajax.Updater(target, url, {method: 'get',parameters: pars});}
</script>
Mit dieser Funktion wird später Ajax aufgerufen. url ist die php Datei, welche auf dem Server liegt, pars sind die parameter, welche wir per GET übertragen werden. target zeigt auf das HTML Element mit der ID zwei. Dort wird die Ajax Anfrage später angezeigt werden. Schlussendlich in der letzten Zeile wird ein Ajax Objekt erstellt. Dies kommt direkt aus dem AJAX Prototype Framework.
Das wäre es dann eigentlich auch schon. Jetzt muss im Body einfach noch etwas stehen, was auf die Javascript Funktion verweist. Dies könnte so etwas sein:
<form>
<input type="text" name="in" onkeyup="ajax(this.value)">
</form>
<div id="zwei"></div>
Jedes Mal, wenn die Taste also losgelassen wird, wird die Funktion ajax() aufgerufen und es wird der Wert des Formularfeldes übergeben. Dieser wird dann in der Funktion ajax() and den Server weitergereicht, welcher es in ajax.php weiterverarbeitet.
Die Datei ajax.php könnte etwa folgt aussehen:
<?php
$msg = $_GET['msg'];
echo $msg."<br/>";
echo strlen($msg);
?>
Zuerst wird der Parameter msg ausgelesen und gespeichert. Danach wird ganz einfach der Parameter ausgegeben und zudem noch die Anzahl Zeichen.
Selbstverständlich liesse sich dies auch ohne Ajax realisieren. In der Datei ajax.php könnten jedoch Datenbankanfragen stehen oder was weiss ich auch immer.
Ajax Applikationen gibt es immer wie mehr:
Google Maps
Google Calendar
Google Mail
meebo
Flickr
Und natürlich noch eine grosse Anzahl von weiteren. Ajax wird sicher noch einige Internet Anwendungen vereinfachen. Ajax bringt eigentlich keine weitere Funktionalität aber eine grosse Portion beim Komfort! So muss jetzt endlich nicht mehr immer die ganze HTML Seite geladen werden, sondern nur der entsprechende Teil, was natürlich das Surfen sehr viel angenehmer macht und es auch möglich macht richtige Anwendungen Webbasierend zu machen.
Ich bin auf jeden Fall schon mal gespannt, was es noch so alles aus dem Bereich Ajax geben wird.
