hypesystem/api.php

## api.php
<?php

header("Content-Type: application/json");
echo json_encode(array(
    "name" => "Wilson",
    "gender" => "Ball",
    "age" => "13"
));

?>

## browser-render.htm
<!DOCTYPE html>
<html>
    <head>
        <title>Browser-Rendered page</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>User profile</h1>
        <div class="user-info">
            <div>
                <b>Name:</b>
                <span class="name-field">&mdash;</span>
            </div>
            <div>
                <b>Age:</b>
                <span class="age-field">&mdash;</span>
            </div>
            <div>
                <b>Gender:</b>
                <span class="gender-field">&mdash;</span>
            </div>
        </div>
        <script>
            var nameField = document.querySelector(".name-field");
            var ageField = document.querySelector(".age-field");
            var genderField = document.querySelector(".gender-field");

            var req = new XMLHttpRequest();
            req.open("GET", "api.php");
            req.onreadystatechange = function() {
                var response = JSON.parse(req.responseText);

                nameField.innerHTML = response.name ;
                ageField.innerHTML = response.age;
                genderField.innerHTML = response.gender;
            };
            req.send();
        </script>
    </body>
</html>

## dynamic-render.php
<?php
    $rootUrl = "http://prog/pagerendering/"; // <--- replace with your local url

    $curlRequest = curl_init();
    curl_setopt_array($curlRequest, array(
        CURLOPT_RETURNTRANSFER => 1,
        CURLOPT_URL => "{$rootUrl}/api.php"
    ));
    $result = json_decode(curl_exec($curlRequest));
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Dynamically rendered page</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>User profile</h1>
        <div class="user-info">
            <div>
                <b>Name:</b>
                <span class="name-field"><?php echo $result->name; ?></span>
            </div>
            <div>
                <b>Age:</b>
                <span class="age-field"><?php echo $result->age; ?></span>
            </div>
            <div>
                <b>Gender:</b>
                <span class="gender-field"><?php echo $result->gender; ?></span>
            </div>
        </div>
    </body>
</html>

## static-render.htm
<!DOCTYPE html>
<html>
    <head>
        <title>Dynamically rendered page</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>User profile</h1>
        <div class="user-info">
            <div>
                <b>Name:</b>
                <span class="name-field">Wilson</span>
            </div>
            <div>
                <b>Age:</b>
                <span class="age-field">13</span>
            </div>
            <div>
                <b>Gender:</b>
                <span class="gender-field">Ball</span>
            </div>
        </div>
    </body>
</html>

## style.css
html {
    text-align: center;
}

body {
    text-align: left;
    display: inline-block;
    font-family: sans-serif;
    width: 100%;
    max-width: 800px;
}
	<?php

	header("Content-Type: application/json");
	echo json_encode(array(
	"name" => "Wilson",
	"gender" => "Ball",
	"age" => "13"
	));

	?>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Browser-Rendered page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<h1>User profile</h1>
	<div class="user-info">
	<div>
	<b>Name:</b>
	<span class="name-field">—</span>
	</div>
	<div>
	<b>Age:</b>
	<span class="age-field">—</span>
	</div>
	<div>
	<b>Gender:</b>
	<span class="gender-field">—</span>
	</div>
	</div>
	<script>
	var nameField = document.querySelector(".name-field");
	var ageField = document.querySelector(".age-field");
	var genderField = document.querySelector(".gender-field");

	var req = new XMLHttpRequest();
	req.open("GET", "api.php");
	req.onreadystatechange = function() {
	var response = JSON.parse(req.responseText);

	nameField.innerHTML = response.name ;
	ageField.innerHTML = response.age;
	genderField.innerHTML = response.gender;
	};
	req.send();
	</script>
	</body>
	</html>
	<?php
	$rootUrl = "http://prog/pagerendering/"; // <--- replace with your local url

	$curlRequest = curl_init();
	curl_setopt_array($curlRequest, array(
	CURLOPT_RETURNTRANSFER => 1,
	CURLOPT_URL => "{$rootUrl}/api.php"
	));
	$result = json_decode(curl_exec($curlRequest));
	?>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dynamically rendered page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<h1>User profile</h1>
	<div class="user-info">
	<div>
	<b>Name:</b>
	<span class="name-field"><?php echo $result->name; ?></span>
	</div>
	<div>
	<b>Age:</b>
	<span class="age-field"><?php echo $result->age; ?></span>
	</div>
	<div>
	<b>Gender:</b>
	<span class="gender-field"><?php echo $result->gender; ?></span>
	</div>
	</div>
	</body>
	</html>
	html {
	text-align: center;
	}

	body {
	text-align: left;
	display: inline-block;
	font-family: sans-serif;
	width: 100%;
	max-width: 800px;
	}