| Newsletter |
Ajax First Program With Explanation
Ajax » on Aug 11, 2011 { 57 Comments } By Sivateja
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 🙂
You Might Also Like
::. About the Author .:: | ||
 | ||
Comments
57 Responses to “Ajax First Program With Explanation”
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
AJAX cannot be executed on the protocol such as file:// so we need to make the local machine as server.
AJAX can work on the http:// protocol.
You can better try using Apache Tomcat Server in Eclipse IDE.
@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
Nice tutorial…….
ncie.. understand!
thank you java4s team… simply superb…..
thanks u!
ajax concept!
very nice!
Hello Sir your explanation is superb and very easy to understand but for me the example is not working when i click “Change Content” button nothing happens please help!!!!!!!!!
Hello Sir your explanation is really nice but what is the purpose of java4s.txt file. where it is stored and why?
In line 21 instead of divID can we give particular textbox id?
I am getting the following error
java.lang.NumberFormatException: null
at java.lang.Integer.parseInt(Unknown Source)
at java.lang.Integer.parseInt(Unknown Source)
at org.apache.jsp.index_jsp._jspService(index_jsp.java:61)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:377)
at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:298)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:852)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:588)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)
at java.lang.Thread.run(Unknown Source)
thank you so much for all tutorials
It is very useful for beginners like me. I don’t know any thing about AJAX. But now i got every thing about Ajax. Thanks Sivateja…very nice tutorial try to develop reaming technologies just like this.
Sir,
I save this html file in F:\ as ajax1.html and I create a text file called java4s.txt in same location.Then I open that html file in chrome.Finally I click button.But I did not get the effect. So please tell me how to execute this program.
kindly let to know how to run this file since on button click its not effecting in the java4s.txt file
For correct working of this example. Do the following:
Create a text file namely java4s.txt in the same folder where FirstProgram.html is kept with some text content.
Change the condition in FirstProgram.html as
if(a.readyState == 4 && a.status == 0) instead of if(a.readyState==4 && a.status==200)
Cheers…
i did the same thing as you told but nothing happened after clicking button. Please help me out..
Hello Sir,
Still I am not getting the solution.Not thing is changing even after button click
it is very useful for begginers
Thank you 🙂
Hi
Please provide the SVN,MAVEN tool Tutorial
Its very useful to everyone…..
Its Really Awesome Example for Beginners like me… Cox where ever I Look For Ajax Example They Directly Talk About Severs Servlets JSP and ASP… I can understand that ajax meant for it but for Beginners like me in AJAX i completely cant understand it… Well this example is not working in Chrome I tired it nothing is happening…. then i tried in Firefox and there it works like a charm 😉 😀
Really Very Helpful to me . thank you so much
Nice to understand at beginner level…
Its helpfull to all.……
Thank u sir
i need client request & server response program , by using textbox
Thanks. Its very helpfull
Really you make it very easy to understand. Thank you very much 🙂
what is this if (a.readyState==4 && a.status==200)
superbb… like it
wow
cool bro
realy….
clear and simple.
Thanks a lot 🙂
I had a doubt, how to get the too many content from server and display it in browser dropdown list box
awesome style to provide the contents. i think tutorial says a lot in a very few lines.
Best tutorial leaning…keep going dear .
Thank you so much sir…
Nice Explanation anna
Thanks friend
Am using netbeans IDE,and glassfisher server..
i have tried ur program..
i can get partial result only
ie, only that html page is displayed but i cant response from server means, txt file contant is not displayed on clicking the button.
what is this if (a.readyState==4 && a.status==200)
why i m not getting a.readyState=4 && a.status=200 in my code. i copy pasted the above code
Love you sooooo much dear.I like so much your website
Please help me out on this. html page is running but after clicking on button, nothing happens. i did changed the if(a.readyState == 4 && a.status == 0) and ran it on chrome , nothing happened.
ajax seems mysterious to me..
clear and simple.
Thanks a lot 🙂
Great Tutorial
So Simple to understand for a beginners like me..
Thanku for such a great TUTORIAL
I need to update a string from a jsp page after every second without any button click..
Just like a live weather report..
How can I achieve the same with ajax
Thanks for sharing your knowledge. Simple and precise to understand
Nice..Simple to understand..
suitable for a beginner like me…
Thank you very much
this is very help full for me…….
🙂
When i click on submit button i am getting this error Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Could you please help me out.