Saturday 31 December 2011

Introducing AJAX with a simple example program

Hi Friends,
   Today I am going to discuss little AJAX.AJAX means Asynchronous Javascript
And XML
.   AJAX is used to send data to server and receive data from server without
reflect in the screen.Basically HTML pages are static and the are precomposed
by the server. So any change in any part of the page requires the entire page to be reloaded.
But using AJAX we can change only the required part of the page without reload the entire page.

       Ajax is not a programming language.This is only a programming technique.We use javascript to call Ajax functions.
javascript simply makes an object of  XMLHttpRequest  class of Ajax.Then call the open() method.The result will be the part  of page will be reloaded.

I am here introducing a simple example to understand the concept more clearly:

This is a web page have a text and three buttons named RED,GREEN,BLUE.
in the start the text is black.When click in red button the text color changed to Red.When click in Green button
the text color change to green if click in Blue button the text will be displayed in blue colour.The think to be noted that the
page never reloaded fully.But only the required part is reloaded.

I am including some sample screen shots.





There have two pages
1.index.html
2.msg.php


1.index.html



<html>
<head>
<script type="text/javascript">

function func(opt)
{
   var xmlhttp;
  if (window.XMLHttpRequest)
     {       // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }

else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("target").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","msg.php?opt="+opt,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="target">
<h1>You can change my colour</h1>
</div>
<input type="button" value="Red" onclick="func(1)">

<input type="button" value="Green" onclick="func(2)">

<input type="button" value="Blue" onclick="func(3)">



</body>
</html>




2.msg.php


<?php
$opt=$_GET["opt"];
switch($opt)
{
case 1:
echo "<h1 style=\"color:red\">You can change my colour</h1>";
break;

case 2:
echo "<h1 style=\"color:green\">You can change my colour</h1>";
break;

case 3:
echo "<h1 style=\"color:blue\">You can change my colour</h1>";
break;
}
?>

Code Description

First go through index.html

Do you notice the three buttons.The onclick event of each button calls the javascript
function func()
.Each button call the func() with different parameter 1,2,3.
      The javascript function func() is defined in the <head> section.
      var xmlhttp; is the first step.We just declare a variable named xmlhttp.

Next step is xmlhttp=new XMLHttpRequest();.
that is initialise xmlhttp  XMLHttpRequest() with class.
But in Internet explorer5 and 6 the class is little different.Because it uses ActiveX
object to call Ajax.That is determined with the if statement in the code.

Next one is a nested function  xmlhttp.onreadystatechange=function().  In this function check for the status of the page.
document.getElementById("target").innerHTML=xmlhttp.responseText; this statement sets the innerHTML     property of       element target into the responseText or the return text.Please not that
the id of div in the html page is 'target'.

      Next is the core of Ajax,the open() method,  
xmlhttp.open("GET","msg.php?opt="+opt,true);
In the open method there have three parameters.

1.  GET    it describes the request is send as GET or POST.GET have a limitation in send parameters.
But GET is enough in this situation.Use post when handle large amount of data.

2.  he second parameter "msg.php" is the name of the php page to which data is send and receive the HTML.
The parameter opt is also send to the php page.The opt is the parameter send to the javascript
function by the HTML page.

3.  Next parameter is true.It specifies the data is send synchronously or
asynchronously.Our purpose is asynchronous so set this parameter always true.

Next is send() method 
xmlhttp.send();

When call this method the request is send to server.

Let's go through   msg.php
The parameter(opt) passed to msg.php is retrived to the variable $opt like this $opt=$_GET["opt"];
Then give this parameter to a switch and according to the value of opt
the color of text is changed.Style parameter is used for change the text color.

The output HTML generated by this page is send to the previous HTML page(index.html) and
it is displayed in the <div> block of index.php through innerHTML property of javascript.

Hope that this post is helpful to you.
I will come with more AJAX Tutorials in coming posts.

By Sukesh B R  sukeshbr@gmail.com



2 comments:

  1. HAI SUKESH BR ,
    THIS IS VERY USE FULL TO LEARN TO ME!
    AND PLEASE WRITE WITH CORRECT MERGING,(SEMICOLON)
    FOR EASY TO UNDERSTAND THE CODE.

    TANK YOU !!!

    ReplyDelete
    Replies
    1. I have modified this post.Please read again.

      Delete

Search This Blog