JAVASCRIPT

Running Queries in the Background with a MySQL Client with AJAX

Are you interested in learning how to query different MySQL databases by using only a web browser as the execution environment? If your answer is yes, then look no further, because you’re in the right place. This is the second part of the series "Creating a MySQL client with AJAX." In three comprehensive tutorials, this series gives you some useful pointers on how to build quickly a MySQL client application that uses AJAX for sending queries in the background.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

September 05, 2006

TABLE OF CONTENTS:

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AJAX-based MySQL Client</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-
8859-1" />
<script language="javascript">
// 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);
}
// 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);
    }
}
// display query results
function displayResult(result){
    var console=document.getElementById('console');
    if(!console){return};
    console.innerHTML='';
    console.innerHTML=result;
}
window.onload=function(){
    // check if browser is DOM compatible
    if(document.createElement&&document.getElementById&&document.
getElementsByTagName){
        // initialize command panel
        initializeCommandPanel();
    }
}
</script>
<style type="text/css">
body {
    padding: 0;
    margin: 2% 0 0 0;
    background: #eee;
}
p{
    font: bold 24px Verdana, Arial;
    color: #000;
    padding: 10px 0 0 0;
    margin: 0;
    text-align: center;
}
form{
    display: inline;
}
#header{
    width: 600px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    background: #ccc url(bg1.gif) center left repeat-x;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
#console{
    width: 590px;
    height: 450px;
    background: #808080;
    border: 1px solid #000;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    font: bold 12px Verdana, Arial;
    color: #fff;
}
#companel{
    width: 600px;
    padding: 5px 0 5px 0;
    margin-left: auto;
    margin-right: auto;
    background: #fc3;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    text-align: right;
}
.comfield{
    width: 507px;
    height: 20px;
    font: bold 12px Verdana, Arial;
    color: #00f;
}
.button{
    width: 75px;
    padding: 2px;
    font: bold 12px Verdana, Arial;
    color: #000;
}
</style>
</head>
<body>
<div id="header"><p>MySQL Client Console</p></div>
<div id="console"></div>
<div id="companel">
<form>
<input type="text" name="query" class="comfield" title="Enter
your SQL commands here" />
<input type="button" name="execute" value="Execute"
class="button" />
</form>
</div>
</body>
</html>

Now that you have available the full listing of this AJAX-based application, feel free to introduce your own modifications to the original code. Fun is already guaranteed!

To wrap up

In this second article of the series, I've shown you the definition of all the JavaScript functions that compose the client-side code of the MySQL application. In this case, both JavaScript-based HTTP requests and server responses were appropriately addressed. I think, therefore, that you shouldn’t have major problems developing a basic script that processes the queries entered by an user.

However, if you don’t have a clear idea of how to achieve this on your own, then you’ll have to wait for the last part, where server-side processing will be covered in detail. See you in the last tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.