Zend Framework + AJAX

von Sven Finke am 12. Mai 2009

Lesetipps

Ich werde euch heute mal anhand eines kleinen Beispiels zeigen, wie man das Zend Framework und AJAX schnell und einfach verbinden kann. Ich habe dazu das ZF in der Version 1.7 und das Javascript Framework jQuery in der Version 1.3.2 verwendet.Ich gehe einmal davon aus das Grundkenntnisse im ZF vorhanden sind, falls nicht gibt es schon genügend Tutorials im Internet und eine sehr gelungene Doku von Zend selbst. Da jQuery alles andere als kompliziert ist, aber dabei trotzdem wirklich viele Möglichkeiten bietet, werde ich kurz einige Basisfunktionen und die Handhabung erklären, der Rest kann ebenfalls in der übersichtlichen und einfachen Doku nachgelesen werden.

ZF

Okay, kommen wir einmal zum ZF. In meinem Beispiel werde ich zwei Controller verwenden. Der erste dient zur Darstellung einer div-box und der zweite gibt einen kleinen Text aus. Nichts besonderes eigentlich. Ich gehe einfach mal davon aus das bereits ein Projektverzeichnis mit dem ZF eingerichtet und eine bootstrapper Datei erstellt wurde.
Der erste Controller ist der Controller show. Hier finden wir eine leere showAction die selbst nichts tut, sondern lediglich den view öffnet. In dem View befindet sich dann der Grundaufbau einer HTML Seite.

showController.php

<?php

class showController extends Zend_Controller_Action
{
  function showAction()
  {
    // Ruft automatisch den View "show" auf
  }
}

show.phtml

<html>
  <head>
    <title>Beispiel</title>
  </head>
  <body>
    <div id="textBox"></div>
  </body>
</html>

Der zweite Controller gibt lediglich einen Text aus. Ich nenne ihn einfach mal “output”. Das ganze werde ich ohne eine View erledigen, dass ist für einen kleinen Einzeiler einfacher.

outputController.php

<?php
class outputController extends Zend_Controller_Action
{
  function outputAction()
  {
    $this->_helper-> viewRenderer-> setNoRender();
    echo "Das ist meine Ausgabe!";
  }
}

Das ist auch schon alles was ich vom ZF benötige. Wir werde später noch Änderungen in der View der showAction machen, damit wir jQuery laden und den Text laden können.

jQuery

jQuery ist meiner Meinung nach ein wirklich erstaunliches Framework. Ich habe vom allgemeinen Funktionsumfang noch keinen direkten Vergleich mit Scriptaculous bzw. Prototype oder MooTools gemacht, aber ich vermute mal das jQuery im allgemeinen eher weniger Funktionen enthält. Was aber wirklich toll an dem Framework ist, ist der Zugriff auf die HTML Elemente. So kann man mithilfe von jQuery so ziemlich jeden CSS Ausdruck zum auswählen eines oder mehrerer Elemente nutzen um Eigenschaften zuzuweisen o.Ä. So ist z.B. eine Abfrage aller input Felder vom Typ Text so möglich:

var elem = $("input ['type=text']");

So wird das lästige “document.getElementBy…” ersetzt und extrem vereinfacht. Ein weiterer Punkt, und den werden wir jetzt auch nutzen, ist die Vereinfachung eines “AJAX Requests”. jQuery bietet dabei verschiedenste Möglichkeiten. Ich werde heute einmal $.post verwenden. Hier dazu die komplette Funktion die benötigt wird um ein AJAX Request abzufeuern und das Ergebnis – den Text – in die div zu schreiben:

function getText()
{
  $.post("output/output",
  function(response) {
    $("#textBox").text(response);
  },
  "text"
  );
}

Diese Funktion muss nun nur noch über ein Link aufgerufen werden. Mitsamt der Einbindung der Funktion, der jQuery Datei und des Links sieht die show View dann so aus:

show.phtml

<html>
<head>
  <title>Beispiel</title>
  <script src="jQuery.js" type="text/javascript" />
  <script type="text/javascript">
    function getText()
    {
      $.post("output/output",
           function(response) {
      $("#textBox").text(response);
    },
    "text"
    );
  }
  </script>
</head>
<body>
  <div id="textBox"></div><br />
  <a onclick="getText();">loadText</a>
</body>
</html>

So, das wars dann auch schon. Auf diesem Wege kann man dann auch über das ZF Daten aus einer Datenbank abrufen, Daten speichern oder in jeglicher Art weiterverarbeiten. Ich hoffe das ich das ganze relativ verständlich erklärt habe und freue mich über eure Kommentare

Sven Finke

Zum Profil von Sven Finke

17 Kommentare »

Nils Langner
am 12. Mai 2009 um 08:54 Uhr

@sven: Schon mal vielen Dank für deinen Artikel.
Walter S.
am 12. Mai 2009 um 09:08 Uhr

“echo” im Controller – wer macht denn soetwas?!
Alter “onclick”-Mist? Das geht aber mit jQuery viel besser: (z.B.)

HTML: loadText
JS: $(‘loadButton’).click(function() { getText(); });

Mische NIEMALS JavaScript und HTML!!!
uli
am 12. Mai 2009 um 09:36 Uhr

Da stimme ich Walter S. zu. Zum Controller seh ich es ja des Beispiels wegen noch ein, solange man noch einen Hinweis darauf gibt. Den JS Anteil sollte man allerdings gleich im Beispiel trennen, so wie bsp.weise W.S. gesagt hat.
Balu
am 12. Mai 2009 um 09:55 Uhr

Ich suche ja immer noch nach einem ordentlichen Tutorial mit Beispielen für Dojo – wo das doch jetzt Teil des ZF ist…
Nils Langner
am 12. Mai 2009 um 10:03 Uhr

