Communicating with the Server of a MySQL Client with AJAX - A final review: the MySQL application’s client module
(Page 3 of 4 )
As I promised in the previous section, here is the full code listing that corresponds to the client module of the application. Please take a look at its source code:
<!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 >>
More JavaScript Articles
More By Alejandro Gervasio
