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

Java4s_Author
Sivateja Kandula - Java/J2EE Full Stack 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

57 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

    • Sonal Poddar says:

      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.

  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. mak.capri says:

    ncie.. understand!

  14. kiran N says:

    thank you java4s team… simply superb…..

  15. ragunath says:

    thanks u!
    ajax concept!
    very nice!

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

  17. shanaya says:

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

  18. venu says:

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

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

  20. surya says:

    thank you so much for all tutorials

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

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

  23. Ammu says:

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

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

  25. aur says:

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

  26. niroj says:

    it is very useful for begginers

  27. sahana says:

    Thank you 🙂

  28. Deepu says:

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

  29. 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 😉 😀

  30. Vishwash says:

    Really Very Helpful to me . thank you so much

  31. Sanny says:

    Nice to understand at beginner level…

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

  33. manoj says:

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

  34. Akshay Deshmukh says:

    Thanks. Its very helpfull

  35. Kamalpreet Singh says:

    Really you make it very easy to understand. Thank you very much 🙂

  36. ramusesan says:

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

  37. mohan says:

    superbb… like it

  38. Ayaz says:

    wow
    cool bro
    realy….

  39. Prakash says:

    clear and simple.
    Thanks a lot 🙂

  40. Prakash says:

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

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

  42. Nagaraj Bilgundi says:

    Thank you so much sir…

  43. sudheer says:

    Nice Explanation anna

  44. Manikandan says:

    Thanks friend

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

  46. Ahmad says:

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

  47. sheetal says:

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

  48. sindhu says:

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

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

  50. Sudhakar says:

    clear and simple.
    Thanks a lot 🙂

  51. Palash Sharma says:

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

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

  53. Arvind says:

    Thanks for sharing your knowledge. Simple and precise to understand

  54. venkatesh says:

    Nice..Simple to understand..
    suitable for a beginner like me…
    Thank you very much
    this is very help full for me…….
    🙂

  55. N.Santosh Kumar says:

    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.

Name*
Mail*
Website



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

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