@Balu: Ich werde mal Ralf Eggert anhauen, der kann das Thema bestimmt anreißen. Ansonsten steht in seinem Buch glaube ich einiges darüber.
Balu
am 12. Mai 2009 um 10:22 Uhr

@Nils So weit bin ich in Ralfs Buch noch nicht
Nils Langner
am 12. Mai 2009 um 10:29 Uhr

@balu: Wenn ich ehrlich bin, ich auch nicht. Muss mich zur Zeit in Symfony einarbeiten, das reicht erstmal für den Monat Mai
Tobias
am 12. Mai 2009 um 10:36 Uhr

Wie wäre es in dem View den JSON-Helper zu nutzen, Nils?
Nils Langner
am 12. Mai 2009 um 10:48 Uhr

@Tobias: Leider habe ich keine Ahnung was ein JSON Helper ist Der Artikel ist ja auch gar nicht von mir, deswegen halte ich mich da auch mal raus. Getreu nach dem Motto: “Wer keine Ahnung hat, sollte einfach mal die Klappe halten.” Passt in dem Punkt ganz gut auf mich zu.
L*Faust
am 12. Mai 2009 um 17:42 Uhr

Zum setzen der $.POST url würd ich den URL-Helper des ZF nehmen. OutputController schreibt man groß.

Ans Volk:
Schalte ich mit setNoRender auch autom. das Layout aus?
Dennis Becker
am 13. Mai 2009 um 12:02 Uhr

@L*Faust: Nein!
Das geht wie folgt:
$this->getHelper(‘layout’)->disableLayout();
Bartek
am 13. Mai 2009 um 13:32 Uhr

Finde ein echo im Controller jetzt nicht so wild. Wozu noch umständlich ein template laden wenn man im endeffekt sowieso z.B. nur eine json ausgabe will…

echo json_encode($meine_date) und gut ist. da noch extra ein template nutzen ist einfach nur sinnlose ressourcenverschwendung…
Nils Langner
am 13. Mai 2009 um 13:35 Uhr

@Bartek: Was echo im Controller angeht, da hast du das Problem, dass du diesen Controller nicht für andere Zwecke verwenden kannst (etwas z.B. zu dekorieren, dass einen Output hat, ist wirklich kein Spass). Und ausserdem verletzt du damit eine der wichtigsten Grundregeln: Trennung zwischen View und Controller. Ich tippe mal drauf, dass sich jedes “echo” einmal rächen wird.
Bartek
am 13. Mai 2009 um 15:56 Uhr

Ok, da hast du durchaus recht. An den Fall habe ich jetzt garnicht gedacht. Ich dekoriere aber auch so selten mal einen Controller…
Sven Finke
am 14. Mai 2009 um 08:18 Uhr

Okay, da kam jetz ja einiges an Kritik^^

Erstmal zu dem Javascript:

Da es nur ein kleines Beispiel sein sollte wollte ich die eine Javascript Funktion nicht extra in eine neue Datei auslagern. In der späteren Anwendung sollte man das natürlich machen.

Zu dem echo:

Ich hätte das ganze natürlich in ein View auslagern können bzw. sollen. Aber für einen kleinen Satz wollte ich nicht extra eine neue View anlegen. Aber ihr habt vollkommen recht, Ausgaben in einem Controller zu machen ist nicht gerade die feine englische Art…

Trotzdem erstmal Danke für die Kommentare!

Gruß, Sven
Thorsten Ruf
am 1. Juni 2009 um 22:20 Uhr

Hallo,

es gab ja schon einige Verbesserungsvorschläge zu deinem Artikel. Ich möchte noch einige Punkte hinzufügen:

1. Würde ich nicht extra einen zweiten Controller, nur für die Ajax aufrufe erstellen. Du läufst so zu sehr gefahr, dass du die Actions aus mehrern Controller, schlimmer noch, aus mehreren Modulen wiederverwendest. Wiederverwendbarkeit ist doch nichts schlechtes, stimmts? Richtig, aber an der falschen Stelle eingesetzt schon. Statt dessen lege ich die Ajax Actions direkt dort ab wo sie auch gebraucht werden; im aktuelle Controller.

2. Verwendung des Context Switch Helpers. (siehe http://framework.zend.com/manual/de/zend.controller.actionhelpers.html#zend.controller.actionhelpers.contextswitch.ajaxcontext)

3. Verwendung einer View. Das wurde schon mehrfach gesagt, macht aber mit dem Action Helper gleich sichtbar sinn. Die Views werden nämlich unterschiedlich benannt. z.B. show.ajax.phtml oder show.json.phtml. In der Methode showAction rufst du das Model auf welches dir die gewünschten Daten zur Ausgabe besorgt, der Controller reicht dies weiter an die View (die ja, je nach Context unterschiedlich ist) und erst dort geschieht die Aufbereitung zur Darstellung im entsprechenden Format. z.B. die Konvertierung in das JSON Format.

Nicht entmutigen lassen und gleich Korrekturen nachreichen. Nur so wird man besser.

Grüße,
Thorsten
Alex
am 26. Februar 2010 um 12:19 Uhr

Um AJAX auszugeben ist folgendes m.E. am einfachsten:

public function newsAction()
{
$this->_helper->contextSwitch()->initContext(‘json’);
$this->view->news = array(‘today’ => ‘nothing new’);
}

Ein Viewscript wird nicht mehr benötigt – der contextSwitch ActionHelper gibt einfach alles in $this->view als JSON aus.

Alexander

RSS Feed für Kommentare zu diesem Artikel. TrackBack URL

Zend Framework + AJAX

Lesetipps

17 Kommentare »

Hinterlasse einen Kommentar

Werbung

Inhalt

Soziale Netze

Co-Autor werden