Wie man AJAX in TYPO3 implementiert: Mit TypoScript und Extbase

Moderne Websites setzen häufig auf AJAX (Asynchronous JavaScript and XML), um dynamische, reaktionsschnelle Benutzererlebnisse zu liefern, ohne die gesamte Seite neu zu laden. In TYPO3 können wir die Macht von AJAX nutzen, indem wir einen dedizierten typeNum-Endpunkt in TypoScript einrichten und asynchrone Aufrufe mit einem Extbase-Controller verarbeiten. Dieser Blog-Post führt Sie durch die einzelnen Schritte - von der Konfiguration von TypoScript für AJAX bis zur Rückgabe von JSON-Antworten und deren Verwendung in Ihrem Frontend-JavaScript.

Warum AJAX in TYPO3 verwenden?

1. Verbesserte Benutzerfreundlichkeit: Sie müssen nicht die gesamte Seite neu laden, sondern nur bestimmte Komponenten aktualisieren.
2. Bessere Leistung: Holen Sie nur die erforderlichen Daten ab und reduzieren Sie so die Serverlast und die Ladezeiten der Seite.
3. Modular und wartungsfreundlich: Halten Sie Ihre Logik übersichtlich, indem Sie AJAX-Aufrufe in einem eigenen Controller/Aktion isolieren.

1. Erstellen eines AJAX-Endpunkts mit TypoScript

Der erste Schritt besteht darin, ein spezielles PAGE-Objekt in TypoScript zu erstellen und eine eindeutige typeNum zuzuweisen, um Ihre AJAX-Anfragen zu bearbeiten.

ajax_page = PAGE
ajax_page {
    typeNum = 123456  # Unique number for the AJAX call
    config {
        disableAllHeaderCode = 1
        additionalHeaders = Content-type:application/json
        xhtml_cleaning = 0
        admPanel = 0
        debug = 0
        no_cache = 1
    }

    10 = USER
    10 {
        userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
        extensionName = YourExtension
        pluginName = YourPlugin
        vendorName = YourVendor
        controller = YourController
        action = yourAjaxAction
    }
}

ajax_page = PAGE
ajax_page {
    typeNum = 123456  # Unique number for the AJAX call
    config {
        disableAllHeaderCode = 1
        additionalHeaders = Content-type:application/json
        xhtml_cleaning = 0
        admPanel = 0
        debug = 0
        no_cache = 1
    }

    10 = USER
    10 {
        userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
        extensionName = YourExtension
        pluginName = YourPlugin
        vendorName = YourVendor
        controller = YourController
        action = yourAjaxAction
    }
}

Wichtige Punkte

1. typeNum: Weisen Sie eine eindeutige Ganzzahl zu, um diese AJAX-Anfrage von anderen TYPO3-Seitentypen zu unterscheiden.
2. disableAllHeaderCode: Stellt sicher, dass keine zusätzlichen HTML-Header enthalten sind - ideal für JSON-Antworten.
3. USER: Leitet die Anfrage an Ihren Extbase-Controller/die Aktion weiter, der/die die Anfrage verarbeitet und Daten zurückgibt.

2. Implementierung des Extbase-Controllers

Als nächstes erstellen (oder aktualisieren) Sie eine Extbase-Controller-Aktion speziell für die Bearbeitung der AJAX-Anfrage. Durch die Nutzung von JsonView kann TYPO3 automatisch eine JSON-Antwort zurückgeben, die leicht in Ihrem JavaScript zu verwenden ist.

namespace Vendor\YourExtension\Controller;

use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
use TYPO3\CMS\Extbase\Mvc\View\JsonView;

class YourController extends ActionController
{
    protected $defaultViewObjectName = JsonView::class; // Return JSON response

    public function yourAjaxAction()
    {
        // Your business logic here
        $data = [
            'message' => 'Hello, this is a response from the AJAX call',
            'status' => true,
        ];

        // Assign data to the view for JSON output
        $this->view->assign('value', $data);
    }
}

