ajax and the gwt
DESCRIPTION
TRANSCRIPT
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.jspThe web app state is reflected in the URLAnd stored in the browser’s history
Though some Ajax apps DO support thisAnd 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 thisE.g. GWT
Next…
We now look at two things:The fundamental programming concepts
behind AjaxSome 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 contentThis 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-independentIt’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 complexHence the need for a utility libraryOr better still, platforms such as GWT
GWT: Google Web Toolkit Ajax programming is hard without the right
support So many things to worry about:
HTMLJavaScriptJava (or other server-side language)JSP?CSS
GWT: develop entire web applications in pure JavaWith a simple HTML container page to indicate basic
layout
Hello World Example
Modified from GWT example Two user written files:
Hello.htmlHello.java
Hello.htmlIncludes a call to gwt.js – the JavaScript toolkitAnd an element with a defined idThis 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 clickedPop up a window alert
The Hello example implements EntryPoint
Hence defines onModuleLoad methodNote: the example is missing the import
statements
Hello.javapublic 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 AjaxChapter 20 of Flanagan (JavaScript: the Definitive
Guide)