Simple Guest Book - Ajax tutorial

Prerequisite: knowledge of Javascript, PHP, XHTML

Difficulty: Intermediate

What you learn:

1. Validate form using regular expression
2. Make Ajax calls
3. Display messages when Ajax call Sent and Received

Software to install: WAMP

Simple Guest Book Screenshots

Live Demo –
http://www.fxtremecoder.com/tutorial/simpleguestbook/simpleform.html

SourceFiles –
http://www.fxtremecoder.com/tutorial/simpleguestbook/xml_http.zip

I am not going to tell you how to set up WAMP and how to put all the sourcefiles in to virtual directory. Assumption is that you already know.
Ok let us get started – I have commented most part of the code, I am just highlighting the main points
please open the file simpleform.html and look for the source

A form tag with no action

A button named submit with onclick event to call for a function addForm Elements

If you look for script tag right at the top of the source code you will find the function addForm Elements. The first thing is to validate the form elements

data_added_in_form = validateForm(document.form1);

here “data_added_in_form” receives a boolean value. if you want to validate form use regular expression. They are the best and the easiest way to validate forms. Look for the function validateForm (it requires the input as the document’s current formname)

I have defined 3 variables

1. space
2. alpha
3. regMail

which contains regular expression values.

“test” is the keyword, rather called inbuilt function to validate your form elements with respect to the above 3 regular expression defined

• space.test with validate for any space or blank information
• alpha.test will test for alphanumeric values
• regMail.test will validate for your email id

when the “data_added_in_form” receives the value as true, all form elements value are concatenated to the variable “data”

data =name +”-”+ email +”-”+ comments +”-”+subscribe;

if you have noticed I have used “-”, this is inorder to seperate the data for processing when data is sent.
Once the data is concatenated, we make the ajax call or send a request to the “xml_http.php” by using the function “sendReq()”

http.open(‘get’, ‘xml_http.php?data=’+data + “&date=”+ date);

the above code will send data to xml_http.php, if you notice I have added date along with it so as to avoid browser cache, so everydata which is sent from your browser is unique

So let us take a insight on the what xml_http.php does

$received_value = $_REQUEST['data'];

Here we receive the data which is sent by simpleform.html, after which we seperate the data to useful information by using the keyword “explode” equivalent to “split” in javascript with requires as comparison string, in my case I have used “-” so all data is stored in “$dat_array” as array. we know the order in which we sent, so it the same manner we start putting the values back to variables

• $name =$dat_array[0];
• $email =$dat_array[1];
• $comments =$dat_array[2];

It is up to you, whether you want to put the received information to your database. In my case I am sending the value inorder to display the same on “simpleform.html”

now with the “echo” keyword I just have to pass the result back to “simpleform.html”

Now let us get deeper to understand how we receive the value in to “simpleform.html”

http.onreadystatechange = hndlResponse;

the above line of code will call the function hndlResponse when the “xml_http.php” gives back the result

What does hndlResponse function do?

before we start let us know the various attributes contributing they are

readyState:
the code successively changes value from 0 to 4 that means for “ready”.
status:
200 is ok
404 if the page is not found.
responseXml:
holds a Xml loaded file, DOM’s method allows to extract data.
responseText:
holds loaded data as a string of characters.
onreadystatechange
property activated by events. A function must be assigned to it.

Now we look in to the code again

responsetext = http.responseText;

If you notice I have used “responseText” beacause I need them as string text, if you were to parse XML data use responseXML
Now the response is stored in the variable responsetext

All you need to do is

document.getElementById(‘commentsa’).innerHTML += responsetext;

so the div element “commentsa” receives the html table element and renders in the browser.

This is how you make a simple Guest Book application and one more thing I have left intentionally is that the comments coloumn always remain empty when loaded, use a php code to get data from DB and fill the comments are with the code
document.getElementById(‘commentsa’).innerHTML += responsetext;

If you like this tutorial, do refer to your friends and do make a comment, so that I can improve more and contribute more to the developer’s world

About these ads