<?php
/*==============================================================================
 *  Makes an AJAX call to page2.php
==============================================================================*/
?>
<!DOCTYPE html>
<html>
    <head>
        <title>page1</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="data:,">  <!-- no favicon -->
        <script>
            function getContent() {
                let response = document.getElementById('content');

                let URL     = "./page2.php";
                fetch(URL)
                .then(reponse => { 
                    if ( ! reponse.ok) throw new Error("NOK - HTTP error="+reponse.status);
                    return reponse.text();
                })
                .then(data => {
                    response.innerHTML = data;
                    return 0;
                })
                .catch(error => {
                    response.innerHTML = "NOK - fetch().catch() :  "+error;
                });
            }
        </script>
    </head>
    <body>
        <h2>I am page1.php</h2>
        <div style="background-color:lightgreen">
           <h3>AJAX call of page2.php which uses cURL to get page3.php content</h3>
           <input type="button" onclick="getContent()" value="Call"> 
           <p id="content"></p>
        </div>
    </body>
</html>
