JSON Interchange Using AJAX and Java Servlets

The following is a simple example of how to implement a JSON based data interchange using an AJAX client-side request and a Java Servlet server-side response. The expected result of the example code is that an individual’s full name is displayed after the client enters a user ID.

On the client-side, we need a web page with an input field to capture the user ID (user_id) and a placeholder to display the returned full name (user_name).

User ID: <input type='text' name='user_id' id='user_id' />
         <span id="user_name"></span>

We need to load the jQuery library to be able to use some of the nice AJAX functionality.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

We also need a JavaScript function on the client-side to generate the XMLHttpRequest. The following jQuery based function will generate the XMLHttpRequest when the user_id input field changes. When the user changes the contents of the input field, this function is called and a request is then submitted to the server-side Java Servlet (FullNamePopulator). The JSON based response from the Java Servlet is then parsed by the function and the user_name placeholder is replaced with the returned full name.

$(function() {
  $("input#user_id").change(function() {
    $.getJSON("/FullNamePopulator",{user_id: $(this).val()}, function(j) {
      var value = '';
      for (var i = 0; i < j.length; i++) {
        value = j[i].optionDisplay;
      }
      $("#user_name").html(value);
    })
  })
});

The Java Servlet is expected to return a JSON formatted response as follows given an input user_id of “abc.”

[{"optionValue":"abc","optionDisplay":"Full Name 1"}]

The Java Servlet handles the look up and formatting of the response. In this example, a simple HashMap is used to hold three sample user ID’s and the associated full names. The user_id submitted to the Servlet is used as a key to the HashMap. If a value is found, then the full name is used otherwise “Unknown User” is used and the JSON response is formatted and sent to the client.

import java.io.IOException;

import java.util.HashMap;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class FullNamePopulatorServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  public void init(ServletConfig config) throws ServletException {
    super.init(config);
  }

  public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
  }

  public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    ServletOutputStream outputStream = null;
    String userID = null;
    String userName = null;
    StringBuffer outputStringBuffer = new StringBuffer();
    HashMap exampleHashMap = new HashMap();

    exampleHashMap.put("abc", "Full Name 1");
    exampleHashMap.put("xyz", "Full Name 2");
    exampleHashMap.put("123", "Full Name 3");

    try {
      response.reset();
      response.setHeader("Pragma", "no-cache");
      response.setDateHeader("Expires", -1);
      response.setContentType("text/html");

      if (request != null) {
        userID = request.getParameter("user_id");
      }

      if ((userID == null) || (userID.trim().equals(""))) {
        userID = "";
      }

      if (exampleHashMap.containsKey(userID)) {
        userName = (String) exampleHashMap.get(userID);
      } else {
        userName = "Unknown User";
      }

      outputStream = response.getOutputStream();

      outputStringBuffer.append("[{\"optionValue\":\"")
                        .append(userID)
                        .append("\",\"optionDisplay\":\"")
                        .append(userName)
                        .append("\"}]");

      outputStream.print(outputStringBuffer.toString());
    } catch (Exception e) {
    } finally {
    }

    return;
  }

  public void destroy() {
    return;
  }
}