How to post data using Ajax HTTP "POST" method in Java

Ajax is usefule when user wants to save some of the data in a database without submittin a whole form.

Lets see the steps to post / send data to server side using AJAX call.

1) Create a Servlet to iterate data coming from JSP
2) Create a JSP to call Ajax function
3) Write Ajax function to place a request to server side along with dynamic data
4) Run and Verify

We will see an example of posting institute details dynamically.

Lets see the steps in detailed:

1) Create a Servlet to iterate data coming from JSP

Our servlet's doPost method will be called when Ajax request is submitted from the "index.jsp" file. It will read two values "instituteName" and "location" which is passed from the client side / JSP.

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("Institute Name is : " + request.getParameter("instituteName"));
System.out.println("Location of Institute is : " + request.getParameter("location"));

PrintWriter out = response.getWriter();
out.print("Post Success");
}



2) Create a JSP to call Ajax function

Here is the code snippet of the index.jsp:

<form name="studnet" method="get" action="/ajaxtest">
<div><b>Institute Details</b> : 
<input type="button" value="Post Institutes" onclick='postInstituteNames("/ajaxtest/SubmitForm")' /></div>
<div id="institute"></div>
</form>


When user clicks on the "Post Institutes" button "postInstituteNames()" js function will be triggered.

3) Write Ajax function to place a request to server side along with dynamic data

<script type="text/javascript">
  function postInstituteNames(requestURL)
  {
      //Need to create a XMLHttpRequest object which will place a request to the server
      var xmlhttpobj;
      if (window.XMLHttpRequest){
       xmlhttpobj = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari
      } else {
       xmlhttpobj = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5
      }
      //1st parameter depicts HTTP method in our case its a POST
      //3rd parameter is true means its an asynchronous POST request
      xmlhttpobj.open("POST", requestURL, true);
       
      //When readyState is 4 then get the server output if any
      xmlhttpobj.onreadystatechange = function() {
          if (xmlhttpobj.readyState == 4) {
              if (xmlhttpobj.status == 200) {
                  document.getElementById("institute").innerHTML = xmlhttpobj.responseText;                 
              }
              else {
                  alert('Data Unavailable!');
              }
          }
      };
      
      xmlhttpobj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 
 //Passing two values "instituteName" & "location" to the server side which eventually can be saved by our servlet in the database.
      xmlhttpobj.send("instituteName=ABC&location=USA");
  }
  
</script>

4) Run and Verify

In our dynamic web application our index.jsp will look like below, when user hits the URL:

Once user clicks on the "Post institutes" button Ajax request will be triggered and names of the Institutes will be posted to the server. Server response will be shown back to the JSP.

If server is down / some failure happens at that time HTTP status will not be "200" and in that case below alter will be shown to the user.

Cheers!
Henal Saraiya
(Lead Consultant)
CIGNEX Datamatics