JAVASCRIPT

Communicating with the Server of a MySQL Client with AJAX

Looking for a comprehensive tutorial that shows you how to create a MySQL client application with the help of AJAX? Then this is the article you’ve been waiting for! Welcome to the concluding part of the series "Creating a MySQL Client with AJAX." In three parts, this series walks you through the process of building a simple application that allows you to run select, insert, update and delete SQL commands against a given MySQL database table, all from your own browser.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 8

September 12, 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>

All right, at this point I think that the two previous modules that were listed here are clear enough for you to recall how each of them fits into the general structure of this MySQL client application. So what is the next step? Well, as I said in the introduction, the only module that remains to build is the one related to executing queries on the server, in addition to sending back to the client the eventual results returned by SELECT statements.

Want to learn how the last module of the application will be created? Keep on reading.

Next: Running queries on the server: a simple PHP script >>