AJAX - First AJAX Application

First AJAX Application

So let’s begin by taking up an example. Create a simple HTML page myAJAX.html as shown below

<html>
<body>

<form name="myAJAXForm">
Name: <input type="text" name="name" />
Current Date: <input type="text" name="time" />
</form>

</body>
</html>

This HTML page has a two textboxes – one where user will enter his name and the other one displays current date. We will request date data directly from the web server.

Now create a php page date.php which prints out the current date

<?php
$t=time();
echo(date("D F d Y",$t));
?>

Once you have done this now we need to add additional code to our HTML page to be able to use AJAX.

<script type="text/javascript">
function setupAJAX()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Sorry, your browser seems to not support XMLHTTP functionality.");
  }
}
</script>

The above code checks to whether the user’s browser supports XMLHTTP or not.

Output of  First AJAX Application


The output of the above code is shown below. Try it out now!

Name: Current Date:

 

source:http://www.botskool.com/programming-tutorials/ajax-tutorials/ajax-basic-tutorial