Running Queries in the Background with a MySQL Client with AJAX

If you found creating the previous user panel a no-brainer process, then defining the set of JavaScript functions tasked with sending queries typed by the user and displaying the results is a slightly more complex procedure. However, if developing AJAX-based applications is quite familiar to you, the experience shouldn’t present major problems.

First, let me show you the handy “sendHttpRequest()” function, which is responsible for sending all the entered queries to the server. 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);
}

As you can see, the above “sendHttpRequest()” function first creates, in a cross-browser fashion, an HTTP requester object, which is used later to send the query typed by the user. Also, after the corresponding request has been successfully processed, a callback function is called, either for handling a text-based response, that is by using the “responseText” property, or an XML-based result, in this case by utilizing the “responseXML” member.

Right, at this level you know how the application will send the queries entered by the user to the server, once the “Execute” button is clicked on. Therefore, the next step consists of defining the pertinent callback function that processes all the responses received from the server, as well as another one, tasked with initializing the main user panel that you saw in the previous section.

To see how all these tasks will be carried out, keep reading.