Newsletter

Ajax First Program With Explanation

Ajax »on Aug 11, 2011 { 54 Comments } By Sivateja

Let us see first ajax program..,  so that i can explain the inner concepts practically :-)

Files used…

  • Firstprogram.html
  • java4s.txt

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 .::

Java4s_Author
- Full Stack Java/J2EE & UI Web Developer
Founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog, Love Java and UI frameworks.
You can sign-up for the Email Newsletter for your daily dose of Java tutorials.

Comments

54 Responses to “Ajax First Program With Explanation”
  1. Jovin says:

    Nice..Simple to understand..
    suitable for a beginner like me…

  2. Mohammed Vaseem says:

    Superb explaination of AJAX tutorial…

    Thanks a lot 4 sharing java4s Team…….. … :)

  3. narendra says:

    Thank you very much

    this is very help full for me

  4. Java4s says:

    @Jovin,@Mohammed Vaseem,@Narendra

    You welcome friends..! :-)

  5. atul says:

    sir this is not working i have make both file reside in a folder on desktop ,when we execute html file then nothing happen

  6. Java4s says:

    @atul

    Deploy in Tomcat or any other server and try, that should work.

  7. Naga says:

    Hi Java4s team,please provide complete spring tutorial,we are eagerly waiting for your updations.

  8. shashank says:

    hi java4s team,

    when i am trying to run this program in firefox ,

    I am getting ActiveXObject is not defined.

  9. Nagaraju says:

    hi,

    will you please povide about SpringIntegration and Importance of it.
    also povide the GWT Material.

    Thank you

  10. abhi says:

    hello sir this is supub example but how can be execute ajax program with xml file plz help me…..

  11. Preetha says:

    Its clear..Thank you

  12. SangraM says:

    Nice tutorial…….

  13. kiran N says:

    thank you java4s team… simply superb…..

  14. ragunath says:

    thanks u!
    ajax concept!
    very nice!

  15. Sameer says:

    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!!!!!!!!!

  16. shanaya says:

    Hello Sir your explanation is really nice but what is the purpose of java4s.txt file. where it is stored and why?

  17. venu says:

    In line 21 instead of divID can we give particular textbox id?

  18. trinadh says:

    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)

  19. surya says:

    thank you so much for all tutorials

  20. srinivasarao says:

    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.

  21. Basanta says:

    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.

  22. Ammu says:

    kindly let to know how to run this file since on button click its not effecting in the java4s.txt file

  23. Dilip says:

    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…

  24. aur says:

    Hello Sir,
    Still I am not getting the solution.Not thing is changing even after button click

  25. niroj says:

    it is very useful for begginers

  26. sahana says:

    Thank you :-)

  27. Deepu says:

    Hi
    Please provide the SVN,MAVEN tool Tutorial
    Its very useful to everyone…..

  28. Shaikh Uzair says:

    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 ;) :D

  29. Vishwash says:

    Really Very Helpful to me . thank you so much

  30. Sanny says:

    Nice to understand at beginner level…

  31. Its helpfull to all.……
    Thank u sir

  32. manoj says:

    i need client request & server response program , by using textbox

  33. Akshay Deshmukh says:

    Thanks. Its very helpfull

  34. Kamalpreet Singh says:

    Really you make it very easy to understand. Thank you very much :)

  35. ramusesan says:

    what is this if (a.readyState==4 && a.status==200)

  36. mohan says:

    superbb… like it

  37. Ayaz says:

    wow
    cool bro
    realy….

  38. Prakash says:

    clear and simple.
    Thanks a lot :-)

  39. Prakash says:

    I had a doubt, how to get the too many content from server and display it in browser dropdown list box

  40. amit sngh says:

    awesome style to provide the contents. i think tutorial says a lot in a very few lines.
    Best tutorial leaning…keep going dear .

  41. Nagaraj Bilgundi says:

    Thank you so much sir…

  42. sudheer says:

    Nice Explanation anna

  43. Manikandan says:

    Thanks friend

  44. Deepika says:

    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.

  45. Ahmad says:

    what is this if (a.readyState==4 && a.status==200)

  46. sheetal says:

    why i m not getting a.readyState=4 && a.status=200 in my code. i copy pasted the above code

  47. sindhu says:

    Love you sooooo much dear.I like so much your website

  48. Priti says:

    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..

  49. Sudhakar says:

    clear and simple.
    Thanks a lot :-)

  50. Palash Sharma says:

    Great Tutorial
    So Simple to understand for a beginners like me..
    Thanku for such a great TUTORIAL

  51. Palash Sharma says:

    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

  52. Arvind says:

    Thanks for sharing your knowledge. Simple and precise to understand

Name*
Mail*
Website



By posting your answer, you agree to our comments policy.
Most Recent Posts from Top Categories
Hibernate Spring Struts
Contact | About Us | Privacy Policy | Advertise With Us

© 2010 - 2018 Java4s - Get It Yourself.
The content is copyrighted to Sivateja Kandula and may not be reproduced on other websites.