Building the Behavioral Layer for a Network Processor with AJAX - Turning query buttons into functional controls

(Page 4 of 5 )

In order to assign multiple “onclick” event handlers to each of the query buttons integrated with the graphical user interface of the application, I’ll define the brand new “initializeControlPanel()” function, which performs this task.

Having explained the capacity required for this new function, have a look at its definition. It is as follows:

// 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='';

            }

           

}

Although the above function seems to be hard to grasp at first glance, the truth is that its logic is very easy to understand. As you can see, the function in question is responsible for assigning an “onclick” event handler to each of the query buttons included with the respective user interface. It also triggers an HTTP request to the “query_processor.php” file each time a button is clicked on.

In addition, you should notice that every time this action is taken, the aforementioned command variable is passed to the web server, in this way indicating to it what type of query should be executed in consequence. Indeed, the previous “initializeControlPanel()” function is pretty straightforward.

Okay, now that you know how the two JavaScript functions that you learned do their things, it’s time to leap forward and see how all the parts of this networking application fit together. This will finish the entire client-side layer of the program would be finished.

So do you want to see how the complete client-side code that belongs to this application looks? Click on the link below and keep reading.

Next: Listing the full client-side code >>
 

More JavaScript Articles
More By Alejandro Gervasio

Comments On: Building the Behavioral Layer for a Network Processor with AJAX

· Over this second article of the series, the complete set of JavaScript functions...   >>> Post your comment now!