Hi Friends,
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
2.msg.php
Code Description
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
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 precomposedAnd XML. AJAX is used to send data to server and receive data from server without
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>
<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
HAI SUKESH BR ,
ReplyDeleteTHIS IS VERY USE FULL TO LEARN TO ME!
AND PLEASE WRITE WITH CORRECT MERGING,(SEMICOLON)
FOR EASY TO UNDERSTAND THE CODE.
TANK YOU !!!
I have modified this post.Please read again.
Delete