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:

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:

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?