Simple Ajax Example

In this tutorial we are going to develop a very simple Ajax Example. This simple Ajax example code will help you in understanding the core concept of Ajax.

In this tutorial we are developing a simple Ajax example application that sends the user name on the server without refreshing the page.

It also process the server response and then display the response text on the same page.

This application is using the XMLHttpRequest object for making a call to the server side script.

We are using PHP script to process the request.

About Simple Ajax Example

This example will present a form to the user and ask the user to enter his/her name. After entering the name user can press the "Say Hello" button. Then an Ajax call will send the user name on the server to a php file. The php file will return greeting message with the current server date and time. This example will show you how to make Ajax call to a server-side script and then get the data from the server.

Demo: Simple Ajax Example demo

The application will display the form. User can then enter then name and press the "Say Hello" button as shown below in the screen shot.

Enter the name and press the Say Button. Application should send the user name on server and then display the response as shown below:

Writing Simple Ajax Example

We have to write the required JavaScript code to make the server call ( to call sayhello.php) by passing the user name. Here is the complete code of the simpleajaxexampledemo.html file:

<html>
    <head>
    <title>Simple Ajax Example</title>
    <script language="Javascript">
    function postRequest(strURL) {
	var xmlHttp;
          if (window.XMLHttpRequest) { // Mozilla, Safari, ...
		 var xmlHttp = new XMLHttpRequest();
	    }else if (window.ActiveXObject) { // IE
		var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	      }
	    xmlHttp.open('POST', strURL, true);
	    xmlHttp.setRequestHeader
              ('Content-Type', 'application/x-www-form-urlencoded');
		xmlHttp.onreadystatechange = function() {
	if (xmlHttp.readyState == 4) {
	       updatepage(xmlHttp.responseText);
	      }
	   }
	 xmlHttp.send(strURL);
        }
     function updatepage(str){
	document.getElementById("result").innerHTML = 
            "<font color='red' size='5'>" + str + "</font>";;
        }
   function SayHello(){
	var usr=window.document.f1.username.value;
	var rnd = Math.random();
	var url="sayhello.php?id="+rnd +"&usr="+usr;
	postRequest(url);
        }
  </script>
  </head>
  <body>
   <h1 align="center"><font color="#000080">Simple Ajax Example</font></h1>
   <p  align="center"><font color="#000080">Enter your name and then press 
   "Say Hello Button"</font></p>
 <form name="f1">
       <p align="center"><font color="#000080">&nbsp;
		Enter your name: <input type="text" name="username" id="username">
		<input value="Say Hello" type="button" 
       onclick='JavaScript:SayHello()' name="showdate"></font></p>
       <div id="result" align="center"></div>
     </form>
 <div id=result></div>
</body>
</html>

We are using the xmlHttp object to send the query to the server using the function xmlHttp.send(strURL).

When the response from the server is ok, calling the updatepage() function.

if (xmlHttp.readyState == 4) {
updatepage(xmlHttp.responseText);
}

Finally the in the updatepage function we are adding the response text into the <div> </div> for displaying it to the user.

function updatepage(str){
document.getElementById("result").innerHTML =
"<font color='red' size='5'>" + str + "</font>";;
}

In the php file we are retrieving the data from user and then sending the appropriate message to the user. Here is the code of sayhello.php.

<?
$usr=$_GET["usr"];
?>
<p>Welcome <?=$usr?>!</p>
<p>Request received on:
<?

print date("l M dS, Y, H:i:s");
?>
</p>

In this tutorial we have developed a simple Ajax example.

Demo: Simple Ajax Example demo

There are many Ajax Tutorials with us, learn it in our Ajax Tutorials section.

Simple Ajax Example, Developing Simple Ajax application