The Simple Plus PJAX project provides a simple harness to exploring how PJAX (Push-state + AJAX) works in the context of AEM page authoring.

Note:

All Simple Plus packages require the installation of the base Simple package.

PJAX, Push-state + AJAX, is a classic technique used to decrease real or perceived page load times, and creating an experience that feels similar to a Single Page Application, in that there are no traditional page load "flickers". This example uses the pure JavaScript MoOX PJAX implementation.

PJAX works by "hijacking" link clicks on a page, and issuing AJAX requests for those clicks. When the AJAX response is received, the resulting HTML is parsed, and specified DOM elements for the response are injected into the current DOM. PJAX then uses JavaScript to update the browser URL to be that of the clicked link.

Note, as mentioned in the video, this technique confuses AEM's Page Editor with its URL management via Push-state, so its recommended PJAX is not enabled in Edit modes, and only when WCMMode is disabled.

How to use

  1. Download and install the latest Simple package via AEM Package Manager.

  2. Download and install the latest Simple Plus - PJAX package via AEM Package Manager.

  3. Open AEM in your browser and navigate to AEM > Sites > Simple > Plus > PJAX.

  4. Select  the PJAX page and tap Edit in the action bar to open, and then switch to "View as Published" mode.

  5. Click on the navigation links on the left (PJAX, Red, Geen, Blue) and observe how the page's content reloads without the usual "page load" flicker.

    • Open the browsers Network console and observe how the link clicks are XHR (AJAX).

Implementation notes

This basic integration includes the MoOX PJAX vendor library and the integration via the simple.plus.pjax.base Client Library which is itself exposed via the Page Design of the Simple Plus PJAX page template.

PJAX is enabled on the via the most basic invocation of the PJAX library, loaded at the bottom of the page, immediately before the closing </body> tag.

The PJAX library is configured to swap out the contents of the .simple-body--wrapper DOM element, which the first element under the <body> tag. Since the <head> and bottom JavaScript tags is not reloaded on each page load, special care must be taken to ensure JavaScript effecting body elements can react to injected DOM elements. The MoOX PJAX library has an robust API to support more complex functionality.

(function() {
    var pjax = new Pjax({
        selectors: [".simple-body--wrapper"]
    });
}());

Supporting materials

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy