Ajax – Print Date and Time

Posted: December 10, 2012 in Ajax, Random Posts
Tags: , , , , , , , , , , , , ,

ajax amsterdam

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>

 // <![CDATA[
        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 = 
// ]]>
"" + str + "";;

        }

        function showCurrentTime(){

	var rnd = Math.random();

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

	postRequest(url);

        }

        

        

        <h1 align="center">Ajax Example

 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.

 


    type="button" onclick='JavaScript:showCurrentTime()' 
name="showdate">

 



                

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
Comments

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s