How can AJAX be effectively used in PHP to load content into a div container without disrupting the overall page layout?

When using AJAX in PHP to load content into a div container without disrupting the overall page layout, you can create a separate PHP file that generates the content to be loaded. Then, use JavaScript to make an AJAX request to this PHP file and update the content of the div container with the response data. 

<?php
// content.php
echo "This is the content to be loaded dynamically.";
?>
```

```html
<!DOCTYPE html>
<html>
<head>
  <title>AJAX Content Loading</title>
  <script>
    function loadContent() {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'content.php', true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
          document.getElementById('contentContainer').innerHTML = xhr.responseText;
        }
      };
      xhr.send();
    }
  </script>
</head>
<body>
  <button onclick="loadContent()">Load Content</button>
  <div id="contentContainer"></div>
</body>
</html>

Keywords

AJAX PHP div container content loading page layout

Related Questions