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:

Obviously, this control area will let users enter different SQL statements, in order to query the selected database, once the login process has been successfully performed. In accordance with these requirements, the web page responsible for sending queries to the database, as well for displaying the corresponding results, is depicted by the following screen shot:

As you can see, the above image not only shows the look and feel that I plan to provide to the main panel, but also demonstrates how this interface will work. Basically, the panel in question is split up in two main sections, where the upper one will display the results outputted by a particular query (when applicable), while the lower one will contain the input box required for typing SQL statements.

Okay, since you’ve already seen how the main user panel will look, it’s time to translate the previous screen shot to functional markup code. That said, here is the complete (X)HTML that renders the main area of the application:

<!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" />
<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>

For this case in particular, I decided to apply my own styles to the different sections of the main panel. If you’re feeling more creative than I was, you can quickly modify the above CSS declarations and create a new look and feel on your own.

So far, you learned how to build the main area of the application, which will allow a user to enter different queries and send them straight to the server. Also, when using SELECT statements, the user will be able to see the corresponding rows returned by these queries. However, the complete group of JavaScript functions responsible for actually sending HTTP requests and for displaying the respective server responses hasn't yet been defined.

Do you want to see the signature for each of these functions? If your answer is a resounding yes, then go ahead and read the following section.

Next: Working with HTTP requester objects >>