Completing a Network Processor with AJAX - Refreshing a previous topic: listing the application's full client-side code (Page 2 of 5 )
As a first step to coding the PHP class that actually does all the networking stuff, first I'd like to list the complete client-side code that corresponds to this AJAX-based application as it was initially defined in the two previous articles of the series.
Doing so, you'll have a much better idea of how the PHP class that I'm going to create later on fits with the client module. Therefore, here is the full code listing that I referenced before:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso- <title>AJAX-based Networking Processor</title> <style type="text/css"> body{ padding: 0; margin: 0; background: #fff; } h1{ font: bold 24px Arial, Helvetica, sans-serif; color: #000; text-align: center; margin: 10px; } #maincontainer{ width: 500px; height: 400px; background: #eee; padding: 5px; margin-left: auto; margin-right: auto; border: 1px solid #000; } #paramcontainer{ padding: 5px; margin-bottom: 5px; background: #f5ebb1; font: bold 12px Arial, Helvetica, sans-serif; color: #000; border: 1px solid #999; } #leftpanel{ float: left; width: 100px; height: 350px; padding: 5px; background: #f5ebb1; font: bold 12px Arial, Helvetica, sans-serif; color: #000; border: 1px solid #999; } #centerpanel{ float: left; width: 254px; height: 350px; padding: 5px; margin-left: 5px; background: #ccc; overflow: auto; font: bold 12px Arial, Helvetica, sans-serif; color: #000; border: 1px solid #999; } #rightpanel{ float: right; width: 100px; height: 350px; padding: 5px; background: #f5ebb1; font: bold 12px Arial, Helvetica, sans-serif; color: #000; border: 1px solid #999; } .databox{ width: 348px; font: normal 12px Arial, Helvetica, sans-serif; color: #000; } .controlbutton{ width: 100px; margin: 3px 0 3px 0; font: normal 12px Arial, Helvetica, sans-serif; color: #000; text-align: center; } </style> <script language="javascript"> // send http requests function sendHttpRequest(url,callbackFunc,respXml){ var xmlobj=null; try{ xmlobj=new XMLHttpRequest(); } catch(e){ try{ xmlobj=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ alert('AJAX is not supported by your browser!'); return false; } } xmlobj.onreadystatechange=function(){ if(xmlobj.readyState==4){ if (xmlobj.status==200){ respXml?eval } } } // open socket connection xmlobj.open('GET',url,true); // send http header xmlobj.setRequestHeader('Content-Type','text/html; // send http request xmlobj.send(null); } // display command results function displayCommandResults(results){ var centpanel=document.getElementById('centerpanel'); if(!centpanel){return}; centpanel.innerHTML=''; centpanel.innerHTML=results; } // initialize control panel function initializeControlPanel(){ var form=document.getElementsByTagName('form')[0]; if(!form){return}; // assign 'onclick' event handlers to control buttons if(!form.elements[1]){return}; form.elements[1].onclick=function(){ if(!form.elements[2]){return}; form.elements[2].onclick=function(){; if(!form.elements[3]){return}; form.elements[3].onclick=function(){ if(!form.elements[4]){return}; form.elements[4].onclick=function(){ if(!form.elements[5]){return}; form.elements[5].onclick=function(){ if(!form.elements[6]){return}; form.elements[6].onclick=function(){ if(!form.elements[7]){return}; form.elements[7].onclick=function(){ if(!form.elements[8]){return}; form.elements[8].onclick=function(){ if(!form.elements[9]){return}; form.elements[9].onclick=function(){ if(!form.elements[10]){return}; form.elements[10].onclick=function(){ if(!form.elements[11]){return}; form.elements[11].onclick=function(){ if(!form.elements[12]){return}; form.elements[12].onclick=function(){ var centpanel=document.getElementById('centerpanel'); if(!centpanel){return}; centpanel.innerHTML=''; } } // execute 'initializeControlPanel()' window.onload=function(){ if(document.getElementById && document.getElementsByTagName && document.createElement){ initializeControlPanel(); } } </script> </head> <body> <h1>AJAX-BASED NETWORKING PROCESSOR</h1> <div id="maincontainer"> <form> <div id="paramcontainer"> Host Name/ IP Address <input type="text" name="data" </div> <div id="leftpanel"> <input type="button" name="host" value="Host to IP" Hostname to IP <input type="button" name="ip" value="IP to Host" <input type="button" name="iplist" value="IP List" <input type="button" name="ping" value="Ping" <input type="button" name="ipconfig" value="IP Config" <input type="button" name="netstat" value="Netstat" </div> <div id="centerpanel"></div> <div id="rightpanel"> <input type="button" name="mxrec" value="MX Records" <input type="button" name="servports" value="Service Ports" class="controlbutton" title="Retrieve service ports"></input> <input type="button" name="servnames" value="Service Names" class="controlbutton" title="Retrieve service names"></input> <input type="button" name="scanport" value="Scan Port 80" class="controlbutton" title="Scan port 80"></input> <input type="button" name="whois" value="NS Records" <input type="button" name="reset" value="Clear Panel" </div> </form> </div> </body> </html>
All right, now I'm assuming that the above file is already familiar to you, thus I won't review the that you learned in prior articles of the series. Instead, I recommend that you visit the following section and see how the PHP class that interacts with the previous file will be created by a few comprehensive steps.
Please enable JavaScript to view the comments powered by Disqus. blog comments powered by 
JavaScript 
Building the Behavioral Layer for a Network Processor with AJAX
