Ajax Bookmarking: load correct page

Question

Basically I implemented Ajax to dynamically change my webpage as following:

<a href="javascript:loadProfile()">Profile</a>
<script>
function loadProfile() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
        document.getElementById("main").innerHTML =
        this.responseText;
        }
    };
  xhttp.open("GET", "profile.php", true);
  xhttp.setRequestHeader("Authorization", "index:redirect")
  xhttp.send();
  history.replaceState({foo: 'profile'}, "Profile", "profile.php");
}
</script>

Clicking onto a link should trigger the page refresh to display the new content in the current site. For now this works fine but when reloading the page or bookmarking and loading it, surely not the content from the main page but only the profile.php gets called.

When directly accessing it my target address I would like to have my main page (home.php) loaded and then the div for the profile replaced, same as a loadProfile() call on the page.

Is there a way to achieve this?

Answer 1

I solved the problem by making use of the .htaccess file on Apache Servers. Not going into details right here (since I asked the question myself) you just make use of basic routing and management of urls by redirecting via php.