The Easy Ajax Implementation

For our study case, we’re going to make a simple voting/rating booth application. We’re going to make 2 files, one for the front-end (vote.php, handle the user interface) and one for the back-end (sendVote.php, handle the data saving and retrieval).

First, here’s the code for vote.php (we’ll explain this later)

[php]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[/php]

And the second file, sendVote.php

[php]< ?php
echo $_GET['value'];
?>[/php]

Before we continue, let’s try it first by calling vote.php from your web browser. Notice that after you select the rating and hit Vote button, the rating you choose will be displayed on the texbox below.

Live Demo: http://www.funponsel.com/dev/ajax_vote/vote.php

In this first sample, the process is really simple. We haven’t process the rating value yet (no database involved), instead, we just send it back as an output for the back-end process. When you hit the Vote button, the JavaScript function, updateVote() will be called. In this stage, voteId and voteValue (rating value) are taken from the form and sent to sendVote.php as a parameter through XMLHttpRequest object.

The purpose of handleHttpResponse() function is to handle any change on the request status. When the status equal to 4 (readyState == 4), then the request process is over. Or it means that the back-end process already return output. After that, return output is taken from ResponseText attribute and then displayed on the textbox.

As already mention, there is no interaction with the database yet. Hey, we haven’t even create the database ) sendVote.php will simply take the parameter and return the value right away (echo $_GET['value'];.

What about getHTTPObject() function? Don’t bother with it The point is almost the same as what we’ve learned before on the first part, but with a little bit more twist ) So let’s just focus on the XMLHttpRequest process

Notice that in this first example we only use XHTML, a simple DOM, and XMLHttpRequest. Just like what I already said before on the first part. No need to worry about learning Ajax on the hard way (with all the complexity of XMLDOM and CSS), as the easy way already exists )

On the next page, we will modify our code above and start communication with the database.

Pages: 1 2 3