Ajax request parameter cannot be retrieved within servlet issue

Question

As part of learning Ajax, I have created a little servlet + some HTML page + Javascript code. The page contains a couple of buttons. The idea is to pass a parameter value in a request according to the pressed button and return the value in the response. Nothing crazy.

Here is the function making the request (button are linked to this function on click):

function loadXMLDoc2() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/WebFront/Ajaxlet",true);
    var retr = this.id;
    var param = "cmd=" + retr;
    document.getElementById("L1_LEFT").innerHTML = param;
    xmlhttp.send(param);
}

The L1_LEFT element allows me to check the constructed parameter (for example: cmd=bd_info).

The following method is called on the servlet side to proceed the request and response:

private void setAnswer2(HttpServletRequest req, HttpServletResponse res) throws IOException {

    Enumeration<String> iter = req.getParameterNames();

    System.out.println("Parameters=");
    while (iter.hasMoreElements()) {
        String next = iter.nextElement();
        System.out.println(next);
    }

    ...

}

However, each time I click on buttons, I get an extra parameter line printed:

Parameters=
Parameters=
Parameters=
Parameters=
...

Why? What am I doing wrong?

EDIT

Following BalusC's solution, I modified my code as following:

var retr = this.id;
var param = "cmd=" + encodeURIComponent(retr);
document.getElementById("L1_LEFT").innerHTML = param;
xmlhttp.open("POST","/WebFront/Ajaxlet",true);
xmlhttp.send(param);

and

    Map<String, String[]> en = req.getParameterMap();

    System.out.println("Parameters=");
    for (String next : en.keySet()) {
        System.out.println(next);
    }

The GET solution works, but the POST solution does not work (same issue). I read that POST is preferable to GET. Anyone knows why POST would not work?

EDIT II

Here is the servlet code:

@WebServlet(name="Ajaxlet", urlPatterns={"/Ajaxlet"}, asyncSupported=false)
public class Ajaxlet extends HttpServlet {

    private void setAnswer2(HttpServletRequest req, HttpServletResponse res) throws IOException {

        Map<String, String[]> en = req.getParameterMap();

        System.out.println("Parameters=");
        for (String next : en.keySet()) {
            System.out.println(next);
        }

        res.setContentType("text/html");
        PrintWriter out = res.getWriter();
        out.println(System.currentTimeMillis());
        out.close();        

    }

    @Override
    public void doPost(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {

        System.out.println("doPost");
        setAnswer2(req, res);

    }

}

EDIT III

Here is my web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_5.xsd">
    <servlet>
        <display-name>Ajaxlet</display-name>
        <servlet-name>Ajaxlet</servlet-name>
        <servlet-class>net.test.Ajaxlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Ajaxlet</servlet-name>
        <url-pattern>/Ajaxlet/*</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
            <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

and my context.xml:

<?xml version="1.0" encoding="UTF-8"?>
<Context antiJARLocking="true" path="/WebFront"/>

EDIT IV

Updated my web.xml to:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
      version="3.0"> 

    <welcome-file-list>
            <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

</web-app>

Still having the same issue with POST.

Answer 1

Had exactly this same problem, for documentations sake the solution was in my Javascript code,

When sending "form data" in your AJAX Post, you need to set a header like so..

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded") xmlhttp.send("paramName=paramValue")

source: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

Answer 2

You're creating a GET request and then sending the parameter in the request body. This isn't going to work. In order to send data in the request body, you have to create a POST request (and do the server side request processing job in servlet's doPost() method instead of doGet()):

xmlhttp.open("POST", "/WebFront/Ajaxlet", true);
xmlhttp.send(param);

On GET requests, you normally append the query string with the parameters to the request URL, not the request body:

xmlhttp.open("GET", "/WebFront/Ajaxlet?" + param, true);
xmlhttp.send(null);

Regardless of the request method, you should ensure that parameter names and values are properly URL encoded! You can use JS' builtin encodeURIComponent() function for this:

var param = "cmd=" + encodeURIComponent(retr);

---

Unrelated to the concrete problem, I know that you're learning Ajax, but I suggest to after all take a look at an existing JavaScript library which takes all the nasty and cross browser sensitive details of sending Ajax requests and traversing/manipulating the HTML DOM from your hands, such as jQuery. In this related question you can find some nice examples how to get started with jQuery + Servlets: How to use Servlets and Ajax?

Another unrelated note, you should prefer getParameterMap() to iterate over parameter names and values. It returns a Map instead of an old fashioned Enumeration; a Map allows you to use the enhanced for loop.