Calling PHP from Java Script - php

Question

I'm new at dealing with web programming and not used to dealing with the flow of data through a site.
I was looking for a way to call PHP from Java Script or from HTML and came across the following code with many other answers from this site. One thing that I got from Stack Overflow was that Ajax was the only good way to do this and JQuery would be the best way to go about that.
Is the code below safe? Are there holes in it that I don't know about at this point of learning?
<?PHP
$a="hello";
?>
<script>
function echoHello(){
alert("<?PHP hello(); ?>");
}
</script>
<?PHP
FUNCTION hello(){
GLOBAL $a;
ECHO $a;
}
?>
<button onclick="echoHello()">Say Hello</button>

Answer 1

This is not AJAX, but server-side code that only loads at first request.
A mockup of your functionality using AJAX is:
functions.php file:
<?php
$clientSideMethodRequested = $_POST['method'];
if ($clientSideMethodRequested == "sayhello"){
tellHimHello();
}
function tellHimHello(){
echo 'Hello!';
}
?>
client-side AJAX call:
$(document).ready(function(){
$.ajax({
type: "POST",
url: "mydomain.com/functions.php?method=sayhello",
success: function(returnedString){
alert(returnedString);
}
});
});

Answer 2

It will not work. PHP is executed on server, JS is executed in your browser. When you are opening page, the server will at first interpret your code. The result of your code, after this will be like that:
<script>
function echoHello(){
alert("hello");
}
</script>
<button onclick="echoHello()">Say Hello</button>
As you see, everything what was between <?php and ?> was "removed" from the origin file. By "removed" I mean executed.
Sometimes, when your server is not configured to interpret PHP, you will see PHP code in page source in browser. But it still won't work, because no browser supports PHP.

Answer 3

PHP is a server side language, so the code that your browser will "receive" will contain nothing related to PHP. What will happen is that this PHP file will be parsed and executed still in the server, and your browser will get only the following code:
<script>
function echoHello(){
alert("hello");
}
</script>
<button onclick="echoHello()">Say Hello</button>
which is the result of your server's PHP execution. This might be just what you expected in this particular case, but what if we wanted to pass parameters to echoHello function?
<script>
function echoHello(speech){
alert("<?PHP hello(speech); ?>");
}
</script>
<?PHP
FUNCTION hello($speech){
return $speech;
}
?>
<button onclick="echoHello('hello')">Say Hello</button>
<button onclick="echoHello('bye')">Say Bye</button>
One could expect this to alert 'hello' when the user clicks the first button, or 'bye' for the second one. This is not true, as the server starts executing this code before the buttons even exist (as they will only exist when the browser downloads the processed document to render the elements), and thus won't even be able to execute echoHello since speech isn't a valid variable. For this case and many others, AJAX is indeed the most appropriate way to go.
This tutorial should be good for a start.