PHP and JavaScript, Pooling Your Resources - How Does This Work? (
Page 4 of 4 )
For our first application, we’ll keep things simple. The primary focus here is to demonstrate how our two languages interact. To do that, we will construct two files: the first a simple PHP page that comprises mainly HTML, and the second a PHP page that generates JavaScript. Our first page will be as follows:
<?php
# start the session, and clear any existing values
session_start();
$_SESSION['js_count'] = 0;
?>
<!-- main HTML display -->
<HTML>
<head>
<title>PHP & Javascript - Example</title>
<STYLE type='text/css'>
/* set Body display properties to make things pretty */
body, p, th, td {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
}
</STYLE>
<SCRIPT type="text/javascript">
function attach_file( p_script_url ) {
// create new script element, set its relative URL, and load it
script = document.createElement( 'script' );
script.src = p_script_url;
document.getElementsByTagName( 'head' )[0].appendChild( script );
}
</SCRIPT>
</head>
<body>
<!-- call external PHP / Javascript file when clicked -->
<a href="javascript:attach_file( 'javascript.php' )">What time is it?</a>
<br><br>
<span id="dynamic_span" />
</body>
</HTML>
As you can see, things are pretty simple at this point. The PHP file initiates a SESSION variable, ‘js_count’ to be 0 and then outputs a simple HTML page. The only JavaScript present so far is the function we discussed earlier. An anchor tag is displayed to allow the user to call that function. A ‘dynamic_span’ tag is also present, and we’ll see why shortly. Now let’s take a look at our other PHP/JavaScript file, named ‘javascript.php’:
<?php
# set appropriate content type - to tell the browser we're returning Javascript
header( 'Content-Type: text/javascript' );
# start the session
session_start();
# determine the current time
$time = date( 'g:i a' );
# determine how many times the user has called the function, then increment it
$js_count = ( ++$_SESSION['js_count'] );
# based on the count, set the appropriate display value
if ( $js_count == 1 ) {
$inner_html = "This is your first time asking. It is $time.";
} else if ( $js_count <= 3 ) {
$inner_html = "You have asked me $js_count times now. It is $time.";
} else {
$inner_html = "You have already asked me $js_count times. Shut up!";
} # END big-nasty-else-if-block
?>
// retrieve span object, and attach additional HTML to it
dynamic_span_obj = document.getElementById( 'dynamic_span' );
dynamic_span_obj.innerHTML += '<?php echo $inner_html; ?> <br>';
Once again this file is pretty simple. Our PHP code simply tells the browser that it is a JavaScript file, then it retrieves the ‘js_count’ SESSION variable and creates a return String value depending on how many times the file has been called. Underneath our main PHP, our JavaScript simply updates the ‘dyamic_span’ tag on the main page, appending the PHP-generated String value.
That’s it?
That’s it. Try it out! So far we’ve kept things very simple, but hopefully you are beginning to see the possibilities that this type of interaction between PHP and JavaScript allows for. Part 2 of this article will then continue by expanding our example application to include some additional, user-friendly features as well as to implement a more practical scenario with PHP pulling its information from a MySQL database.
