Introduction PHP can be used for a lot of different things, and is one of most powerful scripting languages available on 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 connection with web server as soon as it has received all 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 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 server needs to be opened, and this means that browser goes to a new page, losing 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 page. The basis behind this new way is a JavaScript component called XML HTTP Request Object. See http://jibbering.com/2002/4/httprequest.html for more information about 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 date/time.
Example 1 First, copy 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 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 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 code below, and paste it in a file called 'client1.php'. Please note though that you need to edit line that says 'http://www.yourdomain.com/server1.php' to 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>