Building the Behavioral Layer for a Network Processor with AJAX - Listing the full client-side code
(Page 5 of 5 )
In accordance with the explanations that I gave you in the previous section, below I included the complete client-side code that corresponds to this AJAX-based networking application. Study the code listing, please:
<!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>
That’s all the client-side code that you need to have a near-to-completion AJAX networking processor! As usual, feel free to incorporate your own changes to the previous (X)HTML file so you can modify the visual appearance of application’s user interface. I’m sure you’ll have a good time!
Final thoughts
Over this second installment of the series, I demonstrated in a few easy steps how to create the JavaScript functions which are needed for sending out queries in the background and displaying the results. As you can see, the AJAX-based network application is almost finished.
Nevertheless, I saved the best for last. In the final article I’ll show you how to integrate all the client-side code that you have learned so far with a full-featured PHP networking class to turn the program into a completely-functional piece of software. You won't want to miss it.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
