Ajax tutorial for using ajax with php in a website

For using Ajax in a website you need to have a basic understanding of HTML, CSS and JavaScript. Though, I have tried to provide this tutorial in a way that even a novice to these languages can understand a bit and know how to use Ajax in websites.
By using Ajax in a website, we give it the ability to run a query against a database (for example) and change the display actively all without having to refresh the page. I’m sure, after reading this ajax tutorial you would know how social media sites post comments and, Gmail sends your emails without a page refresh. You can learn basics of Ajax in the ‘see similar stuff’ at the bottom of the page.
In this tutorial we’ll be using Ajax with php and assumed that you have a php enabled server – either a remote server or a local server within your system.
Note:: While reading the Ajax tutorial code, just follow the numbers against the LOC’s to keep track of control transfer. Initially, it might look a bit confusing but once you execute the code, it’ll get much easier to understand.
Let’s start, lets check how this will work

Code for the comment form

This is Comment form where name, email and comment is entered and sent to the server by JavaScript file through Ajax Object created within it.

<form name=’form’>
Name:<input type=’text’ name=’uname’ style=’width:300px’>Enter Name—1
Email:<input type=’text’ name=’uemail’ style=’width:300px’>Enter Email—1
Comment:<textarea type=’password’ name=’udata’ cols=40 rows=4></textarea> Enter Comment—1
<input type=’button’ onclick=’post_it()’ value=’Post Comment’> Button instead of Submit to prevent page submission. Calls JavaScript function post_it()—2
<p id=’display’></p> This is where Ajax text data will be displayed after receiving from server—9

</form>
<style>/*you can put the stylesheet code here (optional) */</style>

JavaScript code

This is the client side JavaScript code which sends Ajax Request to processcomment.php at the server. Ajax Object will be created within this JavaScript code.

<script language=’Javascript’>
function post_it() Function called when button is clicked—3
{
document.getElementById(‘display’).innerHTML=”<span style=’color:#57A5FE;font-weight:bold;’>Processing…</span><img src=’../blogdata/loader2.gif’>”; Animation while data is processed (entire duration from sending till receiving data). Visible in ‘display’ paragraph

var uname=form.uname.value; Get entered name in form

var uemail=form.uemail.value; Get entered email in form

var udata=form.udata.value; Get entered comment in form

if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest(); Ajax Object for IE7+, Firefox, Chrome, Opera, Safari—4
}
else
{
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); Ajax Object for IE6, IE5—4
}
xmlhttp.onreadystatechange=function() Function to check the status of Ajax data
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) Status when data is sent back from server

{
document.getElementById(‘display’).innerHTML=xmlhttp.responseText; Receiving Ajax text data back from processcomment.php, displayed in ‘display’ paragraph—8
}
}
xmlhttp.open(“GET”,”../blogdata/processcomment.php?uname=”+uname+”&uemail=”+uemail+”&udata=”+udata,true); Sending data to processcomment.php at server. It’s recommended to provide absolute path to processcomment.php file—5

xmlhttp.send(null);
}
</script>

Server side php Code

This is server side processcomment.php file that processes the Ajax request sent by the client.

<div id=’comres’>
<img src=’../img/madsmall.jpg’ style=’float:left’>
<?php
echo “<span style=’color:#57A5FE;font-weight:bold;’>”.$_GET['uname'].” says </span>”.$_GET['udata']; Fetching and Sending data back to browser—6
sleep(1); 1 sec wait to reduce server load—7
?>
</div>

Code explained

1. In this ajax tutorial, the form first takes your name, email and comment.
2. To prevent page refresh, we don’t submit the form and would use button instead. Button has an onclick event attached to it.
3. When a button is clicked, the data(username, password, comment) is sent to post_it() JavaScript function.
4. In post_it(), we create an Ajax object that carries data between server and the browser. Syntax is different for IE and other browsers. Animation starts to appear now.
5. The Ajax object carries data (name, email and comment) to a file called processcomment.php.
6. Processcomment.php processes the data and returns it back to the browser. Social networking sites and other websites saves this data to their database.
7. We put a wait for 1 seconds to reduce server load and allow animation to be visible for at least 1 second.
8. Data received from processcomment.php.
9. Received data displayed in ‘display’ paragraph.

Download source code to use ajax in your website