Cleaning up the Internet Using AJAX, SOAP and Comet

1
Cleaning up the InternetUsing AJAX, SOAP and
Comet

• CS526
• Mike Gerschefske
• Justin Gray
• James Yoo
• 02 May 2006

2
How Web Applications Work
Title
Table
UI
Table
UI
User RequestsWeb Page either by clicking a
button or entering a URL
The entire page is changed and reloaded with the
server response
HTTP GET http//www.google.com/ Or HTTP POST
ltHTMLgtltTITLEgtGooglelt/TITLEgtltBODYgtlt/BODYgtlt/
HTMLgt
Documents are forced to be heavy, displaying
new information requires a new page request
3
How Web Applications Work
User interaction (e.g. button click) causes a
complete page reload
Title
Title
Table
Table
UI
UI
Table
Table
UI
UI
Problems

• This causes a complete page reload to occur on
  the browser
• Browser is forced to reload entire document tree
• Browser is forced to request all SRC tags
  (caching can help with this)
• Server has to send ENTIRE document to client --
  often consuming bandwidth
• With large documents, multiple packets and
  latency can cause longer browser load times

4
IFrame Moving Forward
User interaction (e.g. button click) causes a
smaller reload of certain sections of the web page

• Right Direction
• Provides a way to not pull entire page
• Wrong Implementation
• Send meta-data and document formatting with every
  page load
• Need a way to send just data to reduce bandwidth
  and decrease response time

Title
Table
UI
UI
Table
Table
UI
ltHTMLgtDocument Subset lt/HTMLgt
ltHTMLgtltTITLEgtGooglelt/TITLEgtltBODYgtltIFRAME
IDDynamic/gtltscriptgtonButtonClick
IFRAME.Dynamic.SRC mynewpage.htmllt/scriptgtlt
/BODYgtlt/HTMLgt
5
XMLHttp A better way
User interaction (e.g. button click) causes a
document request
Title
Document
Table
UI
Table
UI
The Browser Wars

• Microsoft created XMLHttp (Active X) browser
  plugin to allow dynamic HTTP GET/POST
• Mozilla realized this was good and created
  XMLHttpRequest
• Good idea, but nothing is standardized
• Name is deceiving, can be XML but is really
  document exchange

What does this really provide us?

• A simple way to request DATA

6
So what is AJAX?

• Asynchronous JavaScript And XML
• This is a pattern, not a product
• This is a browser web based design pattern
• The use of XMLHttp/XmlHttpRequest to request XML
  based documents and use JavaScript to render them
  on the browser
• If its not Asynchronous, JavaScript or XML its
  not AJAX its something else not necessarily a
  bad thing
• Why is this better?
• Enriches user experience by making web
  application feel more responsive
• Helps minimize traffic server only sends data
  in XML apposed to HTML
• Minimized traffic helps reduce overall browser
  loading

7
The Missing Link

• How the browser fits a SOA
• One implementation is SOAP based web services
• SOAP encapsulates XML in a standardized XML
  format
• The browser is able to consume those web services
• example Can use web services to order books,
  check stocks and weather from multiple companies
  all on one web page
• Problems
• SOAP consumption is not built into the browser
• Messages have to be manually built and parsed
• Microsoft tried to build this functionality into
  a Javascript file, but didnt work out
• Ultimately needs to be put in the browser
• Lack of standardization between browsers

8
The next problem

• Browsers request data servers send it
• With a request/response architecture, the client
  isnt always aware if it should be asking for
  data i.e. a user is watching stocks
• request/response user has to actively refresh a
  document exchange to see if the stock has changed
  very wasteful as the user may over request, or
  under request and not be updated in time
• some implentations to address this involved
  JavaScript timers to pull on intervals
• Solution
• Another design pattern needed to allow more of a
  publish/subscribe model apposed to a
  request/response one

9
Comet

• About Comet
• Comet, again, is just a design pattern
• Comet takes the TCP stream being sent to the
  browser and keeps it open
• With the stream open, the server flushes (or
  pushes) the data to the client when ever the
  server deems necessary
• XMLHttp/Request is able to process this flushed
  data and maintain the open connection
• Makes the browser a serious contender for
  developing any new application
• Problems
• The TCP keep-alive is not exactly supported in
  web servers
• Lots of hacks exist to do it, Apache soon to
  support
• Not all browsers have a call-back to support
  this, so may wind up with timer client side,
  checking if new information arrived

10
SOAP, AJAX and Comet

• Is it Cleaner?
• Based of the names, one would think so
• Lack of standardized implementations isnt
• Asynchronous good, pub/sub good, move towards
  SOA model good, were on the right track
• When to use it
• Not all applications should be web based
• (local) Processor intensive, graphic intensive,
  etc.
• If users require only small sub sets of data,
  yet have to request large HTML documents to get
  it, AJAX
• If a pub/sub architecture is needed (meebo)
  Comet

11
Looking Forward

• AJAX forces XML to the client which
• Can provide last minute-outer edge firewalling
• Makes services and web page functionality more
  modular
• Can decrease bandwidth consumption
• Comet provides server side call backs
• Something WSE (Web Service Eventing) tried
  creating
• Eliminates wasteful request/response model
• AJAX Comet ???
• Next generation web applications
• Online equiv to Microsoft Word
• Microsoft Office Online
• Ruby on Rails
• Push for new companies offering services
• Backup services
• Have Browser? Will work!

12
Demo

• Live AJAX/SOAP Demo

13
Questions

• Questions and Comments are Welcome

14
What is AJAX

• Asynchronous Javascript And XML
• Used in creating web application