Why is my code failing to pass parameters from JavaScript to JSP using XMLHttpRequest?

Question

I am trying to write JavaScript code which, on a mouse click event, sends some parameter (id) to the server-side JSP code. The JSP code then returns a string to the JavaScript.

...and the response text will be a string returned from JSP specified in out.println(substring);.

This code is not working. Sorry if I am doing something silly; I am new to coding for the web.

Answer 1

XMLHttpRequest is an asynchronous request by default, meaning that after you call send, the next line of code is executed before the request has finished. The code to be executed when the request finished goes into your "state change" handler. You're already assigning a state change handler here:

xmlHttp.onreadystatechange = handleRequestStateChange

But you never define what handleRequestStateChange actually is. You should probably read about ready states and the onreadystatechange event.

Try the following code instead:

<button type="button" onClick="handleButtonClick();">Click Me!</button>
<script type="text/javascript">
function handleButtonClick()
{
    // Declare the variables we'll be using
    var xmlHttp, handleRequestStateChange;

    // Define the function to be called when our AJAX request's state changes:
    handleRequestStateChange = function()
    {
        // Check to see if this state change was "request complete", and
        // there was no server error (404 Not Found, 500 Server Error, etc)
        if (xmlhttp.readyState==4 && xmlhttp.status==200) 
        {
            var substring=xmlHttp.responseText;
            // Do something with the text here
            alert(substring);
        }
    }

    xmlhttp = new XMLHttpRequest();
    xmlHttp.open("GET", "http://csce:8080/test/index.jsp?id=c6c684d9cc99476a7e7e853d77540ceb", true);
    xmlHttp.onreadystatechange = handleRequestStateChange;
    xmlHttp.send(null);
}
</script>

This code assigns to handleRequestStateChange a function which will be called when the ready state of the XMLHttpRequest changes. The function checks to see if the ready state is 4 (request finished and response is ready) and if so, the you will be able to access the responseText property of the request which will contain the response from the JSP page.

As a suggestion for the future, when you've learned how AJAX request work, you may find a helper library like jQuery makes tasks like this much easier!

Answer 2

In your case (GET method) you need to pass the variables in the open method directly (at the end of the url)

xhr.open("GET", "http://csce:8080/test/index.jsp?id=c6c684d9cc99476a7e7e853d77540ceb", true);
xhr.send(null);

---

Goyuix's technic is only correct in the case of the POST method:

xhr.open("POST", "http://csce:8080/test/index.jsp", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("id=c6c684d9cc99476a7e7e853d77540ceb");

---

You might want to use the uri encoding global function as a good practice in case you have spaces or other special characters in your parameter:

POST method:

var myVar1 = encodeURIComponent("c6c684d9cc99476a7e7e853d77540ceb");
xhr.open("POST", "http://csce:8080/test/index.jsp", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("id=" + myVar1);

GET method:

var myVar1 = encodeURIComponent("c6c684d9cc99476a7e7e853d77540ceb");
xhr.open("GET", "http://csce:8080/test/index.jsp?id=" + myVar1, true);

---

FYI, this is how you retrieve the parameters passed to the JSP page:

We are using JSP's core library (this lib must be in your web app's /WEB-INF/lib/ directory) to output the value of the parameter called "id".

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:out value="${param.id}"/>