• Like
AJAX and the GWT
Upcoming SlideShare
Loading in...5
×
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
346
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CC292 Simon M. Lucas
  • 2. Ajax
    • A synchronous J avaScript A nd X ML
    • 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
  • 3. Non-Ajax: Amazon
  • 4. Example: Personalised Google
  • 5. Ajax v. non-Ajax: which is which?
  • 6. 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
  • 7. 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
  • 8. Next…
    • We now look at two things:
      • The fundamental programming concepts behind Ajax
      • Some simple GWT examples
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. Hello GWT .html file
    • <html>
    • <head>
    • <meta name='gwt:module' content='com.google.gwt.sample.hello.Hello'>
    • <title>Hello</title>
    • </head>
    • <body bgcolor=&quot;white&quot;>
    • <script language=&quot;javascript&quot; src=&quot;gwt.js&quot;></ script>
    • <p>Button should be below this.</p>
    • <div id=&quot;hi&quot; >
    • <p>
    • Hello there!
    • </p>
    • </div>
    • <p>But above this.</p>
    • </body>
    • </html>
  • 16. 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
  • 17. Hello.java
    • public class Hello implements EntryPoint {
    • public void onModuleLoad() {
    • // define a Button to add
    • Button b = new Button( &quot;Click me&quot;, new ClickListener() {
    • public void onClick(Widget sender) {
    • Window.alert(&quot;Hello, AJAX&quot;);
    • }
    • }); // add the Button // get is a static method of class RootPanel
    • RootPanel.get(&quot;hi&quot;).add(b);
    • }
    • }
  • 18. 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
  • 19. Kitchen Sink
  • 20. 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)