Tag: ajax

FLOW3 – wie erstelle ich eine Ajax Action mit json Rückgabe?

Ganz einfach:

im Controller folgende Klassenvariable setzen:

protected $supportedFormats = array("html", "json");
	protected $viewFormatToObjectNameMap = array(
		"json" => "\TYPO3\FLOW3\MVC\View\JsonView",
		"html" => "\TYPO3\Fluid\View\TemplateView"
	);

und in der Routes.yml (bzw. im Routing) einen Eintrag nach folgendem Muster vornehmen:

-
  name: '[name_der_route]'
  uriPattern: '[gewünschter_pfad]'
  defaults:
    '@package':    '[package_name]'
    '@action':     '[action_im_controller]'
    '@controller': '[controller]'
    '@format':     'json'

Mit der Klassenvariable sorgt ihr dafür, dass der Controller beim Format “json” auf ein Template verzichtet und den Return-Value einer Action direkt ausgibt (also im Normalfall per json_encode() formatiert). Mit der Konfiguration der Route legt ihr nur noch fest, dass die jeweilige Action an Stelle von HTML lieber JSON verwendet.

[Update]
Nach der Frage von Mario hier nochmal als Nachtrag eine entsprechende Beispiel-Action:

/**
 *
 * @param string $param
 *
 * @return json test data
 */
public function getDataAction($param) {
	$data = array("testKey"=>$param, "testKey2"=>"testValue2");
	return json_encode($data);
}

Timeout Funktion für jQuery Ajax / JSONP Requests

Gestern stand ich vor dem Problem, dass ich bei einem jQuery Ajax Request mit JSONP einen Timeout einbauen wollte. Alles kein Problem – man muss einfach nur den Parameter “timeout” gefolgt von einem Millisekunden Wert beim Request-Zusammenbau angeben. Jedoch wollte ich auch eine Funktion einbauen, die dem User mitteilt, dass seine Anfrage vom Server nicht beantwortet werden konnte. Prinzipiell ist dies auch mit dem jQuery Ajax Call möglich, jedoch nicht, wenn man JSONP verwendet. Es gibt aber den Umweg der allgemeinen Ajax Konfiguration, mit der man trotzdem einen Timeout und auch eine Fehlerbehandlung implementieren kann.

Nachdem ich mir aus der jQuery Doku und vielen Forenbeiträgen die einzelnen Details zusammengetragen habe, möchte ich diese hier einfach mal in gebündelter Form loswerden:

$.ajaxSetup({
    timeout: 10000,
    "error":function(XMLHttpRequest,textStatus, errorThrown) {
        if(errorThrown == "timeout") {
            alert("Ups, wir haben einen Timeout...");
        }
    }
});

Dieses Stückchen Code ist eigentlich alles, was man dazu benötigt. Führt es einfach aus, bevor der erste Ajax Call abgesetzt wird. Doch gehen wir das einfach mal einzeln durch.

$.ajaxSetup

dient der allgemeinen Konfiguration von Ajax Calls. Man kann innerhalb von $.ajaxSetup jeden Parameter verwenden, der auch bei $.ajax verwendet werden kann. Setzt man Parameter mit $.ajaxSetup, so können diese immer innerhalb des eigentlichen $.ajax Calls überschrieben werden.

Mit

timeout: 10000

setzen wir einen Timeout von 10 Sekunden. Diesen Wert kann man bei jedem einzelnen Call auch nochmal extra überschreiben.

Und am Schluss implementieren wir mit

"error":function(XMLHttpRequest,textStatus, errorThrown) {
        if(errorThrown == "timeout") {
            alert("Ups, wir haben einen Timeout...");
        }

unsere Fehlerbehandlung. Die erstellte Methode fängt dabei alle Fehler, die bei einem Ajax Call entstehen, ab. Daher habe ich an dieser Stelle auch den if-Block eingebaut, der dediziert nur meinen Timeout Fehler abfängt. Weiter Fehlernamen sind: “error”, “abort”, und “parsererror”. Im XLMHttpRequest Objekt bekommt man das Request Objekt des Ajax Calls mitgeliefert und kann so herausfinden, um welchen Call es sich eigentlich handelt.

Durch die Verwendung von $.ajaxSetup haben wir zum einen das Timeout Verhalten von Ajax Calls an einer zentralen Stelle konfiguriert, zum andern haben wir über diesen Umweg auch die Funktionalität für JSONP Requests überhaupt erst ermöglicht.

[php] mit Firephp und Zend Framework Ajax debuggen

Webentwickler kennen Firebug – DAS Tool um Javascript und HTML/CSS zu debuggen. Natürlich zähle ich auch dazu und das Tool hat mir bereits viele Male geholfen. Neu war mir allerdings FirePHP, eine Erweiterung für Firebug. Wie der Name bereits sagt dient es dem Debugging von php, vor allem im Hinblick auf die Ajax Entwicklung.

Kann man sonst mit einfachen print_r, vardump und die() einfach durch eine Anwendung gehen – was sicher nicht die professionelste Lösung ist – so hat man diese Möglichkeit bei Ajax nicht, da es sich dabei ja um eine reine Kommunikation zwischen Javascript und dem php Backend handelt. Mittels FirePHP hat man aber nun die Möglichkeit, Nachrichten an Firebug zu senden und diese anzeigen zu lassen.

Neben der Möglichkeit des Ajax Debuggings ist das Tool auch sehr hilfreich, ohne störende print_r’s, vardump’s und die()’s Debug-Meldungen zu erhalten und somit z.B. nicht das Layout der Seite zu zerstören.

So, nun aber genug der Einführung, schauen wir uns das System doch einfach mal an…

Unter addons.mozilla.org bekommt ihr die Erweiterung FirePHP. Wichtig ist, das ihr vorher Firebug installiert habt.

FirePHP erkennt ihr nun an dem blauen Käfer neben dem Firebug Symbol:

Bevor die Zend-Applikation läuft, also am besten in der public/index.php oder der application/bootstrap.php, einfach folgende Zeilen implementieren:

$writer = new Zend_Log_Writer_Firebug();
$logger = new Zend_Log($writer);
Zend_Registry::set('debug_logger', $logger);

Damit wird der FirePHP Logger initialisiert und ist ab sofort über die Zend_Registry überall in der Applikation verfügbar.

Nun könnt ihr an jeder beliebigen Stelle folgendes ausführen (das Array in der ersten Zeile dient natürlich nur dem Test, ihr braucht nur die 2. Zeile):

$var = array("Part_1"=>"Blabla", "Item2"=>array("Part_2"=>"Blabla"));
Zend_Registry::get('debug_logger')->log($var, Zend_Log::INFO);

Und schon bekommt ihr unter Firebug folgendes serviert:

Wenn ihr auf diese Log-Zeile klickt, so öffnet sich noch ein schöner Overlay in dem die Daten noch besser lesbar werden:

Ganz wichtig noch: Damit die Debug-Meldungen erscheinen, müsst ihr den Punkt “Netzwerk” aktiviert haben – sonst kommen die Meldungen bei Firebug nicht an:

Links:
firephp.org