How can Ajax be utilized to prevent the menu from reloading when changing content in PHP?

When changing content in PHP without using Ajax, the entire page is typically reloaded, causing the menu to also reload and potentially disrupt the user experience. To prevent this, Ajax can be utilized to dynamically load content without refreshing the entire page, thus keeping the menu intact. 

// HTML code for menu
<div id="menu">
    <ul>
        <li><a href="#" onclick="loadContent('page1.php')">Page 1</a></li>
        <li><a href="#" onclick="loadContent('page2.php')">Page 2</a></li>
        <li><a href="#" onclick="loadContent('page3.php')">Page 3</a></li>
    </ul>
</div>

// JavaScript function to load content using Ajax
<script>
function loadContent(page) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("content").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", page, true);
    xhttp.send();
}
</script>

// HTML code for content
<div id="content">
    <!-- Content will be loaded here -->
</div>

Keywords

Ajax menu reloading content changing PHP prevent

Related Questions