|
Introduction PHP can be used for a lot of differentthings, and is one of the most powerful scripting languagesavailable on the web. Not to mention it's extremely cheap andwidely used. However, one thing that PHP is lacking, and in factmost scripting languages are, is a way to update pages inreal-time, without having to reload a page or submit a form.
The internet wasn't made for this. The web browser closes theconnection with the web server as soon as it has received allthe data. This means that after this no more data can beexchanged. What if you want to do an update though? If you'rebuilding a PHP application (e.g. a high-quality contentmanagement system), then it'd be ideal if it worked almost likea native Windows/Linux application.
But that requires real-time updates. Something that isn'tpossible, or so you would think. A good example of anapplication that works in (almost) real-time is Google's GMail. Everything isJavaScript powered, and it's very powerful and dynamic. In fact,this is one of the biggest selling-points of GMail. What if youcould 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 theprevious page. For a long while now, web developers have beenusing tricks to get around this, like using a 1x1 iframe, wherea new PHP page is loaded, but this is far from ideal.
Now, there is a new way of executing a PHP script without havingto reload the page. The basis behind this new way is aJavaScript component called the XML HTTP Request Object. See http://jibbering.com/2002/4/httprequest.html for more information aboutthe component. It is supported in all major browsers (InternetExplorer 5.5+, Safari, Mozilla/Firefox and Opera 7.6+).
With this object and some custom JavaScript functions, you cancreate some rather impressive PHP applications. Let's look at afirst example, which dynamically updates the date/time.
Example 1 First, copy the code below and save it in afile called 'script.js': var xmlhttp=false; /*@cc_on @*//*@if (@_jscript_version >= 5) // JScript gives usConditional 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 = newXMLHttpRequest(); }
function loadFragmentInToElement(fragment_url, element_id) { varelement = 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 copythe 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 filecalled 'client1.php'. Please note though that you need to editthe line that says 'http://www.yourdomain.com/server1.php' tothe correct location of server1.php on your server. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Strict//EN"> <html> <head><title>Example 1</title> <scriptsrc="script.js"type="text/javascript"></script>
<script type="text/javascript"> functionupdatedate() {loadFragmentInToElement('http://www.yourdomain.com/server1.php','currentdate'); }
</script> </head>
<body> The current date is<spanid="currentdate"><?php echo date("l dS of FY h:i:s A"); ?></span>.<br /><br />
<input type="button" value="Update date"OnClick="updatedate();" /> </body>
</html> Now go tohttp://www.yourdomain.com/client1.php and click on the buttonthat says 'Update date'. The date will update, without the pagehaving to be reloaded. This is done with the XML HTTP Requestobject. 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 thefollowing example, the visitor can enter two numbers, and theyare added up by PHP (and not by JavaScript). This shows the truepower of PHP and the XML HTTP Request Object.
This example uses the same script.js as in the first example, soyou don't need to create this again. First, copy the code belowand 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 afile called 'client2.php'. Please note though that you need toedit 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.01Strict//EN"> <html> <head><title>Example 2</title> <scriptsrc="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. Theanswer is calculated by a PHP script, and<em>not</em> with JavaScript. What's the advantageto this? You can execute server-side scripts (PHP) withouthaving to refresh the page.<br /><br />
<input type="text" id="num1"size="3" /> + <input type="text"id="num2" size="3" /> = <inputtype="text" id="answer" size="5"/>
<input type="button" value="Calculate!"OnClick="calc();" /> </body>
</html> When you run this example, you can add uptwo numbers, using PHP and no reloading at all! If you can't getthis example to work, then have a look on http://www.phpit.net/demo/php%20on%20the%20fly/client3.phpto see the example online.
Any Disadvantages...? There are only two realdisadvantages to this system. First of all, anyone who hasJavaScript turned off, or their browser doesn't support the XMLHTTP Request Object will not be able to run it. This means youwill have to make sure that there is a non-JavaScript version,or make sure all your visitors have JavaScript enabled (e.g. anIntranet 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 anydynamic content in there. But if you're creating a PHPapplication (and not a PHP website), then bookmarks are probablynot very useful anyway.
Conclusion As I've shown you, using two very simpleexamples, it is entirely possible to execute PHP scripts,without having to refresh the page. I suggest you read moreabout the XML HTTPRequest Object and its capabilities.
The things you can do are limitless. For example, you couldcreate an extremely neat paging system, that doesn't requirereloading at all. Or you could create a GUI for your PHPapplication, which behaves exactly like Windows XP. Just thinkabout it!
Be aware though that JavaScript must be enabled for this towork. Without JavaScript this will be completely useless. Somake sure your visitors support JavaScript, or create anon-JavaScript version as well.
|
|
