Alexander Stelter – foo, bar, baz

Heute möchte ich ein interessantes Framework vorstellen, welches die Entwicklung mit JavaScript extrem vereinfacht und dem Entwickler (größtenteils Cross-Browser) viele Dinge vereinfacht. Hierbei handelt es sich um Prototype. Entstanden ist es ursprünglich aus dem Framework Ruby on Rails.

Als Beispiel nehmen wir ein Formular, welches eine Anfrage via AJAX an den Server schickt und die Antwort des Servers wieder in das Script zurückholt. Hierzu verwenden wir die eingebettete JSON-Funktionalität. Hierbei sei zu beachten, dass Prototype auf einem JSON-Objekt auch nur mit eval() operiert. Hier besteht also bei Produktivanwendungen noch Prüfungsbedarf. Mit Prototype kann man auf jeden Fall vor der Ausgabe Script-, HTML-Tags etc. entfernen lassen, wenn man das möchte. Das schützt allerdings nicht vor dem Angriff durch JavaScript, welches sich in der Response des Servers befindet und direkt ausgeführt werden könnte.
JSON kann bei Prototype via Header und “normaler” Übergabe übertragen werden. Bei der Übergabe per Header muss der X-JSON-Header gesendet werden. Bei größeren Datenmengen empfielt sich jedoch wieder das echo. Dies wird von Prototype erkannt, wenn der Content-Type text/javascript ist. Ich stelle hier die Lösung mit X-JSON-Header vor. Wichtig ist hier wieder, dass die JSON-Extention[3] für PHP installiert ist, bzw. eincompiliert[2] ist.

Beginnen wir also mit dem AJAX-Beispiel. Vorrausgesetzt ist hier, dass die Datei prototype.js korrekt im Header der HTML-Seite eingebunden ist, ich denke das muss ich nicht erklären . Für die eigenen Funktion verwende ich eine weitere JavaScript-Datei article-prototype.js. Falls das doch jemandem nicht ganz klar sein sollte, verweise ich jetzt mal frech auf selfhtml[4]. Ich verwende hier auch Inline-JavaScript, was ich eigentlich mittels Behaviours verstecken würde, aber das wird evtl. Thema eines neuen Artikels sein .

Zunächst basteln wir uns eine HTML-Seite, die eine FORM enthält, in der man mittels einer Selectbox einen oder alle Datensätze wählen kann:

<h2>Daten wählen</h2>
 
<form action="#" method="post">
	<label for="datensatz">Datensätze ausgeben</label>
<select id="datensatz" name="datensatz">
		<option value="0">Alle Datensätze</option>
		<option value="1">Datensatz 1</option>
		<option value="2">Datensatz 2</option>
		<option value="3">Datensatz 3</option>
		<option value="4">Datensatz 4</option>
		<option value="5">Datensatz 5</option>
	</select>
<input onclick="RequestData();" type="button" value="Daten abholen" />
</form>
 
<h2>Ausgabe</h2>
 
 
<div id="output">Keine Daten ausgewählt</div>

Jetzt legen wir eine Funktion an, die unseren AJAX-Aufruf beherbergt:

var RequestData = function ()
{
   new Ajax.Request
   (
      '/test/prototype-server.php',
	{
	   method:'post',
	   parameters: { datensatz: parseInt($('datensatz').value) },
	   onSuccess: function(transport, json)
	   {
		handleSuccess(json);
	   },
		onFailure: function()
		{
			handleFailure();
		}
	}
   );
}

Wir haben jetzt eine Funktion, die ein AJAX-Objekt angelegt und die Methode POST verwendet, implementiert. Über parameters: kann man die einzelnen Parameter angeben, die man an den Request übergeben will. Hier verwende ich die von Prototype implementierte Kuzform für document.getElementById(‘datensatz’) ($(‘id-name’)). Möchte man eine komplette Form übergeben, bietet Prototype eine Serialisierung der Daten:

$('id_of_form_element').serialize(true)

Als nächstes definieren wir die vorgegebenen Funktionen onSuccess und onFailure. Verwendet man JSON, werden zwei Variablen an onSuccess übergeben, die zweite enthält dann die Response-Daten als JSON-Objekt. Die Bedeutung der Funktionen sollte selbsterklärend sein. Der Übersicht halber machen diese Funktionen nichts anderes, als eine andere Funktion aufzurufen. Die Fehler-Funktion ist hier recht unspektakulär und wird nur aufgerufen, wenn ein Timeout beim Request eintritt:

var handleFailure = function()
{
   alert('Ein Problem ist aufgetreten, die Daten konnten nicht abgeholt werden');
}

Jetzt geben wir einfach die abgeholten Daten aus. Hierzu leeren wir zunächst den Content-Container. Danach laufen wir mit einer Schleife durch das Result:

var handleSuccess = function(response)
{
	$('output').innerHTML = '';
 
	for(i = 0; i < response.length; i++)
	{
		$('output').innerHTML += i+1;
		$('output').innerHTML += ' => '
		$('output').innerHTML += response[i];
		$('output').innerHTML += '';
	}
}

Danach können wir unsere Ausgabe bestaunen . Der Server dazu sieht übrigens so aus:

$AryData = new ArrayObject ( array( 'PHP','Perl', 'Python', 'C++' , 'C#') );
 
if((int)$_POST['datensatz'] == 0)
{
	$Output = $AryData;
}
else
{
	$Output = $AryData [ (int)$_POST['datensatz'] – 1];
}
 
header('X-JSON: '.json_encode((array) $Output));

Das Ganze ist beliebig erweiterbar und auf jeden Fall recht mächtig. Prototype nimmt einem an vielen Stellen eine Menge Arbeit ab und es läuft großteils auch alles in fast allen gängigen Browsern . Das war natürlich nur ein Feature von vielen, die Prototype bietet, mehr findet man auch auf der Webseite[1].

Bei Fragen, Problemen etc. einfach einen Kommentar hinterlassen . Die Sourcen versende ich auf Anfrage. Interessenten können auch gerne einen Kommentar hinterlassen; ist vielleicht weniger Arbeit, als alles hier rauszukopieren.

Links
[1] http://www.prototypejs.org
[2] http://de.php.net/json
[3] http://pecl.php.net/package/json
[4] http://de.selfhtml.org

written by Alexander \\ tags: ajax, Javascript, prototype, web 2.0