De-Mystifying AJAX

I remember when I first learned of AJAX, and I remember thinking: “I’ll never figure that out.” Well, remember when you never thought you’d learn how to remove the underline on your links with CSS? That proved easier than we thought (we later found out that CSS is an amazingly powerful presentation language). We need to cut through the needless language and get to the meat of AJAX. We don’t need to worry about what the XMLHttpRequest object is at this point. Often designers only need to know enough to duplicate an effect and not the nitty-gritty.

What Is AJAX?

I feel as though a clarification needs to be made. JavaScript effects are sometimes confused to be AJAX. If we toggle an element it is an JS effect, but it is not AJAX (although they can be used together). For an example, the popular website Digg uses both. When you show “buried comments” that is a JS toggle and not AJAX, but when you “digg” a story that is AJAX. AJAX is simply processing a request to the server “asychronously” or “at the same time” as viewing the rest of the page (which saves us a full page refresh).

JavaScript Frameworks

There are many good JavaScript frameworks that have an AJAX function built-in. The most notable are mootools, script.acolo.us, and jQuery. All are viable options, but for this tutorial I will utilize the mootools framework.

Processing A Form w/AJAX

This tutorial covers how to process form inputs with AJAX requests. I also decided that I wanted to return a message to the user upon successful submission. The included ZIP file includes all the necessary code, but I will paste it here to walk you through it. First, we need to include the mootools framework.

Framework Include (in the head)

<script src="js/mootools.js" type="text/javascript"></script>

Form Code

The following code is a simple form with three fields (first/last name, RSVP). Notice the “action” is insert.php; the AJAX must process an external page. The “id” is used to connect the JS function with the form, and the “method” is post. Notice also that the onClick event (on the submit button) is what invokes the function.

<form action="insert.php" id="myForm" method="post"> First Name:
<input name="firstname" type="text" /> Last Name:
<input name="lastname" type="text" /> RSVP: <select name="rsvp"> <option>Select</option> <option value="Accept">Accept</option> <option value="Regret">Regret</option> </select> <input value="Submit" onclick="sendForm()" type="button" /></form>

sendForm() Function (for the AJAX Call)

This is our function that must go right after the form itself. The update option is what will be populated on return from the AJAX call (it will be returned in the PHP file). Be sure to replace the text for the db user name, password, and name.

<script type="text/javascript">  function sendForm(){  new Ajax(\'insert.php\',{postBody:$(\'myForm\'), update: \'container\'}).request(); }  </script>

PHP Insert

This opens our connection the database. Replace the connection parameters with your own (username/password/db name). The last echo statement will be what is returned and filled in the “container” div to let our user know that their request was submitted.

$con = mysql_connect("localhost","<dbusername>","<dbpassword>");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}</dbpassword></dbusername>

mysql_select_db("<dbname>", $con);</dbname>

$sql="INSERT INTO RSVP (firstname, lastname, rsvp)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[rsvp]')";

if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}

echo "Thank You $firstname For Your RSVP!";

mysql_close($con)
?&gt;

Updated DIV

So, after processing the form it should return in the container div: “Thank You [FIRST NAME] For Your RSVP!” Feel free to add some JS effects to make it even prettier!

Download Tutorial Code