Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Ajax Simple Ajax Example, Developing Simple Ajax application

Related Tutorials


 
 

Share on Google+Share on Google+

Simple Ajax Example, Developing Simple Ajax application

Advertisement
Ajax is the method of using JavaScript to send the client data on the server and then retrieve it without refreshing the complete page. We can us the XMLHttpRequest object to perform a GET or POST and then retrieve the server response without page refresh.

Simple Ajax Example

     

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.

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 15, 2006

Related Tutorials

Discuss: Simple Ajax Example, Developing Simple Ajax application  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:2
Sameer Sebastian
September 5, 2011
How is the response set

I want to ask how is the value set to the responseText in the server side. Is the response set in the in request object only?
tikoy
August 10, 2012
ajax sample

how come its not working for me? nothing hapens. what supost to be the problem? I past the html file on notepade and save it as is. and sabe the 2nd file as .php. but when I open the html and click nothing hapens. help pleas
DMCA.com