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

13 Responses

  1. Frank December 20, 2006 / 9:22 am

    Well nice tutorial for beginners. I just hope you will rewrite your PHP code to something more secure and move the db connection to a separate file.

  2. Chris Poteet December 20, 2006 / 2:22 pm

    You’re right, but I made it simple for beginners.

  3. d3vkit December 21, 2006 / 7:25 am

    \”This is our function that must go right after the form itself\”

    Maybe I\’m wrong, but why right after the function? I know this is for beginners, but if I were a beginner (or more of one, I suppose), I might take this to mean all the time (especially with the italics for emphasis). It\’s much easier to create a js file to include with the function in that, and I think would make things simpler in the long run for n00bs. Maybe in part two you could start by explaining this. Maybe that was the plan all along

    Nice short tutorial.

  4. Rasmus December 21, 2006 / 7:33 am

    Hi Chris

    Agreed – it´s a nice tutorial. But I suggest you warn users, that the php script is not safe per se, in case someone is tempted to use your example code.

    Thanks!

    Raz

  5. Nir Tayeb January 14, 2007 / 5:57 am

    In mootools there is a send function for forms. The send function send the form with Ajax.

    $(‘myForm’).send({update: ‘container’});

  6. Palaniraja February 21, 2007 / 5:42 pm

    Hi all,

    Thanks for the tutorial, but the code in function sendForm() actually has errors.. ;) just change “new ajax” to “new Ajax”

  7. Chris Poteet February 21, 2007 / 6:15 pm

    @Palaniraja: Thanks! Changes made.

  8. Palaniraja February 22, 2007 / 9:59 am

    My pleasure ;)

  9. Mike March 22, 2007 / 7:35 am

    Thanks for your tutorial.
    It really showed how easy AJAX is with mootools. :-)

  10. Steven January 6, 2008 / 8:54 am

    Thankyou for this tutorial. being an expirienced PHP / MySQL coder I could see where you were coming from in the whole script. Thanks again!

Comments are closed. If you have a question please contact me.