AJAX requests in TYPO3

There are different ways to add AJAX requests in TYPO3. in this post, I explain how to make AJAX requests in TYPO3 using TypeNum and Eid.

Using a custom TypeNum:

Every page object in TYPO3 has a typeNum, even pages which do not have an explicit TypeNum gets a default typeNum of 0. We can create a new page object with a different TypeNum and configure it to send a JSON response or an HTML response with our custom data.

ajax_page = PAGE 
ajax_page {  
  typeNum = 123456       
  config { 
    disableAllHeaderCode = 1    
    additionalHeaders = Content-type: application/json, utf-8
    debug = 0
    no_cache = 1     
    admPanel = 0   
  }        
  10 < tt_content.list.20.extension_name_action 
 }  

The snippet above defines a new ajax_page PAGE object and assigns the type 123456 to it. The config section disables the caches, headers (HTML head tags which TYPO3 delivers by default), admin panel and the debug messages. It also tells the browser that the content type of the page is JSON.

The 10 < tt_content.list.20.extension_name_action section defines, what response should the ajax request send. You can add every COA valid object here.

The example below sends a fluid template as response.

ajax_page = PAGE 
ajax_page {  
  typeNum = 123456       
  config { 
    disableAllHeaderCode = 1    
    additionalHeaders = Content-type: application/json, utf-8
    debug = 0
    no_cache = 1     
    admPanel = 0   
  }        
  
  10 = FLUIDTEMPLATE
  10 {
      templateName = ACustomTemplateName
      templateRootPaths.0 = EXT:extension_name/Resources/Private/Templates/Content/ACustomTemplateName/
      partialRootPaths.0 = EXT:extension_name/Resources/Private/Partials/Page/
  }
 }  

The example below queries content elements with the uids 20 and 21 from tt_content table.

ajax_page = PAGE 
ajax_page {  
  typeNum = 123456       
  config { 
    disableAllHeaderCode = 1    
    additionalHeaders = Content-type: application/json, utf-8
    debug = 0
    no_cache = 1     
    admPanel = 0   
  }        
  
  20 = RECORDS
  20 {
     source = 20,21
     dontCheckPid = 1
     tables = tt_content
   }
 }  

You can now use example.com/index.php?type=123456 as your request endpoint.

Using eid

You can also create ajax requests using Eid. Eid requests should theoretically be faster than TypeNum, as some services like dependency injection and annotation parsing are not loaded.

To add new request endpoints, you need to register a new Eid, which references a method in an Eid controller.

The Eid is registered in ext_localconf.php.

$GLOBALS['TYPO3_CONF_VARS']['FE']['eID_include']['ajax_page'] = \Vendor\Ext\Controller\MyEidController::class . '::methodName';

Now add the class and method. The method can send any response.

<?php 
namespace Vendor\Extension\Eid;

use Psr\Http\Message\ResponseInterface;

class MyEidController
{
 
/**
* @param ResponseInterface $response
*/
 public function methodName(ResponseInterface $response): ResponseInterface
    {
   $responseData =   json_encode([
            'status' => 'OK',
            'data' => [
                'user'=> 'John Doe',
                'Message' => 'Hello world'
           ]
        ], JSON_UNESCAPED_UNICODE);

        $response->getBody()->write($this->createSuccessResponseObject($responseData));
        return $response
            ->withStatus(200)
            ->withHeader('Content-Type', 'application/json');
    }
}

You can now use example.com?eid=ajax_page as your request endpoint.