Send back alternate HTML content if the request is not made via AJAX

Question

Send back alternate HTML content if the request is not made via AJAX

Last time I asked this question, I received several negative responses. This time, I will try to be more clear.

Here is the structure of a website:

Mainpage (Containing all resources and scripts)
- All Other pages (HTML only consists of elements of that specific page)

When a user clicks on mainpage anchors leading to other pages, an AJAX function embedded in the On click event will run, and the URL address will change using Window.history.PushState.

The problem arises when a user enters the URL of other pages directly instead of clicking on anchors. For instance, if a user enters: http://example.com/pages/about, only the elements of that page will load without the necessary resources and scripts from the mainpage.

I am thinking of a solution like this:

Detect whether a user enters the URL instead of clicking on anchors (detect HTTP request).
If it is an HTTP request, then load the resources included in the mainpage.

Is there a way to implement this solution using client-side (javascript) or maybe PHP?

You can refer to Cloudflare panel to understand what I mean:

javascript php jquery html ajax

Answer 1

Answer №1

After conducting some research (with a special thanks to the comments), I have come up with my preferred solution. I made the decision not to alter the markup, therefore opting out of using Template engines.

1. Begin by creating this PHP Script and saving it in a PHP file.

<?php

/* Check for AJAX */

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    /* Code to execute if it is an AJAX request */
}

else {
/* Code to execute if it is not an AJAX request; In my case, I echoed all scripts and resources that needed to be in AJAX addresses */
    echo '
        <script src="example.js"></script>
    ';
}

2. Include the above PHP script file in pages where both AJAX and HTTP requests are present. In my scenario, I included it in all other pages except the main page.

<?php include "../script.php"; ?>

3. Configure your webserver to support PHP scripts within HTML file extensions. As my webserver was Apache, I added the following line to the .htaccess file.

AddType application/x-httpd-php .htm .html

Answer 2

After conducting some research (with a special thanks to the comments), I have come up with my preferred solution. I made the decision not to alter the markup, therefore opting out of using Template engines.

1. Begin by creating this PHP Script and saving it in a PHP file.

<?php

/* Check for AJAX */

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    /* Code to execute if it is an AJAX request */
}

else {
/* Code to execute if it is not an AJAX request; In my case, I echoed all scripts and resources that needed to be in AJAX addresses */
    echo '
        <script src="example.js"></script>
    ';
}

2. Include the above PHP script file in pages where both AJAX and HTTP requests are present. In my scenario, I included it in all other pages except the main page.

<?php include "../script.php"; ?>

3. Configure your webserver to support PHP scripts within HTML file extensions. As my webserver was Apache, I added the following line to the .htaccess file.

AddType application/x-httpd-php .htm .html

Send back alternate HTML content if the request is not made via AJAX

Answer №1

Similar questions

Error message received when calling a function within a Vue watcher states "function is not defined"

Can we rely on JavaScript to maintain the order of object properties?

Is it possible to utilize Jquery in order to add an opening <tr> tag and a closing </tr> tag within a dynamic table?

REACT Issue: Unable to Select Dropdown Option with OnChange Function

Sketch a variety of numerical values in a circular formation

A scenario in a Jasmine test where a function is invoked within an if statement

The rows sent to HTML/Bootstrap from Java through JSON do not neatly wrap across rows evenly

The Vue/Nuxt application displays content duplication on each page, rendering the content twice without duplicating the components

Contrasting assign and modify operations on arrays

Showing the inner text of a jQuery knob in two separate lines

Panel not refreshing its content after update

React.js: The specified element type is not valid:

Steps to trigger a Bootstrap modal when the user clicks anywhere on the webpage

Having difficulty removing an element from JSON using PHP

If the text is too lengthy, enclose it within a div element

Navigating through nested arrays in Laravel Blade templates

Retrieve the current user's local machine name on a wireless network using PHP

What is the process for acquiring dynamic values within a URL?

Employ fwrite function to generate a Markdown file

Struggling to find your way around the header on my website? Let me give