Redefining web applications with AJAX, Servlets and JSON ...

In this article I would like to show how JSON (JavaScript Object Notation) and Java servlet can be used together in a little AJAX (Asynchronous JavaScript and XML) application.

To give brief description to those who are not closely familiar with JSON -
JSON is a lightweight syntax for representing data, which makes working with it much more pleasant than with XML and makes AJAX applications faster. Also, when working with JSON, there is no need for an XML parsing.

In the following example, I am going to create a callback servlet that fetches and parses an RSS feed. Then the parsed feed data is passed to the client side in a form of JSON. The data then formatted and presented to the user. The client uses AJAX call to query the servlet.

For this application, I used three third-party libraries:

   1. JSON library provided by JSON.org and extended by JSON-RPC-Java which allows to create and easily parse JSON   data through Java code. This library can run in a Servlet container such as Tomcat, JBoss and other J2EE Application servers.
   2. Project ROME                                                                                                                                                                                ROME is an set of open source Java tools for parsing, generating and publishing RSS and Atom feeds.
   3. JDOM XML parser                                                                                                                                                                       JDOM is a Java-based "document object model" for XML files. JDOM serves the same purpose as DOM, but is easier to use

The libraries are included in the source code which accompanies this article. This application example is also included as a WAR archive, ready to be deployed on Tomcat.

The following is my servlet implementation. The servlet fetches and parses feed data. The JSON library mentioned previously allows me easily to create and populate JSON object.

    package asia.javabeans.json;

    import java.io.IOException;
    import java.net.MalformedURLException;
    import java.net.URL;
    import java.util.List;

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

    import org.json.JSONArray;
    import org.json.JSONObject;

    import com.sun.syndication.feed.synd.SyndEntry;
    import com.sun.syndication.feed.synd.SyndFeed;
    import com.sun.syndication.fetcher.FeedFetcher;
    import com.sun.syndication.fetcher.FetcherException;
    import com.sun.syndication.fetcher.impl.FeedFetcherCache;
    import
    com.sun.syndication.fetcher.impl.HashMapFeedInfoCache;
    import com.sun.syndication.fetcher.impl.HttpURLFeedFetcher;
    import com.sun.syndication.io.FeedException;

    /**
     * @author Alexander Zagniotov (http://javabeans.asia)
     *
     */
    public class JsonServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;
    private static final String BLOG_URL =
            "http://javabeans.asia/rss.xml";
    private static final String CONTENT_TYPE =
                "application/json";
    private FeedFetcherCache feedInfoCache = null;
    private FeedFetcher feedFetcher = null;

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

        feedInfoCache =
            HashMapFeedInfoCache.getInstance();
        feedFetcher =
            new HttpURLFeedFetcher(feedInfoCache);
    }

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

        SyndFeed feed = this.feedFethcer(BLOG_URL);

      if (feed != null) {
        String json = this.feedToJSON(feed);
        response.setContentType(CONTENT_TYPE);
        response.setHeader("Cache-Control", "no-cache");
        response.getWriter().write(json);
      }
    }

    private SyndFeed feedFethcer(String url) {
        SyndFeed feed = null;
        try {
            feed = feedFetcher.retrieveFeed(
            new URL(BLOG_URL));
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
        } catch (FeedException e) {
            e.printStackTrace();
        } catch (FetcherException e) {
            e.printStackTrace();
        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        return feed;
    }

    private String feedToJSON(SyndFeed feed) {

        JSONObject jsonObj = new JSONObject();
        JSONArray jsonEntryTitles = new JSONArray();

        jsonObj.put("blogtitle", feed.getTitle());
        jsonObj.put("blogdescription", feed.getDescription());
        jsonObj.put("bloglanguage", feed.getLanguage());
        jsonObj.put("bloglink", feed.getLink());
        jsonObj.put("author", feed.getCopyright());

        List<?> feedEntries = feed.getEntries();

        for (Object c : feedEntries) {
             SyndEntry syndicateEntry = (SyndEntry) c;
             jsonEntryTitles.put(syndicateEntry.getTitle());
        }

        jsonObj.put("blogentrytitles", jsonEntryTitles);
        return jsonObj.toString();
      }
    }

As you can see it is very easy to construct JSON objects and arrays on the server side and pass them to the client. For the purpose of this example I am getting my data from RSS feed, but the data can also be coming from DB etc.

The following is my client implementation. The client queries the servlet using AJAX call. When an AJAX call returns a response from the servlet in a form of JSON object, the object data is formatted and information about the RSS feed is presented to the client:

    <html>
    <head>

    <title>Java Beans dot Asia</title>

    <script language="JavaScript" type="text/javascript">
          
        var httpRequest = null;
      
    function getDescriptionAsJSON() {

        var description =
            document.getElementById( wouldescription);
        description.innerHTML = "Loading, please wait ...";

        var url = "http://localhost:8080/json/json";
        if(window.XMLHttpRequest){
            httpRequest = new XMLHttpRequest();
        }
        else if(window.ActiveXObject){
            httpRequest =
                new ActiveXObject("Microsoft.XMLHTTP");
        }

        httpRequest.open("GET", url, true);
        httpRequest.onreadystatechange = handler;
        httpRequest.send(null);
    }

    function handler() {
        if (httpRequest.readyState == 4) {
            if (httpRequest.status == 200) {
                processJSON(httpRequest.responseText);
            }
        }
    }

    function processJSON(jsonObjectString) {

        var description =
            document.getElementById( wouldescription);
      
          //Since JSON is a subset of JavaScript, I am using
          //JavaScript is own compiler to parse JSON in one line!
          var jsonObject = eval(( + jsonObjectString + ))

        var text = "";
      
        text += "Author: " + jsonObject.author + "< br />";
        text += "Blog Name: " +
            jsonObject.blogtitle + "< br />";
        text += "Blog URL: " +
            jsonObject.bloglink + "< br />";
        text += "Blog Description: " +
            jsonObject.blogdescription + "< br />";
        text += "Blog Language: " +
            jsonObject.bloglanguage + "< br />";
      
        description.innerHTML = text;
        var entries = "Last " +
                      jsonObject.blogentrytitles.length
        + " blog entries are: ";

        for (var index = 0;
            index < jsonObject.blogentrytitles.length;
                                index ++) {
            entries += (index + 1) + ": " +
                jsonObject.blogentrytitles[index] + " ";
        }
        alert(entries);
    }
      
    </script>

    </head>
    <body>
    <img src="images/javabeansmugshot_120x120.jpg" border="1" />
    < br />
    < br />
    <div id="description"></div>
    < br />
    < br />
    <a href="javascript:void(0)"
                 onclick="return getDescriptionAsJSON();">
    Click to get description!</a>
    </body>
    </html>

As you could see, JSON data can be easily parsed on the client side with the help of Java script eval() function. To remind - JSON is a subset of Java script, therefore eval() will produce a valid object.

Keep in mind, that there is a need for extra care when using eval. The problem is that eval will compile and execute Java script code that coming back from the response. This could cause a security risk
if the response data is coming from an untrusted source.