Running Queries in the Background with a MySQL Client with AJAX

In order to continue defining the rest of the JavaScript functions that integrate the MySQL client, first I’ll create a new one, called “initializeCommandPanel()”. As its name suggests, all this function does is set up some useful initialization tasks, such as placing the mouse cursor inside the command box when the web page is loaded, as well as attaching the previous “sendHttpRequest()” function to the respective “Execute” button.

Having explained all the tasks performed by the “initializeCommandPanel()” function, below you can see how it looks:

// initialize command panel
function initializeCommandPanel(){
    // get 'query' field
    var query=document.getElementsByTagName('form')[0].elements
[0];
    if(!query){return};
    query.focus();
    // get 'execute' button
    var execbtn=document.getElementsByTagName('form')[0].elements
[1];
    if(!execbtn){return};
    // send http request when 'execute' button is clicked on
    execbtn.onclick=function(){
        // send request & execute query on MySQL server
        sendHttpRequest('mysql_server.php?
query='+query.value,'displayResult',false);
    }
}

Indeed, one of the most important processes that this function performs is with reference to triggering an HTTP request to the “mysql_server.php” file each time the “Execute” button is clicked. Please notice how every time this file is requested, the value of the query entered in the command box is passed to the mentioned file, in order to be processed on the server. Now, are you starting to understand how a given database can be queried by using a comprehensive application? I bet you do!

Okay, now that you understood how the “initializeCommandPanel()” function works, let me show you the signature of the other one, in this case called “displayResult()”, which is responsible for displaying all the results returned by a specific query. Its definition is as follows:

// display query results
function displayResult(result){
    var console=document.getElementById('console');
    if(!console){return};
    console.innerHTML='';
    console.innerHTML=result;
}

If you were thinking that the signature of the above function was much longer, you were wrong! As you can see, all this function does is first receive the response from the server (in this case obtained by the popular “responseText” property that belongs to the current requester object), then clear the DIV identified as "console," and finally display the results returned by the executed query. Simple and efficient, right?

At this stage, I have defined the complete set of JavaScript functions that make up the client-side layer of the MySQL application. Now, it’s time to put all the pieces together, that is the respective JavaScript code and the (X)HTML markup, and see how each of them fit into each other.

To see how the full client-side code of the application looks, please read the following section.