json with gwt

November 27, 2010 at 9:43 pm Leave a comment

via the google tutorial, comes an overview on how to Retrieve JSON data via HTTP:

JSON reponse

This requires:

JSNI – Using JSNI you can call handwritten JavaScript methods from within the GWT module

JSNI methods  – declared native and contain JavaScript code in a specially formatted comment block between the end of the parameter list and the trailing semicolon. An example:

public final native String getText() /*-{
return this.text;

Again, a JSNI comment block begins with the exact token  /*-{

and ends with the exact token }-*/

GWT overlay types  are the response JSON objects that are returned  from the remote server, and are converted into JavaScript objects:

  • A class that extends JavaScriptObject, a marker type that GWT uses to denote JavaScript objects.
  • Methods on overlay types are JSNI. These getters directly access the JSON fields you know exist.

Now for the  call to the remote server:

JSON request

The getJSON Javascript Native interface method  :

public native static void getJson(int requestId, String url,
StockWatcher handler) /*-{

This is where you work around the Cross Site scripting SOP  (same origin policy) restrictions by using the src attribute of the <script> tag to make the call to the remote server.

var callback = "callback" + requestId;
var script = document.createElement("script");
script.setAttribute("src", url+callback);
script.setAttribute("type", "text/javascript");

The src attribute is the URL of the JSON data with the name of a callback function appended. When the script executes, it fetches the padded JSON;

window[callback] = function(jsonObj) {

window[callback + "done"] = true; }

The callback function is defined on the browser’s window object. It receives as an argument a JavaScript object which is the JSON data returned by the server.

setTimeout(function() {
if (!window[callback + "done"]) {
delete window[callback];
delete window[callback + "done"];
, 1000);

A timeout function is defined to check for an unresponsive server or network problem. It first  checks a flag to see if the JSON callback was ever called. Before the timeout function completes, it removes the new <script> element and the callback function from window.


Finally call appendChild() to attach the dynamically-loaded <script> element to the HTML document body. This causes the web browser to download the JavaScript referenced by the src attribute

public void handleJsonResponse(JavaScriptObject jso) {
if (jso == null) {
displayError("Couldn't retrieve JSON");

When the callback function executes, it calls the Java handleJsonResponse method and passes it the JSON data as a JavaScript object. This has been an example of a bridge method which is a technique for calling back into the Java source code.

Of course, the above example doesn’t handle multiple concurrent requests. For that, you need an array of bridge methods;

gwt json concurrent requests bridge method, you can generate a bridge method, which will be used to invoke a GWT JSON callback handler (aka JSON Request Handler).


working with JSON


Entry filed under: Uncategorized. Tags: .

Host your domain on GAE JSON and Twitter API detailed

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


%d bloggers like this: