Super simple AJAX for Java apps using JQuery and JSON
by ricardoz on Oct.28, 2009, under Articles, JavaScript, Web related
Back in April I wrote about Java to/from JSON serialization using XStream. After developing several AJAX applications using PHP and JQuery, I found that for a lot of scenarios a very simple approach is not only easy but very effective. In the case of PHP, you can effectively enable AJAX in your apps using jQuerys $.getJSON() and PHP json_encode().
I think we can use a very similar approach for Java web applications, enabling the use of AJAX through a very simple, elegant and extensible architecture, without the use of complex frameworks and extra configurations.
To build an example I used XStream to create a utility method that can serialize any POJO or Collection to JSON notation:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import com.thoughtworks.xstream.XStream; import com.thoughtworks.xstream.io.json.*; import com.thoughtworks.xstream.io.HierarchicalStreamWriter; import java.io.Writer; public class SJJT { public static String toJSON(Object obj){ XStream xstream = new XStream(new JsonHierarchicalStreamDriver() { public HierarchicalStreamWriter createWriter(Writer writer) { return new JsonWriter(writer, JsonWriter.DROP_ROOT_MODE); } }); return xstream.toXML(obj); } } |
Using it, you can create a JSP or servlet for each feature you want to expose via AJAX and then consume it using jQuerys $.getJSON(). The following example lets the use select a car brand and then fetches a model list using this approach:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>spartanjava.com - Simple JSON sample</title> <script type='text/javascript' src='<c:url value='/js/jquery.js'/>'></script> <script type='text/javascript'> function listCars(){ var brand = $("#brand").val(); $.getJSON("<c:url value='/carHandler/listCars.jsp'/>", {"brand": brand}, listCarsCallback); } function listCarsCallback(data){ var listHTML = ""; $.each(data, function(i, car) { listHTML += "<li>" + car["model"] + "</li>"; }); $("#carList").html(listHTML); } </script> </head> <body> <form> <select id="brand"> <option>Ferrari</option> <option>Porsche</option> </select> <input type="button" value="List" onclick="listCars();"/> </form> <ul id="carList"> </ul> </body> </html> |
You can find the source code of this sample as a complete web app here.
Using this approach you can probably solve most (or all) of the scenarios you will face while enabling AJAX in your Java web apps. Leave a comment on the pro/cons you think this approach has over using one of the mainstream Java AJAX frameworks (i.e. DWR).
February 19th, 2010 on 7:44 pm
Hi Ricardo,
Cool, this is the way “Ajax AutoComplete” (a previous post you published), implements the ajax call, isnt it ?
Right now, i cant give you a feedback about pro/cons, but as you said this is very simple and efective and i will prefer to use it every time it would be posible rather than DWR or similar frameworks.
For php, are others alternatives rather than JQuery ??, i mean like DWR for java.
Best Regards
Seba
February 22nd, 2010 on 10:17 am
Indeed it’s the same idea behind the autocomplete. It is extremely simple and lacks no power (ie you can do all the stuff you do with DWR or JSF or whatever), but on the other hand for some scenarios I still think a “heavier” framework can be a good idea, because it reduces the chances of developer errors, dissimilar code, etc.
January 28th, 2011 on 12:37 am
Great sample. You save my time.
Can we use the same with Spring MVC too?
-Thanks.
January 28th, 2011 on 6:54 am
I don’t see why not, u just have to make sure the URL you call returns a valid JSON string.
June 18th, 2011 on 7:57 am
Really nice stuff