5/3/2006 Mike/Justin/JYoo AJAX/SOAP/Comet 1 Cleaning up the Internet Using AJAX, SOAP and Comet CS526 Mike Gerschefske Justin Gray James Yoo 02 May 2006

5/3/2006 Mike/Justin/JYoo AJAX/SOAP/Comet 1

Cleaning up the InternetUsing AJAX, SOAP and Comet

CS526Mike GerschefskeJustin GrayJames Yoo

02 May 2006


How Web Applications Work

<HTML><TITLE>Google</TITLE><BODY>[…]</BODY></HTML>

User RequestsWeb Page either by clicking a button or

entering a URL

The entire page is changed and reloaded with the server response

Documents are forced to be ‘heavy’, displaying new information requires a new page request

HTTP GET http://www.google.com/

Or

HTTP POST […]


How Web Applications Work

Title

UI

UI Table

Table

Title

UI

UI Table

Table

User interaction (e.g. button click) causes a complete page reload

• 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

Problems


IFrame – Moving Forward

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

UI

UI Table

Table

UI

Table

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

<HTML><TITLE>Google</TITLE><BODY>[…]<IFRAME ID=Dynamic/>[…]<script>onButtonClick ={ IFRAME.Dynamic.SRC = mynewpage.html}</script>

</BODY></HTML>

<HTML>[Document Subset]</HTML>


XMLHttp – A better way

Title

UI

UI Table

Table

Document

User interaction (e.g. button click) causes a document request

• 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

• A simple way to request DATAWhat does this really provide us?

The Browser Wars


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 it’s not AJAX it’s 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


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 didn’t work

out Ultimately needs to be put in the browser

Lack of standardization between browsers


The next problem

Browsers request data – servers send it With a request/response architecture, the client isn’t 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


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


SOAP, AJAX and Comet

Is it Cleaner? Based of the names, one would think so… Lack of standardized implementations isn’t Asynchronous good, pub/sub good, move towards SOA model good, we’re

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


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!


Demo

Live AJAX/SOAP Demo


Questions

Questions and Comments are Welcome


What is AJAX

Asynchronous Javascript And XML

Used in creating web application