Ajax and java servlet data transfer using java script

Question

Hello guys I am new to ajax, trying to create a simple basic data transfer between servlet and html page using javascript(don't know jQuery). But that's not working tried reading tutorials but still can't figure out the problem. Can someone tell me where i am doing it wrong.

Html page index.html

<body>
    <button onClick="run()">Click</button>
    <script>
        function run() {
            if(window.XMLHttpResquest) xmlhttp=new XMLHttpResquest();
            else  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            xmlhttp.open("GET","/test",false);
            xmlhttp.send(null);
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("demo").innerHTML=xmlhttp.responseText;
                }
            }
        }
    </script>
    <br>
    <p id="demo">Static</p>
</body>

Servlet : Test.java

package foo;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

public class Test extends HttpServlet {
    public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException,IOException {
        res.setContentType("text/plain");
        res.getWriter().write("Dynamic");
    }
}

WebServer i am using is tomcat, web.xml

<web-app>
    <servlet>
        <servlet-name>tst</servlet-name>
        <servlet-class>foo.Test</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>tst</servlet-name>
        <url-pattern>/test</url-pattern>
    </servlet-mapping>
</web-app>

Edit:

What problem I am facing is - when I click on the 'click button' the innerHTML of the paragraph element should change but it is not changing. I tried runnig the servlet from address bar to check for servlet errors it's working it prints "Dynamic " so not a problem with the servlet and Web.xml file.

what is not working,are you getting any error?

dReAmEr
– dReAmEr

2015-01-18 12:35:05 +00:00
Commented Jan 18, 2015 at 12:35 — dReAmEr
– dReAmEr, Commented Jan 18, 2015 at 12:35

Rahul Winner · Accepted Answer · 2015-01-20 08:26:52Z

2

Write 'xmlhttp.send(null)' after 'onreadystatechange' function. Hopefully it should work. Moreover, you don't need to pass 'null' in send.

Following code works for me perfectly file. Another change I made is to add '.' period in URL before '/' in open(). And I called the send() after declaring the function for onreadystatechange.

<body>
    <button onClick="run()">Click</button>
     <script>
        function run() {
            if(window.XMLHttpResquest) xmlhttp=new XMLHttpResquest();
            else  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            xmlhttp.open("GET","./test",false);
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("demo").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.send();
        }
    </script>
    <br>
    <p id="demo">Static</p>
</body>

edited Jan 20, 2015 at 8:26

answered Jan 18, 2015 at 14:18

Rahul Winner

4403 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sudheer Over a year ago

Moved the line below the function still not working.

Rahul Winner Over a year ago

I've also modified the url.. check "xmlhttp.open("GET","./test",false);"

Rahul Winner Over a year ago

:) pretty strange.. the code which I pasted works fine, for sure.. have you used firebug or IE developer tools to track the network traffic and JS debug? That will be helpful.

Sudheer Over a year ago

It's true in xmlhttp.open for asynchronous it worked. Change it to true in your answer.

Collectives™ on Stack Overflow

Ajax and java servlet data transfer using java script

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related