Let us first of all know what is AJAX.AJAX stands for Asynchronous JavaScript and XML.AJAX is a new technique for creating better, faster, and more
interactive web applications with the help of XML, HTML, CSS and Java
Script.AJAX allows web pages to be updated asynchronously by exchanging small
amounts of data with the server behind the scenes.So,the point is we do not need to reload the whole page but just a small area undation will solve the purpose for client as well as server.
AJAX is based on internet standards, and uses a combination of:
1.XMLHttpRequest object (to exchange data asynchronously with a server)
2.JavaScript/DOM (to display/interact with the information)
3.CSS (to style the data)
4.XML (often used as the format for transferring data)
There is one main role of AJAX as the applications are browser- and platform-independent.
Let us take a simple example:-
<html>
<head>
<script language="javascript">
function postRequest(strURL)
{
var xmlHttp;
if (window.XMLHttpRequest) //For Mozilla, Safari, ...
{
var xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) //For InternetXplorer
{
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){
updatePageTime(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}
function updatePageTime(str)
{
document.getElementById("result").innerHTML =
"<font color='blue' size='6'>" + str + "</font>";;
}
function getCurrentServerTime(){
var rnd = Math.random();
var url="currentservertime.php?id="+rnd;
postRequest(url);
}
</script>
</head>
<body>
<div align="center">
<form><input type="button" value="Show current server time" onclick="getCurrentServerTime()"></div>
<div id="result" align="center"></div>
</body>
</html>
In this program we will see a button in center of page displaying (Show current server time) and when we click on this button we will see our system displays current date and time.Like below:-
Thursday Jul 05th, 2012, 15:56:59
AJAX is based on internet standards, and uses a combination of:
1.XMLHttpRequest object (to exchange data asynchronously with a server)
2.JavaScript/DOM (to display/interact with the information)
3.CSS (to style the data)
4.XML (often used as the format for transferring data)
There is one main role of AJAX as the applications are browser- and platform-independent.
Let us take a simple example:-
<html>
<head>
<script language="javascript">
function postRequest(strURL)
{
var xmlHttp;
if (window.XMLHttpRequest) //For Mozilla, Safari, ...
{
var xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) //For InternetXplorer
{
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){
updatePageTime(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}
function updatePageTime(str)
{
document.getElementById("result").innerHTML =
"<font color='blue' size='6'>" + str + "</font>";;
}
function getCurrentServerTime(){
var rnd = Math.random();
var url="currentservertime.php?id="+rnd;
postRequest(url);
}
</script>
</head>
<body>
<div align="center">
<form><input type="button" value="Show current server time" onclick="getCurrentServerTime()"></div>
<div id="result" align="center"></div>
</body>
</html>
In this program we will see a button in center of page displaying (Show current server time) and when we click on this button we will see our system displays current date and time.Like below:-
Thursday Jul 05th, 2012, 15:56:59
No comments:
Post a Comment