wiki:WebApplication

Communication via JSON/XML Data

One of the benefits of using GWT is that you can dynamically change the HTML content displayed in the web browser. For example, by downloading database data from the web server as a background process of your client program, you can update the HTML contents without any page moves.

In the traditional web programs (e.g., CGI), in order to perform such data communication, we have to store page states (e.g., current displayed page number, user input data, etc.) in the server-side memory, called a session. Therefore, it is often said that HTML is state-less without the server, that is, upon a page move, the browser discards the all displayed contents of a page.

To overcome this problem, a technology called AJAX (Asynchronous !Javascript + XML) has been developed, which enables an HTML page to communicate a web server via a Javascript program that recieves XML data while displaying the page content to the users. Recieved XML data from the server can be used to modify the current HTML content. Since the emergence of AJAX, no page move is required to update the web page contents.

The GWT has AJAX supports, but you wouldn't notice the existence of AJAX calls behind your GWT client programs. All you have to do is to communicate with the web server with the following methods:

• HTTPRequest.asyncGet() mehtod
• GWT RPC (Remote Procedure Call)

Today, we learn the first method using HTTPRequest.

Same-Origin Security Policy

In most of the web browser, your JavaScript program cannot access the internet resources outside of the host server from which the JavaScript program are downloaded. For example, a JavaScript program downloaded from http://www.foo.com/ cannot access http://www.abc.com/. Consequently, your GWT codes and server-side program must be placed in the same domain.

In general, however, server-side programs have no such a restriction, so your client-side progam can access any web resources through the server by using it as a proxy.

• References: http://en.wikipedia.org/wiki/Same_origin_policy

!HTTPRequest

• HttpRequest
  • http://google-web-toolkit.googlecode.com/svn/javadoc/1.4/com/google/gwt/user/client/HTTPRequest.html

JSON

The JSON (http://www.json.org) format has the following types of data:

• Object: { String:Value, String:Value, ... } (key, value) pairs

• Array: [ Value, Value, ... ]

• Value:

• Number:

• String:

Parsing JSON Data

JSONParser translates a given input JSON string into a JSONValue object; actually, it is a JSONObject casted to its interface JSONValue.

• http://google-web-toolkit.googlecode.com/svn/javadoc/1.4/com/google/gwt/json/client/JSONParser.html

• An example of JSON data parsing: http://code.google.com/webtoolkit/examples/jsonrpc/

Homework

• Create a CGI program that sends database table data in JSON (or XML format)
  • An example of the JSON data:

    {
        "column": ["id", "name", "phone", "address"],
        "data":[
          [ 1, "leo", "xx-xxxx-xxxx", "somewhere" ],
          [ 2, "yui", "xx-xxxx-xxxx", "somewhere you know where"]
        ]
    }
    

• Create an GWT client-side program that receives table data from this CGI program. Next, parse the received JSON (XML) data, and then display it in an HTML table format (use FlexTable?, GridTable?, etc.).

id	name	phone	address
1	leo	xx-xxxx-xxxx	somewhere
2	yui	xx-xxxx-xxxx	somewhere you know where

• Use your program of the previous homework to access the CGI program.

• Add a pagination facility in your GWT interface for moving to next (previous) database pages.

• Compile your GWT codes into JavaScript?, then place the compiled codes in your web server.

Tips

• Retrieves partial data from a database table

    select * from table1 limit 20 offset 100
  

• Gets the CGI URL

    GWT.getModuleBaseURL() + (relative path to your CGI program. e.g. db.cgi)