Hi friends
Simple AJAX Program Source Code
In This post give easy and basic simple ajax program source code.
this code how to use ajax in webpage.
There are two page
1. Index.php (client Page)
2.getdata.php (Requested Server page)
Index.php
<!DOCTYPE html>
<html>
<head>
<script>
function updateData()
{
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("updateAreapart").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "getdata.php", true);
xhttp.send();
}
</script>
</head>
<body>
<h3>Simple AJAX Program:</h3>
<input type="submut" name="submit" onlcick="updateData()">
<div id="updateAreapart">
</div>
</body>
</html>
getdata.php
<?php
echo "Hai welcome !";
echo "This is Server Response content";
?>
Explanation:
if you copy and paste above code and run the page.
First page runs display following output
When you click the button call javaScript function, the function we write js function..
that function started we give alert message box.. this check for javascript function call correct or wrong purpose.. finally this message we give commeneted line
after alert line.. we create XMLHttpRequest Object and Send Request and write onreadystatechange events..
Requested page getdata.php is available and response ready than updated area in body section the content will be updated that particular area without reloading the whole webpage.
you get following output without reloading the whole webpage
Note: AJAX Scripts only run Web Server.. does not run normal HTML way.. the above both files copy and paste XAMPP Server and run the scripts..
This is basic AJAX Program.. this you can understand you can make anything in your web application..
AJAX use many more situation to make good web apps
In personally we make more apps using AJAX Technology..
If anything doubt.. please give comment and contact my mail id..
Am ready to solve your problems
Thank You!
Next section will come more live AJAX Example code and explanation..
keep it touch our blog!
Simple AJAX Program Source Code
In This post give easy and basic simple ajax program source code.
this code how to use ajax in webpage.
There are two page
1. Index.php (client Page)
2.getdata.php (Requested Server page)
Index.php
<!DOCTYPE html>
<html>
<head>
<script>
function updateData()
{
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("updateAreapart").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "getdata.php", true);
xhttp.send();
}
</script>
</head>
<body>
<h3>Simple AJAX Program:</h3>
<input type="submut" name="submit" onlcick="updateData()">
<div id="updateAreapart">
</div>
</body>
</html>
getdata.php
<?php
echo "Hai welcome !";
echo "This is Server Response content";
?>
Explanation:
if you copy and paste above code and run the page.
First page runs display following output
When you click the button call javaScript function, the function we write js function..
that function started we give alert message box.. this check for javascript function call correct or wrong purpose.. finally this message we give commeneted line
after alert line.. we create XMLHttpRequest Object and Send Request and write onreadystatechange events..
Requested page getdata.php is available and response ready than updated area in body section the content will be updated that particular area without reloading the whole webpage.
you get following output without reloading the whole webpage
This is basic AJAX Program.. this you can understand you can make anything in your web application..
AJAX use many more situation to make good web apps
In personally we make more apps using AJAX Technology..
If anything doubt.. please give comment and contact my mail id..
Am ready to solve your problems
Thank You!
Next section will come more live AJAX Example code and explanation..
keep it touch our blog!
No comments:
Post a Comment