External JavaScript and PHP

One of the lesser known sides of

external

JavaScript is the ability to reference a PHP file instead of the

familiar

.js file. At first such an notion may seem strange, even impossible;

after all, who among us isn't familiar with that barrier dividing server

side and client side scripts that prohibit the two from interacting? Well,

it turns out superficial exchange is allowed. Using external JavaScript,

you'll see how PHP and JavaScript can work together in a way you may not

have thought possible, and to the great benefit of JavaScript.

The syntax

The syntax to referencing a PHP file using external JavaScript is

consistent enough with what we already know:

<script type="text/javascript" src="myscript.php"></script>

where "myscript.php" is either an absolute or relative path to a PHP

script instead of the usual .js file. You can even pass parameters to the

PHP script through the URL string:

<script type="text/javascript" src="myscript.php?id=3&name=george"></script>

Your PHP script can then get to these parameters using the global

variable $HTTP_GET_VARS[]. So you're probably wondering at this

point: "So what's the catch?" Well, there is no catch really, just a few

limitations. Since we are invoking the PHP script indirectly and via

JavaScript, the final output of the PHP script needs to be valid JavaScript.

Think of it as a dynamic .js file, bounded by the same limitations as a

regular .js file. A normal PHP script called inside a PHP page can output

raw HTML and modify the source code of the page. The JavaScript invoked

version obviously cannot, but don't worry, there's plenty of what it can do.

Here's a basic example of a PHP script- ip.php- being called by external

JavaScript to do something that JavaScript alone cannot:

<?//"ip.php" example- display user IP address on any page




Header("content-type: application/x-javascript");




$serverIP=$_SERVER['REMOTE_ADDR'];




echo "document.write(\"Your IP address is: <b>" . $serverIP . "</b>\")";




?>

And once called by external JavaScript:

<script type="text/javascript" src="ip.php"></script>

Output:

In the above, we have a normal PHP script that writes out the IP address

of the visitor when referenced using external JavaScript, with two important

details:

A JavaScript header is sent at the very beginning to inform the page

that our PHP script is outputting a JavaScript file.

Since the final output of our PHP script needs to be a

valid .js file, whatever the PHP outputs must

conform to valid JavaScript syntax. So to display the IP address from the

perspective of JavaScript, the echo function above includes

"document.write()" as part the content to send back to the page.

Notice how I didn't output the JavaScript script tag itself

(<script></script>), as just like inside a regular .js file, this isn't

required nor valid.

The ability to reference a PHP script inside your external JavaScript can

be very useful! It means your JavaScript now has access to once exclusive

information on the server side, whether it's the server time, the visitor's

IP address, a list of all the files within a certain directory, or mySQL

database information. Furthermore, even regular HTML pages can utilize this

information, since all that's required is a JavaScript on these pages that

in turn references the desired PHP script on your server or beyond. Want to

display the visitor's IP address on a static html page- any html page? The

above example already does that.

Ok, time to put our new found discovery to better use- how about a

JavaScript slideshow that automatically rotates/displays all images within a

directory?

Tutorial Introduction

Dynamically populating a JavaScript image

slideshow

Dynamically populating a JavaScript image

slideshow