Building the Behavioral Layer for a Network Processor with AJAX - Listing the previous client-side code of the networking application
(Page 2 of 5 )
Before I define all the JavaScript functions that comprise the behavioral layer of the networking application in question, let me first list its complete client-side code, as originally defined in the first part of the series.
Here is the corresponding code listing:
<!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>
</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>
In this case, I won’t bore you with irrelevant details concerning the client-side code listed above. The only thing to stress here (just in case you haven’t read the first tutorial), is that the previous file is tasked with displaying the simple graphical interface that allows users to send queries to a selected Internet host. Quite simple, right?
Now that you understand the functionality of the previous (X)HTML file, let me go one step further and show you the first two JavaScript functions included with this networking application. These functions will take care of sending out queries in the background and displaying their eventual results in the client.
To learn how this pair of JavaScript functions will be defined, please read the following section.
Next: Querying an Internet host in the background >>
More JavaScript Articles
More By Alejandro Gervasio
