Learning Center
Plans & pricing Sign in
Sign Out

AJAX and the GWT


Simon M. Lucas
 Asynchronous JavaScript And XML
 Technology behind interactive web sites
     MySpace, Personalised Google Page, GMail
 Provide smoother experience than
  conventional web pages
 No need to refresh the entire page
 Snippets of information are updated as
Non-Ajax: Amazon
Example: Personalised Google
Ajax v. non-Ajax: which is which?
Single Page Web Apps
   Many Ajax apps are single page
   A conventional web app consists of many
    different pages
   An Ajax app typically reloads and
    rearranges only the parts of a page that
    need to change
   Hence: smoother, more interactive
   Better use of network bandwidth: no need
    to resend entire page each time
Ajax disadvantages
   Web app state is not reflected in address bar
    by default – compare with non-Ajax:
     E.g. in the cut-down shop (ass 2), the basket page is
      simply basket.jsp
     The web app state is reflected in the URL
     And stored in the browser’s history
   Though some Ajax apps DO support this
     And GWT platform does
   Browsers support Ajax methods in different
    ways: hard to get apps that work the same
    across all main browsers
   But: good Ajax tools support this
     E.g. GWT
   We now look at two things:
     The fundamental programming concepts
      behind Ajax
     Some simple GWT examples
Ajax Programming
 The only sure thing about the acronym
  is JavaScript
 Ajax calls are not necessarily
  Asynchronous, though they often are
     (asynch calls happen in background)
   They don’t necessarily use XML:
     The calls can retrieve text, HTML fragments,
     images, JSON coded data, or XML
Ajax Client and Server
   JavaScript runs in the browser
     And makes calls to the server for fresh content
     This is often done using XMLHttpRequest().
     But may also be done by updating the ‘src’
      attribute of an iframe, for example.
 Different browsers support these
  operations slightly differently
 The server side is more browser-
     It’s job is to serve up dynamic data on demand
  Several parts to this (from Flanagan, chapter
   20; some parts are browser-dependent)
  Creating the XMLHttpRequest object
   ○ var request = new XMLHttpRequest()
  Specifying the details of the HTTP request
   ○“GET”, url, false)
  Submitting it to the server
   ○ request.send(null)
  Receiving the response
   ○ var doc = request.responseXML
XMLHttpRequest contd.
   The previous example was simplified
     The use of ‘false’ ensured synchronous
      operation (.send blocks until response object is
     The use of responseXML assumed that the
      document retrieved was XML format
     Use of send(null) is correct for a GET request
      (which never has a body)
     A POST request would set up the request body
   The details can get a bit complex
     Hence the need for a utility library
     Or better still, platforms such as GWT
GWT: Google Web Toolkit
   Ajax programming is hard without the right
   So many things to worry about:
       HTML
       JavaScript
       Java (or other server-side language)
       JSP?
       CSS
   GWT: develop entire web applications in pure
     With a simple HTML container page to indicate basic
Hello World Example
 Modified from GWT example
 Two user written files:
     Hello.html
   Hello.html
     Includes a call to gwt.js – the JavaScript
     And an element with a defined id
     This can be selected to add content to
      ○ Just like previous JavaScript examples
Hello GWT .html file
       <meta name='gwt:module'
   <body bgcolor="white">
       <script language="javascript"
         <p>Button should be below this.</p>
         <div id="hi">
                  Hello there!
         <p>But above this.</p>
Hello GWT .java file
 This gets a document fragment by id
 Adds some content to it (a button)
 And defines what should happen when the
  button is clicked
     Pop up a window alert
 The Hello example implements
 Hence defines onModuleLoad method
     Note: the example is missing the import
public class Hello implements EntryPoint {

    public void onModuleLoad() {
      // define a Button to add
      Button b = new Button(
           "Click me", new ClickListener()
         public void onClick(Widget sender) {
           Window.alert("Hello, AJAX");
       // add the Button
       // get is a static method of class RootPanel
Exploring the GWT
 Runs well with Intellij or Eclipse
 Can also run examples just by
  downloading and running the .cmd files
 KitchenSink and DynaTable are worth a
 Use of HTML / JS controls
     All from within Java programs
Kitchen Sink
   Ajax
     Making web apps behave more like desktop apps in
      terms of their user-interface
     Update only the parts of the page that need
   Could be a headache to program (browser
    compatibility minefield)
   Toolkits such as GWT offer great help
   See also:
     GWT (Google for it )
     WikiPedia entry on Ajax
     Chapter 20 of Flanagan (JavaScript: the Definitive

To top