Faddie bloggt – schon wieder!

Dojo Tutorial mit Grid – Teil 2: Ajax und JSON

So, nach geringfügiger Schaffenspause geht’s weiter mit dem Dojo-Tutorial.

3.2 Step-2 Html-Formular erstellen

Schauen wir uns doch einfach mal etwas Code an:

<form name="form_suche"
 id="form_suche"
 action="gridtut_request.php"
 method="post"><input type="text" name="txt_name"  id="txt_name"
 value=""
        dojoType="dijit.form.TextBox"
        trim="true"
        propercase="true" />
<input type="submit" id="finden" value="Finden!" />
</form>
<br />
<div id="gridContainer" class="gridDiv"></div>

Wie mal leicht sehen kann, machen wir’s uns leicht und bauen nur ein Suchfeld und einen Such-Button ein. Doch zuerst das Form-Tag.

Eigentlich sieht alles so aus, wie bisher. Das ist auch gut so, damit lässt sich die Seite auch ohne Javascript bedienen. Wir verwenden die typischen HTML-Elemente <form> und <input>. Diese werden beim Aufrufen der Webseite vom Dojo-Parser gelesen und die Eigenschaft “dojoType” (Groß- und Kleinschreibung!), hier fett markiert, entscheidet, was für Elemente tatsächlich angezeigt werden. In der Dojo-Nomenklatur heißen diese Elemente übrigens Dijits (Dojo Widgets). Über Widgets im genaueren können wir vielleicht in ein paar Wochen sprechen… mal sehen

Daher könnte man anstelle von <input> auch <div> oder <span> benutzen, da der Parser das Element ohnehin neu in die Seite einbaut. Übrigens wäre der Seitenaufbau wesentlich schneller, wenn man die Dijits direkt per Javascript erstellt – nur könnte man mit abgeschalteten Javascript nichts mehr erkennen. Auch Suchmaschinen finden dann kaum etwas auf der Seite.

Genug der Abschweifung hinter dem Formular ist noch ein <div>-Container eingebaut, der als Platzhalter für das spätere Grid fungieren soll.

HTML-seitig sind wir jetzt schier, daher folgt jetzt der nächste Schritt in Javascript.

Step-2 zum Runterladen: Gridtut-2

3.3 Step-3 Erstes Javascript

Bislang gibt unser Tutorial noch ein enttäuschendes Bild ab. In der Datei gridtut.js befindet sich nur gähnende Leere. Dabei haben wir in der Html-Datei doch schon auf die Funktion “init” verwiesen – und somit einen Fehler provoziert. Das wird jetzt geändert!

// Erste Funktion, die aufgerufen wird
function init() {
 suchbutton = dojo.byId("finden");
 suchbuttonConnection = dojo.connect(suchbutton, 'onclick', null, mein_submit);
}function mein_submit(event) {
 dojo.stopEvent(event);
 alert('Huhu!');
}

Die Funktion “init()” wird von Dojo aufgerufen, sobald der Parser fertig ist, die HTML-Seite einzulesen. Je mehr Code übrigens auf der HTML-Seite, desto länger braucht auch der Parser.

Wir verwenden nun die init-Funktion, um den Submit-Vorgang vom Formular gegen eine eigene Funktion zu ersetzen. Dojo arbeitet übrigens gerne mit den IDs der Elemente, nicht mit den Namen.

Mit dojo.connect verbinden wir den Suchbutton mit dem Browser-Ereignis onclick und geben als letzten Parameter die Funktion an, die tatsächlich ausgeführt werden soll

Die Anweisung “dojo.stopEvent(event)” verhindert den Submit, der sonst durchgeführt worden wäre. Damit das auch funktioniert, muss in den Funktionskopf ein Parameter eingebaut werden – hier “event” genannt.

dojo.connect übergibt diesen Parameter dann an die aufgeführte Funktion ohne unser zutun.

Wenn jetzt alles klappt, erscheint statt des Submits die Nachricht “Huhu!”.

Step-3 zum Runterladen: Gridtut-3

3.4 Step-4 Ajax kommt ins Spiel.

Natürlich wollen wir noch ein wenig mehr. Auf Dojo sind wir ja vor allem wegen dem Ajax-Hype gekommen, also machen wir das auch so

function mein_submit (event) {
  dojo.stopEvent(event);
  var kw = {
    url: "gridtut_request.php",
    load: function(data){
   var ergebnis = eval('('+data+')');
  	  alert ("Da ist was gekommen: " + data);
    },
    error: function(data){
   alert("Es ist ein Fehler aufgetreten: " + data);
    },
    form: "form_suche"
  };
  dojo.xhrPost(kw);
}

Das sieht jetzt gewaltiger aus, als es ist.

KW ist erstmal nur eine Abkürzung für keywords und völlig frei gewählt. Da man bei Dojo den Funktionen auch Javascript-Objekte übergeben kann, anstelle alle Parameter einzeln an die Funktion zu reichen, ist das ganz bequem. Mit “kw” bestimmen wir also die Parameter für “dojo.xhrPost”.

URL:
Bei “url” geben wir unsere dynamische Web-Datei an, das kann auch gerne .jsp oder .asp sein – ich werde den php-Teil möglichst gering halten.