namespace Vendor\YourExtension\Controller;

use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
use TYPO3\CMS\Extbase\Mvc\View\JsonView;

class YourController extends ActionController
{
    protected $defaultViewObjectName = JsonView::class; // Return JSON response

    public function yourAjaxAction()
    {
        // Your business logic here
        $data = [
            'message' => 'Hello, this is a response from the AJAX call',
            'status' => true,
        ];

        // Assign data to the view for JSON output
        $this->view->assign('value', $data);
    }
}

Wichtige Punkte

1. JsonView: Konvertiert das zugewiesene PHP-Array/Objekt automatisch in eine JSON-Ausgabe.
2. Geschäftslogik: Führen Sie hier alle serverseitigen Operationen durch, z. B. Datenbankabfragen, Validierungen oder benutzerdefinierte Geschäftsregeln.

3. Auslösen der AJAX-Anfrage aus JavaScript

Schließlich benötigen Sie eine Möglichkeit, den neu erstellten AJAX-Endpunkt von Ihrem Frontend aus aufzurufen. Im Folgenden finden Sie ein Beispiel für die Verwendung von einfachem JavaScript (XMLHttpRequest); Sie können jedoch auch fetch() oder $.ajax() von jQuery verwenden, wenn Sie dies wünschen.

// Create an XMLHttpRequest object
var xhr = new XMLHttpRequest();

// Define the URL (with the typeNum parameter)
var url = "/?type=123456"; // Replace '123456' with your actual typeNum

// Open the request
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// On successful response
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // Parse JSON response
        var response = JSON.parse(xhr.responseText);
        console.log(response);  // Handle the server response data
    } else {
        console.error('Request failed. Status: ' + xhr.status);
    }
};

// On request error
xhr.onerror = function() {
    console.error('AJAX request failed');
};

// Data to send
var data = "param1=value1&param2=value2";

// Send the request
xhr.send(data);

// Create an XMLHttpRequest object
var xhr = new XMLHttpRequest();

// Define the URL (with the typeNum parameter)
var url = "/?type=123456"; // Replace '123456' with your actual typeNum

// Open the request
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// On successful response
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // Parse JSON response
        var response = JSON.parse(xhr.responseText);
        console.log(response);  // Handle the server response data
    } else {
        console.error('Request failed. Status: ' + xhr.status);
    }
};

// On request error
xhr.onerror = function() {
    console.error('AJAX request failed');
};

// Data to send
var data = "param1=value1&param2=value2";

// Send the request
xhr.send(data);

Wichtige Punkte

1. xhr.open("POST", url, true): Legt die HTTP-Methode (GET oder POST), die Ziel-URL und das Asynchronitätsflag fest.
2. xhr.setRequestHeader(): (Optional) Verwenden Sie dies, um Inhaltstypen oder benutzerdefinierte Kopfzeilen festzulegen.
3. Antwort-Verarbeitung: JSON-Antworten können mit JSON.parse() geparst werden, um den Zugriff zu erleichtern.

4. (Optional) Konfigurieren Sie saubere URLs mit Routing

Für TYPO3 v9 und höher können Sie Ihren AJAX-Endpunkt benutzerfreundlicher gestalten, indem Sie Routenerweiterungen einrichten. Definieren Sie in Ihrer config.yaml eine Route für Ihre typeNum:

routeEnhancers:
  AjaxType:
    type: Simple
    defaultController: 'Vendor\YourExtension\Controller\YourController::yourAjaxAction'
    requirements:
      type: '\d+'
    default: ''

routeEnhancers:
  AjaxType:
    type: Simple
    defaultController: 'Vendor\YourExtension\Controller\YourController::yourAjaxAction'
    requirements:
      type: '\d+'
    default: ''

So können Sie hübsche URLs erstellen, anstatt /?type=123456 zu verwenden. Passen Sie Ihre JavaScript-Anfrage entsprechend an.

