How to add a PHP page into blogspot.com new page

Question

I have a real .php page like this http://hiteachers.com/soccer_parse.php?id=5 . I want to add it into a blogger.com new page (**not a new blog post, or new HTML widget **, and I've got this successfully.

https://tranbongda.blogspot.com/p/function-myfunction-window.html

I used the code like this:

<script> 
  var Window; 
  // Function that open the new Window 
  function windowOpen() { 
      Window = window.open("http://hiteachers.com/soccer_parse.php?id=5", 
                             "_blank", "width=400, height=450"); 
  } 
  // function that Closes the open Window 
      function windowClose() { 
            Window.close(); 
   } 
 </script> 
<button onclick="windowOpen()">Open page</button> 
    <button onclick="windowClose()">Close page</button> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
  $(document).ready(function()
  $("button").click(function(){
    $("#div1").load("http://hiteachers.com/soccer_parse.php?id=5");
  });
});
</script>

My expectation is that I'd like the blogger page to load the original content of the .php page immediately when the visitor visits the blogger.com page ( https://tranbongda.blogspot.com/p/function-myfunction-window.html ) without clicking on any button.

I have thought of creating iframe by using this:

<iframe name="Framename" src="http://hiteachers.com/soccer_parse.php?id=5" width="550" height="550" frameborder="0" scrolling="yes" style="width: 100%;"> </iframe>

But the blogger.com page does not accept it, and returns the error message like this: This page contains HTTP resources which may cause mixed content affecting security and user experience if blog is viewed over HTTPS.

Then I moved to try this <object width="500" height="300" type="text/html" data="http://hiteachers.com/soccer_parse.php?id=5"></object> as per some bloggers' suggestions, but I still failed.

Some other bloggers suggested to use AJAX, which is very new to me.

So, is there any way to parse the provided .php page content and add it to the blogspot.com/blogger.com new page without showing the url of the .php page or window pop-ups?

Can you help me please?

Thanks

Answer 1

As the bloggers likely have suggested, make the PHP server a REST endpoint and access the data on the blog site with Asynchronous JavaScript and XML. Although today people have tended to scratch the XML part and go with JSON or something. AJAX is accomplished by using the XMLHttpRequest object. Mozilla's spec provides links and stuff which will show you how to use it and w3schools is a good resource.

Then it's all comes down to editing the page directly

element.removeChild(element.lastChild);
element.appendAdjacentHTML('beforeend',xhr.responseText);