An Analysis of AJAX Featuring SOAP and Comet
advertisement
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
How Web Applications Work
User Requests
Web 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 […]
<HTML>
<TITLE>Google</TITLE>
<BODY>
[…]
</BODY>
Documents are forced
</HTML>
to be ‘heavy’,
5/3/2006
Mike/Justin/JYoo AJAX/SOAP/Comet
displaying new
information requires a
new page request
2
How Web Applications Work
Title
User interaction (e.g. button
click) causes a complete
page reload
Title
UI
Table
UI
Table
UI
Table
UI
Table
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
5/3/2006
Mike/Justin/JYoo AJAX/SOAP/Comet
3
IFrame – Moving Forward
Title
UI
Table
UI
Table
User interaction (e.g. button
click) causes a smaller reload
of certain sections of the web
page
UI
Table
Right Direction
Provides a way to not pull entire page
Wrong Implementation
5/3/2006
Send meta-data and document
formatting with every page load
Need a way to send just data to reduce
bandwidth and decrease response time
<HTML>
<HTML>
<TITLE>Google</TITLE>
[Document Subset]
<BODY>
</HTML>
[…]
<IFRAME ID=Dynamic/>
[…]
<script>
onButtonClick =
{
IFRAME.Dynamic.SRC = mynewpage.html
}
</script>
</BODY>
</HTML>
Mike/Justin/JYoo AJAX/SOAP/Comet
4
XMLHttp – A better way
Title
UI
Table
UI
Table
User interaction (e.g. button
click) causes a document
request
Document
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
5/3/2006
Mike/Justin/JYoo AJAX/SOAP/Comet
5
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?
5/3/2006
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
Mike/Justin/JYoo AJAX/SOAP/Comet
6
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
5/3/2006
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
Mike/Justin/JYoo AJAX/SOAP/Comet
7
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
5/3/2006
Another design pattern needed to allow more of a publish/subscribe model
apposed to a request/response one
Mike/Justin/JYoo AJAX/SOAP/Comet
8
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
5/3/2006
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
Mike/Justin/JYoo AJAX/SOAP/Comet
9
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…
5/3/2006
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
Mike/Justin/JYoo AJAX/SOAP/Comet
10
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 = ???
5/3/2006
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!
Mike/Justin/JYoo AJAX/SOAP/Comet
11
Demo
Live AJAX/SOAP Demo
5/3/2006
Mike/Justin/JYoo AJAX/SOAP/Comet
12
Questions
Questions and Comments are Welcome
5/3/2006
Mike/Justin/JYoo AJAX/SOAP/Comet
13
What is AJAX
Asynchronous Javascript And XML
Used in creating web application
5/3/2006
Mike/Justin/JYoo AJAX/SOAP/Comet
14
