|
Home::CGI
PHP On-The-Fly!
Author : Dennis Pallett
Introduction PHP can be used for a lot of different
things, and is one of the most powerful scripting languages
available on the web. Not to mention it's extremely cheap and
widely used. However, one thing that PHP is lacking, and in fact
most scripting languages are, is a way to update pages in
real-time, without having to reload a page or submit a form.
The internet wasn't made for this. The web browser closes the
connection with the web server as soon as it has received all
the data. This means that after this no more data can be
exchanged. What if you want to do an update though? If you're
building a PHP application (e.g. a high-quality content
management system), then it'd be ideal if it worked almost like
a native Windows/Linux application.
But that requires real-time updates. Something that isn't
possible, or so you would think. A good example of an
application that works in (almost) real-time is Google's GMail. Everything is
JavaScript powered, and it's very powerful and dynamic. In fact,
this is one of the biggest selling-points of GMail. What if you
could have this in your own PHP websites as well? Guess what,
I'm going to show you in this article.
How does it work? If you want to execute a PHP script,
you need to reload a page, submit a form, or something similar.
Basically, a new connection to the server needs to be opened,
and this means that the browser goes to a new page, losing the
previous page. For a long while now, web developers have been
using tricks to get around this, like using a 1x1 iframe, where
a new PHP page is loaded, but this is far from ideal.
Now, there is a new way of executing a PHP script without having
to reload the page. The basis behind this new way is a
JavaScript component called the XML HTTP Request Object. See http://jibber
ing.com/2002/4/httprequest.html for more information about
the component. It is supported in all major browsers (Internet
Explorer 5.5+, Safari, Mozilla/Firefox and Opera 7.6+).
With this object and some custom JavaScript functions, you can
create some rather impressive PHP applications. Let's look at a
first example, which dynamically updates the date/time.
Example 1 First, copy the code below and save it in a
file called 'script.js': var xmlhttp=false; /*@cc_on @*/
/*@if (@_jscript_version >= 5) // JScript gives us
Conditional compilation, we can cope with old IE versions. //
and security blocked creation of the objects. try { xmlhttp =
new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try
{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (E) { xmlhttp = false; } } @end @*/ if (!xmlhttp
&& typeof XMLHttpRequest!='undefined') { xmlhttp = new
XMLHttpRequest(); }
function loadFragmentInToElement(fragment_url, element_id) { var
element = document.getElementById(element_id); element.innerHTML
= '<em>Loading ...</em>';
xmlhttp.open("GET", fragment_url);
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState
== 4 && xmlhttp.status == 200) { element.innerHTML =
xmlhttp.responseText; } } xmlhttp.send(null); } Then copy
the code below, and paste it in a file called 'server1.php':
<?php echo date("l dS of F Y h:i:s A"); ?>
And finally, copy the code below, and paste it in a file
called 'client1.php'. Please note though that you need to edit
the line that says 'http://www.yourdomain.com/server1.php' to
the correct location of server1.php on your server.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Strict//EN"> <html> <head>
<title>Example 1</title> <script
src="script.js"
type="text/javascript"></script>
<script type="text/javascript"> function
updatedate() {
loadFragmentInToElement('http://www.yourdomain.com/server1.php',
'currentdate'); }
</script> </head>
<body> The current date is<span
id="currentdate"><?php echo date("l dS of F
Y h:i:s A"); ?></span>.<br /><br />
<input type="button" value="Update date"
OnClick="updatedate();" /> </body>
</html>
Now go to
http://www.yourdomain.com/client1.php and click on the button
that says 'Update date'. The date will update, without the page
having to be reloaded. This is done with the XML HTTP Request
object. This example can also be viewed online at http://www.phpit.net/demo/php%20on%20the%20fly/client1.php.
Example 2 Let's try a more advanced example. In the
following example, the visitor can enter two numbers, and they
are added up by PHP (and not by JavaScript). This shows the true
power of PHP and the XML HTTP Request Object.
This example uses the same script.js as in the first example, so
you don't need to create this again. First, copy the code below
and paste it in a file called 'server2.php': <?php
// Get numbers $num1 = intval($_GET['num1']); $num2 =
intval($_GET['num2']);
// Return answer echo ($num1 + $num2);
?> And then, copy the code below, and paste it in a
file called 'client2.php'. Please note though that you need to
edit the line that says 'http://www.yourdomain.com/server2.php'
to the correct location of server2.php on your server.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Strict//EN"> <html> <head>
<title>Example 2</title> <script
src="script.js"
type="text/javascript"></script>
<script type="text/javascript"> function calc()
{ num1 = document.getElementById ('num1').value; num2 =
document.getElementById ('num2').value;
var element = document.getElementById('answer');
xmlhttp.open("GET",
'http://www.yourdomain.com/server2.php?num1=' + num1 +
'&num2=' + num2); xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
element.value = xmlhttp.responseText; } } xmlhttp.send(null); }
</script> </head>
<body> Use the below form to add up two numbers. The
answer is calculated by a PHP script, and
<em>not</em> with JavaScript. What's the advantage
to this? You can execute server-side scripts (PHP) without
having to refresh the page.<br /><br />
<input type="text" id="num1"
size="3" /> + <input type="text"
id="num2" size="3" /> = <input
type="text" id="answer" size="5"
/>
<input type="button" value="Calculate!"
OnClick="calc();" /> </body>
</html>
When you run this example, you can add up
two numbers, using PHP and no reloading at all! If you can't get
this example to work, then have a look on http://www.phpit.net/demo/php%20on%20the%20fly/client3.php
to see the example online.
Any Disadvantages...? There are only two real
disadvantages to this system. First of all, anyone who has
JavaScript turned off, or their browser doesn't support the XML
HTTP Request Object will not be able to run it. This means you
will have to make sure that there is a non-JavaScript version,
or make sure all your visitors have JavaScript enabled (e.g. an
Intranet application, where you can require JS).
Another disadvantage is the fact that it breaks bookmarks.
People won't be able to bookmark your pages, if there is any
dynamic content in there. But if you're creating a PHP
application (and not a PHP website), then bookmarks are probably
not very useful anyway.
Conclusion As I've shown you, using two very simple
examples, it is entirely possible to execute PHP scripts,
without having to refresh the page. I suggest you read more
about the XML HTTP
Request Object and its capabilities.
The things you can do are limitless. For example, you could
create an extremely neat paging system, that doesn't require
reloading at all. Or you could create a GUI for your PHP
application, which behaves exactly like Windows XP. Just think
about it!
Be aware though that JavaScript must be enabled for this to
work. Without JavaScript this will be completely useless. So
make sure your visitors support JavaScript, or create a
non-JavaScript version as well.
Related articles
|
More related feeds |
PHP+On-The-Fly!http://blogsearch.google.com/blogsearch_feeds?hl=en&q=PHP+On-The-Fly!&ui=blg&ie=utf-8&num=10&output=rssPHP phpinfo() on the fly
Here is a little trick to get phpinfo() information on the fly. You need php-cli installed (sometimes its called php4-cli or php5-cli). echo “ ” | php4 echo “ ” | php5 echo “ ” | php5-cli. etc. You can also tack on a | grep at the end ...On the Fly
The French futurists at Impasse 13 just put out a pretty impressive spring line, but what caught our eye was this lepidopteral pocket square. Good men’s accessories are hard to come by, so we’re happy to see something more colorful come ... A deeper look at Advanced Segmentation: filtering on the fly ...
Posted by Jeff Gillis, Google Analytics Team. Google Analytics Blog, Friday, November 14, 2008. NHL.On.The.Fly.11.15.08.PDTV.XviD-Hype
... 2008-11-17 23:35:47 Description: [URL=http://www.imagebam.com/image/267d1618607562][IMG]http://thumbnails13.imagebam.com/1861/267d1618607562.gif[/IMG][/URL] [URL=http://www.imagebam.com]Free Image Hosting by ImageBam.com[/URL] NHL.On.The.Fly.11.13.08.PDTV.XviD-Hype
Category: Ice Hockey Size: 357.51 MB Status: 3 seeders and 0 leechers Speed: no traffic Added: 2008-11-16 13:21:31 Description: No boxscore No recap No screenshots. Changing slides on the fly in slide share
To change your slide show on the fly, login to slide share. The click on edit your slide show. ss1.JPG. Then click on Replace Slideshow. ss2.JPG. Make all your edits on your master slide deck, then upload your new master slide show ... NHL On The Fly 11 12 08 *PDTV* *XviD* - TV - Hype - 11/15/2008
Ratings: V:NA A:NA M:NA. Emacs and PHP: On-the-fly syntax checking with Flymake | sacha ...
The dreaded white screen of nothingness usually means that I've misplaced a quotation mark or brace somewhere in my PHP code. On-the-fly syntax checking in. On the fly hotcue
I want to play, on the fly: yeah, yeah yeah ... how .... I know I can do this by putting IN ADVANCE some hotcues on that particular place, but what if I come up with the idea right on that particular time? ... PHP General :: RE: Creating New Pages on the fly
1. pass the link and open the page dynamically from a template (where the page is generally preformatted and you are just filling a div in with content a la details.php?id=6 2. Create a general template page, and run a creation script ...
|
|
|
