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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<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
(callbackFunc+'(xmlobj.responseXML)'):eval
(callbackFunc+'(xmlobj.responseText)');
}
}
}
// open socket connection
xmlobj.open('GET',url,true);
// send http header
xmlobj.setRequestHeader('Content-Type','text/html;
charset=UTF-8');
// 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(){
sendHttpRequest('query_processor.php?data='
+document.getElementsByTagName('form')[0].elements[0].value
+'&command=host','displayCommandResults')};
if(!form.elements[2]){return};
form.elements[2].onclick=function(){
sendHttpRequest('query_processor.php?data='
+document.getElementsByTagName('form')[0].elements[0].value
+'&command=ip','displayCommandResults')};
if(!form.elements[3]){return};
form.elements[3].onclick=function(){
sendHttpRequest('query_processor.php?data='
+document.getElementsByTagName('form')[0].elements[0].value
+'&command=iplist','displayCommandResults')};
if(!form.elements[4]){return};
form.elements[4].onclick=function(){
sendHttpRequest('query_processor.php?data='
+document.getElementsByTagName('form')[0].elements[0].value
+'&command=ping','displayCommandResults')};
if(!form.elements[5]){return};
form.elements[5].onclick=function(){
sendHttpRequest('query_processor.php?data='
+document.getElementsByTagName('form')[0].elements[0].value
+'&command=ipconfig','displayCommandResults')};
if(!form.elements[6]){return};
form.elements[6].onclick=function(){
sendHttpRequest('query_processor.php?data='
+document.getElementsByTagName('form')[0].elements[0].value
+'&command=netstat','displayCommandResults')};
if(!form.elements[7]){return};
form.elements[7].onclick=function(){
sendHttpRequest('query_processor.php?data='
+document.getElementsByTagName('form')[0].elements[0].value
+'&command=mxrecords','displayCommandResults')};
if(!form.elements[8]){return};
form.elements[8].onclick=function(){
sendHttpRequest('query_processor.php?data='
+document.getElementsByTagName('form')[0].elements[0].value
+'&command=serviceports','displayCommandResults')};
if(!form.elements[9]){return};
form.elements[9].onclick=function(){
sendHttpRequest('query_processor.php?data='
+document.getElementsByTagName('form')[0].elements[0].value
+'&command=servicenames','displayCommandResults')};
if(!form.elements[10]){return};
form.elements[10].onclick=function(){
sendHttpRequest('query_processor.php?data='
+document.getElementsByTagName('form')[0].elements[0].value
+'&command=scanport','displayCommandResults')};
if(!form.elements[11]){return};
form.elements[11].onclick=function(){
sendHttpRequest('query_processor.php?data='
+document.getElementsByTagName('form')[0].elements[0].value
+'&command=nsrecords','displayCommandResults')};
if(!form.elements[12]){return};
form.elements[12].onclick=function(){
var centpanel=document.getElementById('centerpanel');
if(!centpanel){return};
centpanel.innerHTML='';
}
}
// execute 'initializeControlPanel()'
// function when web page is loaded
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"
class="databox"></input>
</div>
<div id="leftpanel">
<input type="button" name="host" value="Host to IP"
class="controlbutton" title="Covert Hostname to IP
address"></input>
<input type="button" name="ip" value="IP to Host"
class="controlbutton" title="Convert IP address to
Hostname"></input>
<input type="button" name="iplist" value="IP List"
class="controlbutton" title="Retrieve IP list"></input>
<input type="button" name="ping" value="Ping"
class="controlbutton" title="Execute ping command"></input>
<input type="button" name="ipconfig" value="IP Config"
class="controlbutton" title="Execute ipconfig command"></input>
<input type="button" name="netstat" value="Netstat"
class="controlbutton" title="Execute netstat command"></input>
</div>
<div id="centerpanel"></div>
<div id="rightpanel">
<input type="button" name="mxrec" value="MX Records"
class="controlbutton" title="Retrieve MX records"></input>
<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"
class="controlbutton" title="Retrieve NS records"></input>
<input type="button" name="reset" value="Clear Panel"
class="controlbutton" title="Clear display panel"></input>
</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.
Next: Performing real networking tasks on the server: defining the QueryProcessor PHP class >>
More JavaScript Articles
More By Alejandro Gervasio
