AJAX :
Ajax means, Asynchronous java script and
xml, and this is the type of programming made popular in 2005
by Google suggest [Google
search, while we are typing something in Google search box it will show you
some
suggestions automatically right that is Ajax]. With Ajax we can move the
data from our web page to the server, and we
can update the part of our
web page without refreshing the entire page.
What is Synchronous & Asynchronous?
Synchronous means at a time
we can send single request and we need to wait for the response before send the
second request, and Asynchronous means we can
send the second request before we get the response of first
request, Ajax is the example
of this Asynchronous type. AJAX applications are platform independent.
AJAX Example:
<html>
<head>
<script type="text/javascript">
function fun1()
{
var a;
if (window.XMLHttpRequest)
{
// If the
browser if IE7+[or]Firefox[or]Chrome[or]Opera[or]Safari
a=new XMLHttpRequest();
}
else
{
//If browser is IE6, IE5
a=new ActiveXObject("Microsoft.XMLHTTP");
}
a.onreadystatechange=function()
{
if (a.readyState==4 && a.status==200)
{
document.getElementById("myDiv").innerHTML=a.responseText;
}
}
a.open("POST","sample.txt",true);
a.send();
} // fun1() close
</script>
</head>
<body>
<div id="myDiv" style="width: 300px; height:
30px;">Click on the button below</div>
<button type="button" onclick="fun1()">Change
Content</button>
</body>
</html>
Once the document loaded
then immediately we will be able to see one button Change Content , and see i have
been given onclick=”fun1()” means once we click on this button controller will go to fun1() and will starts execute.
I have declared one variable with name a.
For any ajax program, we must create one request object to send our ajax request to the server, that ajax object is
nothing but XMLHttpRequest object, i have written window.XMLHttpRequest means am checking whether my browser
supports XMLHttpRequest object or not, if yes assigning XMLHttpRequest object into a [ a=new XMLHttpRequest(); ]
else i mean if our web browser doesn't supports XMLHttpRequest object then we can assign ActiveXObject [ which
supports old web browsers ] into our variable a [ a=new ActiveXObject("Microsoft.XMLHTTP"); ]
Now controller directly
jumps to, a.open("POST","java4s.txt",true); and opens the connection and 2nd
parameter is
the request to sample.txt (this
is text file), the 3rd parameter i have
given as true means Asynchronous data transfer
will be activated. Finally
request will be sent in a.send();If server sends the response back to our
application then
controller will automatically execute
a.onreadystatechange=function()
{
if (a.readyState==4 && a.status==200)
{
document.getElementById("myDiv").innerHTML=a.responseText;
}
}
you may get one doubt like why its not executed initially… ? there is a reason actually this a.onreadystatechange=function() executes only when we get the response from the server, hope you are clear
In Ajax if we want to send the request to the server, we have 2 methods in XMLHttpRequest object to do this work,
those are open() and send().Actually open() method will opens the connection with the server and send will sends our request object to the server.
obj.open(”
POST “, ” destination URL “,true);
obj.send();
open() method has 3 parameters, first parameter having the values POST/GET this is depends on our requirement, my
choice is always POST, because its having security than GET. Second parameter is the destination, to where we need
to send the request. It may be any file path or url or url patterns [ in java ] or what everThird parameter having the
values true/false, actually true means we are opening Asynchronous data transfer, and false means Synchronous.
Finally send() method will send
the request object to the server. Once we
send the request to the destination [server], we will get the response from the server in two formats
either in Text or XML; i mean
we can get the response from the server by using responseText and responseXML properties of our XMLHttpRequest object. Once the request was sent to the server, changes
will happen in the current webpage based on the response only. The onreadystatechange event will be triggered every
time the readyState changes. Here the properties of XMLHttpRequest object.
onreadystatchang():
A function will be stored and will be
called automatically each time
readyState property changes
readyState:
0 – request not initialized.
1 – connection been established with the server.
2 – request received from the server.
3 – request being processing.
4 – request finished and response is ready.
Status:
200 :ok.
404 : page not
found, it’s normal 404 error.
So, readyState = 4 & status = 200 then everything will be perfect, i mean we got the response from
the server, and our webpage will be modified with the response
text/xml.