Beispiel aus der Praxis

Ein typisches Szenario ist die Auflistung von Datensätzen aus einer Extension, wie sie z.B. unser TYPO3 Extension Helpdesk verwendet:

listAction = PAGE
listAction {
    typeNum = 741852
    config {
        disableAllHeaderCode = 1
        additionalHeaders = Content-type:application/json
        xhtml_cleaning = 0
        admPanel = 0
    }

    10 = USER
    10 < styles.content.get
    10 {
        userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
        extensionName = NsHelpdesk
        pluginName = Helpdesk
        vendorName = NITSAN
        controller = Tickets
        switchableControllerActions {
            Tickets {
                1 = list
            }
        }

        # Carry plugin settings along in the AJAX call
        stdWrap.trim = 1
        select {
            where = list_type = "nshelpdesk_helpdesk"
        }
        renderObj < tt_content.list.20.nshelpdesk_helpdesk
    }
}

listAction = PAGE
listAction {
    typeNum = 741852
    config {
        disableAllHeaderCode = 1
        additionalHeaders = Content-type:application/json
        xhtml_cleaning = 0
        admPanel = 0
    }

    10 = USER
    10 < styles.content.get
    10 {
        userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
        extensionName = NsHelpdesk
        pluginName = Helpdesk
        vendorName = NITSAN
        controller = Tickets
        switchableControllerActions {
            Tickets {
                1 = list
            }
        }

        # Carry plugin settings along in the AJAX call
        stdWrap.trim = 1
        select {
            where = list_type = "nshelpdesk_helpdesk"
        }
        renderObj < tt_content.list.20.nshelpdesk_helpdesk
    }
}

Durch den Verweis auf /?type=741852 (oder Ihre ausgefallene Route, falls konfiguriert) können Sie asynchron eine Liste von Support-Tickets von Helpdesk abrufen und sie in Ihrem JavaScript-Code bearbeiten.

Schlussfolgerung

Die Implementierung von AJAX in TYPO3 mit TypoScripts typeNum und Extbase ist einfach und leistungsstark. Indem Sie Ihre AJAX-Logik in eine dedizierte Controller-Aktion auslagern, halten Sie das System sauber, modular und einfach zu pflegen. Egal, ob Sie kleine Komponenten aktualisieren oder eine komplette Single-Page-Anwendung erstellen, die Flexibilität von TYPO3 macht alles möglich.

Haben Sie Fragen oder besondere Anwendungsfälle? Schreiben Sie sie in die Kommentare oder wenden Sie sich an die T3Planet Community. Wir würden uns freuen zu hören, wie Sie AJAX in Ihren TYPO3 Projekten einsetzen!

Viel Spaß beim AJAX-Einsatz mit TYPO3!

All in One TYPO3 AI Erweiterung

Wie man AJAX in TYPO3 implementiert: Mit TypoScript und Extbase

Warum AJAX in TYPO3 verwenden?

1. Erstellen eines AJAX-Endpunkts mit TypoScript

2. Implementierung des Extbase-Controllers

3. Auslösen der AJAX-Anfrage aus JavaScript

4. (Optional) Konfigurieren Sie saubere URLs mit Routing

Beispiel aus der Praxis

Schlussfolgerung

Post a Comment

Got answer to the question you were looking for?

All in One TYPO3 AI Erweiterung

Wie man AJAX in TYPO3 implementiert: Mit TypoScript und Extbase

Warum AJAX in TYPO3 verwenden?

1. Erstellen eines AJAX-Endpunkts mit TypoScript

2. Implementierung des Extbase-Controllers

3. Auslösen der AJAX-Anfrage aus JavaScript

4. (Optional) Konfigurieren Sie saubere URLs mit Routing

Beispiel aus der Praxis

Schlussfolgerung

Post a Comment

Related Tutorials

Got answer to the question you were looking for?