Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

AJAX and the GWT

VIEWS: 18 PAGES: 20

									       CC292
Simon M. Lucas
Ajax
 Asynchronous JavaScript And XML
 Technology behind interactive web sites
     MySpace, Personalised Google Page, GMail
     etc
 Provide smoother experience than
  conventional web pages
 No need to refresh the entire page
 Snippets of information are updated as
  necessary
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
    experience
   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
Next…
   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-
  independent
     It’s job is to serve up dynamic data on demand
XMLHttpRequest()
  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
   ○ request.open(“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
      ready)
     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
      appropriately
   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
    support
   So many things to worry about:
       HTML
       JavaScript
       Java (or other server-side language)
       JSP?
       CSS
   GWT: develop entire web applications in pure
    Java
     With a simple HTML container page to indicate basic
        layout
Hello World Example
 Modified from GWT example
 Two user written files:
     Hello.html
     Hello.java
   Hello.html
     Includes a call to gwt.js – the JavaScript
      toolkit
     And an element with a defined id
     This can be selected to add content to
      ○ Just like previous JavaScript examples
Hello GWT .html file
<html>
   <head>
       <meta name='gwt:module'
   content='com.google.gwt.sample.hello.Hello'>
       <title>Hello</title>
   </head>
   <body bgcolor="white">
       <script language="javascript"
   src="gwt.js"></script>
         <p>Button should be below this.</p>
         <div id="hi">
             <p>
                  Hello there!
             </p>
         </div>
         <p>But above this.</p>
    </body>
</html>
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
  EntryPoint
 Hence defines onModuleLoad method
     Note: the example is missing the import
      statements
Hello.java
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
      RootPanel.get("hi").add(b);
    }
}
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
  look
 Use of HTML / JS controls
     All from within Java programs
Kitchen Sink
Summary
   Ajax
     Making web apps behave more like desktop apps in
      terms of their user-interface
     Update only the parts of the page that need
      changing
   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
      Guide)

								
To top