Ajax First Program With Explanation
|
Ajax »
On Aug 11, 2011 | { 11 Comments }
|
Tweet
|
Let us see first ajax program.., so that i can explain the inner concepts practically 
Files used…
- Firstprogram.html
- java4s.txt
<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","java4s.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>
Explanation
- Once the document loaded then immediately we will be able to see one button
Change Content, and see i have been given onclick=”fun1()” [ line number 33 ] means once we click on this button controller will go to line number 4 and will starts execute that fun1() - At line number 6, i have taken 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
- See line number 8, 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 doesnt supports XMLHttpRequest object then we can assign ActiveXObject [ which supports old web browsers ] into our variable a [ a=new ActiveXObject("Microsoft.XMLHTTP"); ]
- So from line numbers 8 -15 request object creation work been done
- Now controller directly jumps to line number 25, and opens the connection and send the request to java4s.txt (this is my notepad file), see actually the 3rd parameter i have given as true means Asynchronous data transfer will be activated
- Finally request will be sent in line number 26, that’s it.
- If server sends the response back to our application then controller will automatically execute from line number 17 – 23, 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
java4s.txt
welcome to java4s.com
That’s it mates just put these 2 files, in one folder and test the example of your own, and i will explain more about this open() and send() methods in the next sessions, just don’t think much about this
|
What you are thinkig....
11 Responses to “Ajax First Program With Explanation”
If you want a pic to show with your comment, go get a gravatar !
Please post your questions on Java4s Answers forum
Nice..Simple to understand..
suitable for a beginner like me…
Superb explaination of AJAX tutorial…
Thanks a lot 4 sharing java4s Team…….. …
Thank you very much
this is very help full for me
@Jovin,@Mohammed Vaseem,@Narendra
You welcome friends..!
sir this is not working i have make both file reside in a folder on desktop ,when we execute html file then nothing happen
@atul
Deploy in Tomcat or any other server and try, that should work.
Hi Java4s team,please provide complete spring tutorial,we are eagerly waiting for your updations.
hi java4s team,
when i am trying to run this program in firefox ,
I am getting ActiveXObject is not defined.
hi,
will you please povide about SpringIntegration and Importance of it.
also povide the GWT Material.
Thank you
hello sir this is supub example but how can be execute ajax program with xml file plz help me…..
Its clear..Thank you