LOAD:
Hier geben wir eine Funktion an, aufgerufen werden soll, wenn uns der Webserver einen JSON-String geliefert hat. Aus Faulheit habe ich hier eine anonyme Funktion verwendet, man kann ebenso auf eine Funktion verweisen, die irgendwo tiefer im Quelltext verborgen ist (das wäre vom Stil her auch besser). In dem Parameter “data” ist die Rückgabe vom Webserver enthalten

ERROR:
Eigentlich wie bei load, wenn der Webserver wider erwartend einen Fehler sendet, wird diese Funktion aufgerufen

FORM:
Das Formular, dessen Inhalte an den Server geschickt werden soll (wird mit der ID benannt)

Den ganzen Wust geben wir jetzt an die Funktion als Parameter: dojo.xhrPost(kw)

Damit haben wir jetzt sehr umständlich das erreicht, was pures HTML auch so für uns getan hätte
Allerdings nicht asynchron und ohne die Möglichkeit der Fehlerbehandlung.

Step-4 zum Runterladen: Gridtut-4

3.5 PHP – Generieren von JSON

Für alle PHP-Freunde habe ich hier ein wenig Code, der für uns den JSON String erzeugen soll.

JSON bedeutet übrigens Javascript Object Notation und ist eine Möglichkeit neben XML, Daten zwischen Client und Server auszutauschen. Eigentlich handelt es sich bei JSON nur um ein Stück Javascript-Code, der, wenn er ausgeführt wird, ein Array erzeugt. Also machen wir aus unserem PHP-Array einen Bauplan für ein Javascript Array. Wichtig übrigens: Der String wird per “echo” ausgegeben, bzw. als Textausgabe an den Client geschickt.

<?php
	// Ein paar Daten
	$data = array ();
	$data[] = array ('lfdnr' =>1,
					 'nname' =>'Petersen',
					 'vname' =>'Klaus',
					 'beruf' =>'Polizist',
					 'alter' =>32);
	$data[] = array ('lfdnr' =>2,
					 'nname' =>'Petersen',
					 'vname' =>'Elvis',
					 'beruf' =>'Hundefänger',
					 'alter' =>25);
	$data[] = array ('lfdnr' =>3,
					 'nname' =>'Petersen',
					 'vname' =>'Rudi',
					 'beruf' =>'Fotograf',
					 'alter' =>52);
	$data[] = array ('lfdnr' =>4,
					 'nname' =>'Petersen',
					 'vname' =>'Jörg',
					 'beruf' =>'Deichgraf',
					 'alter' =>61);
	$data[] = array ('lfdnr' =>5,
					 'nname' =>'Schröder',
					 'vname' =>'Petra',
					 'beruf' =>'Bäckerin',
					 'alter' =>31);
	$data[] = array ('lfdnr' =>6,
					 'nname' =>'Schröder',
					 'vname' =>'Elvira',
					 'beruf' =>'Fleischerei-Fachverkäuferin',
					 'alter' =>23);
	$data[] = array ('lfdnr' =>7,
					 'nname' =>'Schröder',
					 'vname' =>'Martin',
					 'beruf' =>'Koch',
					 'alter' =>37);
	// Das zukünftige Ergebnis
	$ergebnis = false;
        // Array-Zähler, sonst ist die JSON-Funktion überfordert,
	// wenn man nicht von 0 an durchzählt.
	$counter = 0;
// Hauptteil
if (!empty($_REQUEST['txt_name'])) {
	// Suche nach dem Namen im Testdatensatz
	foreach ($data as $zeile => $wert) {
		if ($wert['nname'] == $_REQUEST['txt_name']){

			// Erster Sucherfolg
			if (!$ergebnis) $ergebnis = array();

			// Suchergebnis ins Array schieben
			$ergebnis[$counter]['lfdnr'] = $data[$zeile]['lfdnr'];
			$ergebnis[$counter]['nname'] = htmlentities($data[$zeile]['nname']);
			$ergebnis[$counter]['vname'] = htmlentities($data[$zeile]['vname']);
			$ergebnis[$counter]['beruf'] = htmlentities($data[$zeile]['beruf']);
			$ergebnis[$counter]['alter'] = $data[$zeile]['alter'];
			$counter++;
		}
	}
	// Wenn nichts gefunden wurde, leeres Ergebnis
	if (!$ergebnis) $ergebnis[] = array ('lfdnr' =>0,
										'nname'=>'Kein',
										'vname'=>'Ergebnis',
										'beruf' =>' ',
										'alter' =>0);
	// Das Array für das Dojo-Grid aufbereiten
	$temp = Array ('identifier'=>'lfdnr', 'items'=>$ergebnis);
	echo json_encode($temp);
}
?>

Es wird also nach einen Nachnamen gesucht und das Ergebnis per JSON ausgegeben. Je nach Serversprache kann das natürlich anders aussehen.

Wichtig übrigens: Die JSON-Funktion von PHP kann keine Umlaute umwandeln, daher konvertiere ich alles in HTML-Schreibweise (also ä ; usw.) Eigentlich sollte man alles in UTF-8 konvertieren, damit kommt Dojo am besten zurecht. Aber wer hat schon UTF-8 in vorhandenen Projekten.
Wenn man neu anfängt, ist man UTF-8 auf jeden Fall gut beraten.

Wer gerade keinen Webserver zur Verfügung hat, der kann auch erstmal eine Textdatei nehmen und bei “URL” auf diese verweisen.

Hier ist die Textdatei mit JSON-String für die Suche nach Petersen

JSON-Text

Step 5 findet damit sein Ende…
Step-5 zum Runterladen: Gridtut-5