X-Ajax - Support for header options customization

[josh-tt]

In order to get php to request only a portion of the x-ajax'ed URL I've had to do the following after researching the topic here:

let response = await (await fetch(target, {
                method: 'get',
                credentials: 'same-origin',
                headers: {'X-Requested-With': 'XMLHttpRequest'}
            })).text();

I'm not sure if this is valid approach that works with all browsers, but seems to work when using:
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { ?>...

Perhaps there is a more elegant way to allow the end user to modify headers to support this without editing the plugin code.

Lastly, there is also an edge case when using browser 'prefetch'. If prefetching, the solution above does not work as it just gets it from the prefetch cache.

[josh-tt]

After a little playing around, I suppose a simple option to add x-ajax: true header would be fine and less confusing. Then user just needs to handle the rest to manage the behavior. No experience altering headers though, so I'm not sure of the ramifications.

[ekwoka]

That could be good.

Based on what we discussed in discord, is it not possible to simply look for a query param on the php side?

Like if you do endpoint?section=productcard then the php just checks for the section query param?

[josh-tt]

Thanks for reminding me to try that once again. Just realized I was writing my string with endpoint/? and so there prefetches were being ignored and duplicated. I think that solution works best for now. x-data header also worked fine, but re-writing the prefetch headers wasn't working. This is indeed a simpler solution and works great, cheers.