CODEWITHSUNDEEP
javaajaxservlets
Sudheer
Sudheer

Reputation: 248

Ajax and java servlet data transfer using java script

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.

Upvotes: 0

Views: 229

Answers (1)

Rahul Winner
Rahul Winner

Reputation: 430

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>

Upvotes: 2

Related Questions