JSP cannot get AJAX to work using webservlet doGet

Question

My problem is, that I have to implement an AJAX function to display whether the selected item is out of stock or not. However, instead of displaying my error message it kind of duplicates the site completely and I'm very, nothing I've tried seems to work.

My idea behind the code was, that I have a dropdown form with action set to a controller (Webservlet) that handles both doGet and doPost, and an onchange event showing to a javascript function which invokes the AJAX stuff (You can see I'm not very confident in these aspects, I don't know nearly enough about it).

The JSP part that is relevant would be this:

<%@page contentType="text/html" pageEncoding="UTF-8" import="PCConfigurator.*"%>
<%
    session.setMaxInactiveInterval(0);
    ConfController ctrl = new ConfController();
%>
...
<script type="text/javascript">
    var xmlHttpObject = new XMLHttpRequest();

    function checkArticle(selectedArticleId) {
        var url = '?id=' + selectedArticleId.value;
        xmlHttpObject.open('GET', url);
        xmlHttpObject.onreadystatechange = handleStateChange;
        xmlHttpObject.send();
    }

    function handleStateChange() {
        if (this.readyState == 4 && this.status == 200) {
            var response = this.responseText;
            var result = document.getElementById("errorDiv");
            result.innerHTML = response;
        }
    }
</script>

<form method="POST" action="ConfController" >
    <table>
        <h1>PC Konfigurator GO Inc.</h1>
        <tr>
            <td><br><br></td>
        </tr>
        <tr>
            <td>Welchen Prozessor wollen Sie haben?:</td>
            <td><select name="cpuId" onchange="checkArticle(this)">
                    <%
                        for (Article article : ctrl.getCertainArticles("CPU")) {
                            out.print("<option value=\"" + article.getId() + "\">" + article.getName() + "</option>");
                        }
                    %>
                </select>
            </td>
        </tr>
        ...

And the Controller looks something like this:

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    try {
        int id = Integer.parseInt(req.getQueryString().split("=")[1]);
        if (findArticle(id).getCapacity() < 1) {
            resp.getWriter().write("<p><font color=\"red\">Leider ist dieser Prozessor nicht mehr verf&uuml;gbar.</font></p>");
        } else {
            resp.getWriter().write("");
        }
    } catch (Exception e) {
        System.err.println(e.getMessage());
    }
}

This is how the site looks on startup. So far so good.

But as soon as I choose another item in the dropdown, well, this happens...

I mean at least the id is right. Its just the stupid AJAX I cant get to work.

Answer 1

In your code you did not specified the controller for your AJAX request. This is the reason you are getting same as the response and the response shown using AJAX.

In console you can also see the full url which is being called AJAX request by hovering on the ?id=2.

 function checkArticle(selectedArticleId) {
    var url = 'myController?id=' + selectedArticleId.value;
    xmlHttpObject.open('GET', url);
    xmlHttpObject.onreadystatechange = handleStateChange;
    xmlHttpObject.send();
}

In above code replace myController with your actual controller name which points to your servlet.