Building the Behavioral Layer for a Network Processor with AJAX - Querying an Internet host in the background
(Page 3 of 5 )
As you may have guessed, to query a selected Internet host in the background it’s necessary to define a JavaScript function that allows the use of an HTTP requester object. In this way the corresponding requests can be adequately processed by the web server on its side.
Of course, this task will be performed by the function below, which I named “sendHttpRequest().” Its signature is as follows:
// 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);
}
In this particular case, the above function will send the mentioned HTTP requests via an asynchronous call, using the “GET” method. Additionally, each time a request is triggered, a command variable will be passed via the query string, which will be processed accordingly by the server.
Logically, the reason for using the mentioned variable is simply to provide the server with the ability to determine what type of query must be executed. But I'm getting ahead of myself. Let me show you another relevant JavaScript function, in this case tasked with displaying the results of an eventual query. Its short definition is as follows:
// display command results
function displayCommandResults(results){
var centpanel=document.getElementById('centerpanel');
if(!centpanel){return};
centpanel.innerHTML='';
centpanel.innerHTML=results;
}
As you can see, the previous JavaScript function simply returns the results to the client, once the corresponding query has been executed in the server, in this case using the “responseText” property that belongs to the HTTP requester object in use. For this purpose, the function in question uses the DIV element identified as “centerpanel,” which was discussed adequately in the first part of the series. So far, nothing too hard to grasp, right?
At this point, I have shown you the first pair of JavaScript functions that comprise the behavioral layer of this AJAX-powered networking application. So what’s next? Well, as you’ll recall, I mentioned that each time an HTTP request is sent, a command variable is passed straight to the web server.
In response to this situation, I need to define another brand new function that not only creates the command variable that I referenced before, but also assigns “onclick” event handlers to all the query buttons included in the corresponding front-end, developed in the preceding article.
To learn how all these tasks will be carried out, please jump ahead and read the following section.
Next: Turning query buttons into functional controls >>
More JavaScript Articles
More By Alejandro Gervasio
