PHP Based Test of Getting Website Info Dynamically Using Ajax
To learn the most from these 6 test pages, first test each of the test scripts below, and then read the Info on each of these tests.
- test1.php: getting website info dynamically
- test2.php: getting website thumbnails dynamically
- test3.php: getting website info and thumbnails dynamically using one link per URL
- test4.php: getting website info and thumbnails dynamically using separate links per URL
- test5.php: getting website info dynamically using Ajax
- test6.php: getting website info and thumbnails dynamically using separate links per URL and Ajax
- INFO on test1.php: getting website info dynamically
- INFO on test2.php: getting website thumbnails dynamically
- INFO on test3.php: getting website info and thumbnails dynamically using one link per URL
- INFO on test4.php: getting website info and thumbnails dynamically using separate links per URL
- INFO on test5.php: getting website info dynamically using Ajax
- INFO on test6.php: getting website info and thumbnails dynamically using separate links per URL and Ajax
For more on getting website info dynamically see INFO on test1.php: getting website info dynamically.
This test shows the viability of the use of the various PHP functions to get info dynamically from websites, on the fly. It also shows that the script catfight has been stopped AND the page reloads are gone—finally! As we promised, we've got your back! There's no more flicker, reloading, or anything else bothersome. It's smooth as a baby's behind. And all because Ajax came to the rescue.
What is Ajax? AJAX means Asynchronous JavaScript and XML, but it isn't a programming language. It is a new way to use existing languages. When one uses Ajax, he is exchanging data with a server and updating parts of a web page, but without reloading the whole page! For a great example of Ajax in action, see http://www.w3schools.com/Ajax/ajax_aspphp.asp. Happily, one need not learn XML or even XHTML to use Ajax, although there's a whole ton one can do if one does learn those. But those are not of interest to us currently so let's stay with the problem at hand. Incidentally, Ajax can be on regular HTML pages—you need not go to XML or XHTML.
Re-run test1.php: getting website info dynamically and re-read INFO on test1.php: getting website info dynamically so you see what we did to get the website info into the boxes. When you run test5.php: getting website info dynamically using Ajax you see the huge difference avoiding page reloads makes on performance. But you need to focus on what exactly we did differently in test5 that didn't happen in test1.
Here's the deal: to use a PHP script on the same page as the rest of the code, we're stuck with either POSTs and page reloads or GETs and page reloads. Neither will work if we want smoothness. We need an external PHP script and Ajax to avoid the reloads. Notice that the test1 page reloads itself, sending the URL info to the PHP GETs on its own page. The test5 script sends us not to the PHP script via page reload but to the Ajax routine, getmeta(), which is JavaScript so it can do DHTML with no reload. The getmeta() script vanishes the info DIV (by using innerHTML for replacing the contents with a space and running the metano() routine prior to running the getmeta() script) if the URL is "0" but if it's valid, it sends an xmlhttp request to see if the server is ready, and when it is, it sneaks into the PHP routine with the URL and runs the script, getting an xmlhttp response. It uses innerHTML to stick this response to the xmlhtml request into the info DIV.
In summary, then: To update boxes using page reloads and on-page PHP is okay only if the reloads will be infrequent and the changes minor. Otherwise, use Ajax and have your PHP script be an external file and you can change page data with no unsightly page reloads. The reason we think of it as "exchanging data with a server" is that we send a bit of data from the browser, like a URL, to the script on the server and the script returns a data response to our browser for us to use to update our page using innerHTML. It's a simple enough concept, made possible only because it's what Ajax was designed to do, using xmlhtml commands.
Note that the final HTML code below is the displaying of the links themselves. This test page worked to prove that getting website info dynamically—on the fly—is viable. If this was a regular website directory, it would of course be using MySQL databases and other elements of the CMS configuration protocol, not a few sample links.
<html>
<head>
<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left}
p, li {font:13px Verdana; color:black;text-align:left;margin-top:0.2em;margin-bottom:0}
h1 {font:bold 28px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
.d {position:absolute; left:700px; width:300px; margin:0; padding:10px; background-color:#ddd; border:1px solid #000; font: 11px Verdana;}
.e {position:absolute; left:700px; width:300px; margin:0; padding:10px; background-color:transparent; border:none; font: 11px Verdana;}
.f {position:absolute; left:330px; width:350px; top:70px; padding:10px; background-color:#eee; border:1px solid black; font: 13px Verdana;}
.b {font:bold 13px Verdana;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function metano(){e=document.getElementById('k');e.style.display='none';}
function metayes(){e=document.getElementById('k');e.style.display='block';}
var f = "0";
var q = 0;
var yy = 0;
var x = 0;
var y = 0;
var ys = "0";
var url = "0";
var yss = "0";
var urls=new Array("http://www.theliquidateher.com/","http://www.css-resources.com/","http://www.mcsii.biz/", "http://www.aglasshalffull.org/","http://www.bicycleclothing.com/", "http://fireprotection.name/","http://www.criegergoodwin.com/",
"http://4homedesign.wordpress.com/", "http://www.aglasshalffull.org/webhatchers/webhatchers.html",
"http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm");
mactest=(navigator.userAgent.indexOf("Mac")!=-1) //My browser sniffers
Netscape=(navigator.appName.indexOf("Netscape") != -1)
msafari=(navigator.userAgent.indexOf("Safari")!= -1)
wsafari=0; if(!mactest&&msafari){wsafari=1;msafari=0}
is_opera = 0; if(window.opera){is_opera=1}
is_ie_mac = 0; is_ie=0;if(document.all){is_ie=1}
if(is_ie&&mactest){is_ie_mac=1}
function startmouse() {if(Netscape) {document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=getCoords;}
function getCoords(e){
if (!e) var e = window.event;
if (e.pageX){x = e.pageX;y = e.pageY;}
else if (e.clientX){x = e.clientX + document.body.scrollLeft;y = e.clientY + document.body.scrollTop;}
if (y<115&&y>85){yy=y;q=0;}else{q=parseInt((y-80)/32);yy=y-q*32;}
if (y>(80+32*urls.length)){return;}
if (x<670&&x>340&&yy>85&&yy<100&&f=="0"){f="1";yss=y-20;url=urls[q];e=document.getElementById("k");e.style.top=yss+"px";metayes();getmeta(url,f);}
if ((x>670||x<340||yy<85||yy>100)&&f=="1"){f="0";yss=y-20;url="0";e=document.getElementById("k");e.style.top=yss+"px";metano();getmeta(url,f);}
}
function getmeta(url,f){
if (url=="0"){ if (document.getElementById("k")){document.getElementById("k").innerHTML=" ";return;}}
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("k").innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","meta.php?url="+url+"&f="+f,true);
xmlhttp.send();
}
// -->
</script>
</head>
<body onLoad="startmouse(),metano()">
<div id='k' class='d' style='top:70px'></div>
<div class='f'>
<a HREF="http://www.theliquidateher.com/" target="_blank">http://www.theliquidateher.com</a>
<BR><BR><a HREF="http://www.css-resources.com/" target="_blank">http://www.css-resources.com</a>
<BR><BR><a HREF="http://www.mcsii.biz/" target="_blank">http://www.mcsii.biz</a>
<BR><BR><a HREF="http://www.aglasshalffull.org/" target="_blank">http://www.aglasshalffull.org</a>
<BR><BR><a HREF="http://www.bicycleclothing.com/" target="_blank">http://www.bicycleclothing.com</a>
<BR><BR><a HREF="http://fireprotection.name/" target="_blank">http://fireprotection.name</a>
<BR><BR><a HREF="http://www.criegergoodwin.com/" target="_blank">http://www.criegergoodwin.com</a>
<BR><BR><a HREF="http://4homedesign.wordpress.com/" target="_blank">http://4homedesign.wordpress.com</a>
<BR><BR><a HREF="http://www.aglasshalffull.org/webhatchers/webhatchers.html" target="_blank">http://www.aglasshalffull.org/webhatchers/webhatchers.html</a>
<BR><BR><a HREF="http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm" target="_blank">http://theliquidateher.com/squirrel-valley/squirrel-valley-railroad-demo.htm</a>
</div>
</body>
</html>