Ajax endpoint in Typo3 – using middleware in version 10

In previous versions of TYPO3 an endpoint for Ajax could be achieved by configuring a page route in the extension file or by using the EID controller. From version TYPO3 9.5, a middleware layer was introduced. This allows for incoming HTTP requests, presumably the goal here will be for TYPO3 to open up for API requests. In the meantime it works as a handy way to create an Ajax endpoint for your application. Let me show you how.

Configure the middleware

In your extension create the configuration file here Configuration/RequestMiddlewares.php

return [
    'frontend' => [
        'Vendor/my_sitepackage/ajaxsearch' => [
            'target' => \Vendor\MySitepackage\Middleware\AjaxSearch::class,
            'after' => [
                'typo3/cms-frontend/prepare-tsfe-rendering'
            ]
        ],
    ],
];

The ‘target’ is the class where the http request will hit and carry out the logic within it. You obviously change the class namespace to your own extension. Let’s go ahead and create that file now.

Create the middleware class

In your extension create this PHP class here Classes/Middleware/AjaxSearch.php.

<?php
namespace Vendor\MySitepackage\Middleware;


use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;
use Psr\Http\Server\MiddlewareInterface;
use Psr\Http\Server\RequestHandlerInterface;
use TYPO3\CMS\Core\Http\JsonResponse;

class AjaxSearch implements MiddlewareInterface
{
    public function process(ServerRequestInterface $request, RequestHandlerInterface $handler): ResponseInterface
    {
        $response = $handler->handle($request);
        if (!isset($request->getQueryParams()['search-dogs'], $request->getQueryParams()['offset'])) {
            return $response;
        }

        //add in your logic here
        $dogs = ['labrador','pitbull','sheepdog']

        return new JsonResponse($dogs);
    }
}

That’s it! You are ready for your front end to hit the endpoint and return in this case a json string of dogs! What I had difficulty in understanding is how the route is created as the configuration doesn’t clearly write this in a human way. This is how it works, the after dependency in the configuration sends every front end request to the middleware class.

'after' => [
                'typo3/cms-frontend/prepare-tsfe-rendering'
            ]

The process method then defines the route itself by checking the request by requiring certain request parameters otherwise it just returns an empty response.

if (!isset($request->getQueryParams()['search-dogs'], $request->getQueryParams()['offset'])) {
            return $response;
        }

It will only continue with the request if, in this case, ‘search-dogs’ and ‘offset’ are present in the request. So the actually route for this Ajax endpoint is

mysite.com/?search-dogs=1&offset=10

If you play around with the above code you can configure the route to be whatever you want.

The official TYPO3 documentation has a different way of setting up an Ajax route but the above works well for an Ajax endpoint in Typo3 and is a nice way to discover the TYPO3 middleware possibilities.