Running Queries in the Background with a MySQL Client with AJAX - Putting all the pieces together
(Page 5 of 5 )
As I said before, here is the full source code for the client that corresponds to the MySQL application. Take a look at it:
<!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. |
/ 3 
