Question

A while back I was given the answer of using JSON to pass things from my application to JavaScript. What I don’t understand is how I actually pass the object to JavaScript I see that you have to use a .json file.

And then what? I am able to convert my Java objects to JSON objects but it’s passing that I can’t get my head around. I am using JSP and Servlets to write my application.

Answer 1

The file extension .json is not so relevant. It’s just all about the HTTP Content Type header. As long as it’s application/json, the webbrowser knows perfectly what to do with it. In terms of JSP/Servlet you basically need to create a servlet class which listens on a certain url-pattern, processes the request parameters or pathinfo accordingly and writes a JSON string to the response in the doGet() method.

Here’s a fictive example of a servlet which returns city option value/label pairs based on the selected value of a country dropdown, it uses Google Gson to convert fullworthy Java objects to JSON in an oneliner:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String country = request.getParameter("country");
    Map<String, String> cities = cityDAO.find(country);
    String json = new Gson().toJson(cities);
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}

Map such a servlet on an url-pattern of /cities in web.xml (or if you want a bit more SEO friendly approach, map it on /cities/* and use request.getPathInfo() instead).

Finally, in the JS code which is executed during onchange of a country dropdown, you just let it fire an asynchronous (ajaxical) request on this servlet with the selected country as parameter (or pathinfo). I’ll give a jQuery based example since it insanely eases firing ajax requests and traversing/manipulating HTML DOM (the "raw" JS code would otherwise have been up to 5 times as long).

$(document).ready(function() {
    $('#country').change(function() {
        var selectedCountry = $(this).val();
        var servletUrl = 'cities?country=' + selectedCountry;

        $.getJSON(servletUrl, function(options) {
            var city = $('#city');
            $('>option', city).remove(); // Clean old options first.
            if (options) {
                $.each(options, function(value, label) {
                    dropdown2.append($('<option/>').val(value).text(label));
                });
            } else {
                dropdown2.append($('<option/>').text("Please select country"));
            }
        });
    });
});

Here is the appropriate HTML example of the JSP:

<select id="country" name="country">
    <c:forEach items="${countries}" var="country">
        <option value="${country.key}">${country.value}</option>
    </c:forEach>
</select>
<select id="city" name="city">
    <option>Please select country</option>
</select>

(assuming that ${countries} is an Map<String, String> in application scope)

Hope this clears the one and other 🙂

See also:

• Related questions with tags [json]+[jsp].
• Related questions with tags [json]+[servlets].