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



Home Ajax First Ajax Example

Related Tutorials


 
 

Share on Google+Share on Google+

First Ajax Example

Advertisement
In this Ajax First Example we will create a simple Ajax Application for displaying the current date and time.

Ajax First Example - Print Date and Time

     

In this section we will create a simple Ajax Application for displaying the current date and time. Date and time information are retrieved asynchronously from the server side php script. Our HTML page calls serverside php script to retrieve the today's date. Once the time data is retrieved from the server, it uses javascript and css to display the time on the HTML page.

The server side script is developed in PHP that displays the current time of the server. You modify the php to display your own message. This program can also be used to do some business processing.

These days Ajax is being used extensively for the development of interactive websites. There are many frameworks available these days to develop Ajax applications. But you should start learning the Ajax from scratch. This is the first example in Ajax that will give you quick start in the Ajax technologies.

Let's get started with the Ajax technology and develop our fist Ajax Datetime example.

 

Here is the code of HTML File:

 

 <html>
        <head>

        <title>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 showCurrentTime(){

	var rnd = Math.random();

	var url="time.php?id="+rnd;

	postRequest(url);

        }

        </script>

        </head>

        <body>

        <h1 align="center"><font color="#000080">Ajax Example</font></h1>

        <p><font color="#000080">&nbsp;This very simple 
	Ajax Example retrieves the

        current date and time from server and shows on the form. 
	To view the current

        date and time click on the following button.</font></p>

        <form name="f1">

  <p align="center"><font color="#000080">&nbsp;<input value="   Show Time" 
    type="button" onclick='JavaScript:showCurrentTime()' 
name="showdate"></font></p>

  <div id="result" align="center"></div>

        </form>

        <div id=result></div>

        </body>

        </html>
        

When use clicks on the "Show Time" button, the showCurrentTime() is called. The the function showCurrentTime() calls the time.php using Ajax and then updates the time values retrieved from server.

Here is the code of PHP (time.php) file:

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

The above PHP code prints current date and time.

Try the example Online

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: November 23, 2006

Related Tutorials

Discuss: First Ajax Example   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:2
raj
November 11, 2011
getting error

getting the following error: HTTP Status 404 - /ajax/time.php type Status report message /ajax/time.php description The requested resource (/ajax/time.php) is not available. should i fo any changes in web.xml. i'm using eclipse ide. i'm unable to create the time.php file
Newbie
November 13, 2012
is it put the html and .php in the same file?

or how to make them link?
DMCA.com