How can PHP and JavaScript be effectively combined to display real-time data changes on a webpage while minimizing page reloads?

To display real-time data changes on a webpage while minimizing page reloads, PHP can be used to fetch data from a database or external API, and JavaScript can be used to update the webpage dynamically without reloading the entire page. This can be achieved by making asynchronous requests to the server using AJAX and updating the DOM elements with the new data.

<?php
// PHP code to fetch data from the server
$data = fetchDataFromServer();

// Encode the data as JSON
$json_data = json_encode($data);

// Output the JSON data
echo "<script>var jsonData = $json_data;</script>";
?>